AdvancedMarkerView extends. Throw an error TypeError: Illegal constructor

Question

I am using Google Maps and need to add a google.maps.marker.AdvancedMarkerView with an additional parameter that contains information about the marker, such as its ID. To achieve this, I extended the AdvancedMarkerView class and added my own parameter. Everything was working fine until recently when I started receiving an error message: 'TypeError: Illegal constructor' when creating a new instance of ParkingMarkerView. Here is the code for my class:

my class

class ParkingMarkerView extends google.maps.marker.AdvancedMarkerView {
    pData;
    constructor(options) {
        super(options);
        this.pData = options.pData;
    }
}


new ParkingMarkerView({
            position: {
                lat: latitude,
                lng: longitude
            },
            map,
            draggable: false,
            pData,
            content,
        })

I have not made any changes to the code, so I suspect that Google may have made some changes to their script that are causing this error. The error occurs when creating a new ParkingMarkerView instance with the pData, content, and other options. If you have any suggestions for how to resolve this error, please let me know. Thank you!

have no idea what to try

Answer 1

According to https://developers.google.com/maps/documentation/javascript/reference/advanced-markers, the AdvancedMarkerElement class (originally named AdvancedMarkerView in the beta channel) is now a subclass of HTMLElement.

In order to subclass it and create its instance, you need to make your subclass a custom element first.

For example:

class ParkingMarker extends AdvancedMarkerElement {
  constructor(options) {
    super(options);
  }
}

// Define a custom element.
customElements.define('parking-marker', ParkingMarker);

// Now the subclass can be instantiated.
const parkingMarker = new ParkingMarker({...});

You can also see more info about instantiating HTMLElement here. Hope that helps.