Like many I am trying to migrate to AdvancedMarkerElement in Google Maps Javascript API. I have followed the documentation and so far have:

<script defer src="={{env("GOOGLE_JAVASCRIPT_APIKEY")}}&loading=async&callback=gmapinit&v=weekly&libraries=marker"></script>

then further for the callback:

async function gmapinit() {//used as callback,required by the api when loading it
      const {AdvancedMarkerElement} = await google.maps.importLibrary("marker");
      const {PinElement} = await google.maps.importLibrary("marker");
      GMap = new G_Map();//own wrapper class
}

Successfully working is a basic AdvancedMapMarker on the map with:

  let marker = new google.maps.marker.AdvancedMarkerElement({
        map: this.map, position: markerposition, title: title,
      });
      let iconImg = document.createElement("img");
      iconImg.src = optargs.icon;
      marker.content = iconImg;

However there is no scaling for the image here, which I would like to do programmatically. So attempting to change the above to

  let iconImg = document.createElement("img");
  iconImg.src = optargs.icon;
  let pin = new PinElement({
    scale: 1.5,
    content: iconImg,

  });
  let marker = new google.maps.marker.AdvancedMarkerElement({
    map: this.map, position: markerposition, title: title,
    content: pin.element
  });

Is where the error occurs with:

ReferenceError: PinElement is not defined

So my question is how do I load PinElement to code as per the examples - I am obviously missing something simple somewhere

Like many I am trying to migrate to AdvancedMarkerElement in Google Maps Javascript API. I have followed the documentation and so far have:

<script defer src="https://maps.googleapis./maps/api/js?key={{env("GOOGLE_JAVASCRIPT_APIKEY")}}&loading=async&callback=gmapinit&v=weekly&libraries=marker"></script>

then further for the callback:

async function gmapinit() {//used as callback,required by the api when loading it
      const {AdvancedMarkerElement} = await google.maps.importLibrary("marker");
      const {PinElement} = await google.maps.importLibrary("marker");
      GMap = new G_Map();//own wrapper class
}

Successfully working is a basic AdvancedMapMarker on the map with:

  let marker = new google.maps.marker.AdvancedMarkerElement({
        map: this.map, position: markerposition, title: title,
      });
      let iconImg = document.createElement("img");
      iconImg.src = optargs.icon;
      marker.content = iconImg;

However there is no scaling for the image here, which I would like to do programmatically. So attempting to change the above to

  let iconImg = document.createElement("img");
  iconImg.src = optargs.icon;
  let pin = new PinElement({
    scale: 1.5,
    content: iconImg,

  });
  let marker = new google.maps.marker.AdvancedMarkerElement({
    map: this.map, position: markerposition, title: title,
    content: pin.element
  });

Is where the error occurs with:

ReferenceError: PinElement is not defined

So my question is how do I load PinElement to code as per the examples - I am obviously missing something simple somewhere

• javascript
• google-maps
• google-maps-advanced-marker-element

• 1 Please provide a minimal reproducible example that demonstrates your issue. If you are using an image for your icon, I don't think you want to use PinElement. From the documentation: A PinElement represents a DOM element that consists of a shape and a glyph. The shape has the same balloon style as seen in the default AdvancedMarkerElement. – geocodezip Commented May 18, 2024 at 18:01
• How can I produce an example when PinElement is undefined – Datadimension Commented May 18, 2024 at 18:44
• I don't get that error with the snippets you have posted, what does your code that has that error look like? – geocodezip Commented May 18, 2024 at 22:54

1 Answer 1

So I noticed its a minor class inheritance error with correction acheived where in the google documentation it states:

  let pin = new PinElement({

https://developers.google./maps/documentation/javascript/advanced-markers/basic-customization#hide-the-glyph

bees

  let pin = new google.maps.marker.PinElement({

The code for image in a pin is

  let iconImg = document.createElement("img");
  iconImg.src = optargs.icon;
  iconImg.style = "width:2em";
  let pin = new google.maps.marker.PinElement({
    scale: 1.25,
    background: "#F7D32F",
    glyph: iconImg,

  });
  let marker = new google.maps.marker.AdvancedMarkerElement({
    map: this.map, position: markerposition, title: title,
    content: pin.element,
    gmpClickable: true
  });

The error was clearly in the class reference to google.maps.marker.PinElement and part of the original question.

A minimal working example could never have been acheived without correcting what was originally asked and a visible error

Amendment:

I have also noticed google docs state

<script defer src="https://maps.googleapis./maps/api/js?key={{env("GOOGLE_JAVASCRIPT_APIKEY")}}&callback=gmapinit&v=weekly&libraries=marker"></script>

which caused me a few days of puzzlement as to why it worked on dev server but not live. This was because the dev server is slower with debug tools and the API loaded in time, however it was not available on the faster live server. So I made a minor adjustment to have the map API load at the top of the code and make it available as soon as loaded so I changed to

<script async src="https://maps.googleapis./maps/api/js?key={{env("GOOGLE_JAVASCRIPT_APIKEY")}}&callback=gmapinit&v=weekly&libraries=marker"></script>

There is an occasional race condition but is generally better pending time to review my GMaps wrapper class