angular-google-mapsgoogle-maps-advanced-marker-element

How to Customize Advanced Marker Pin Elements in @angular/google-maps


I'm working with Angular 17 and @angular/google-maps@17.3.3 and would like to customize the appearance of map-advanced-marker pins. According to the Google Advanced Markers documentation, customization options like glyph, scale, and color are available. However, I don't know how to set it using @angular/google-maps@17.3.3. I tried to apply customization like this:

 <map-advanced-marker
  #markerElem="mapAdvancedMarker"
  [position]="marker.position"
  [content]="{ scale: 1.5 }"
></map-advanced-marker>

This results in the following error:

InvalidValueError: AdvancedMarkerElement: 
`content` invalid: not an instance of Node; and [object Object].

It seems I need to use PinElement object. But I cannot import PinElement from @angular/google-maps.

Is there a correct way to customize the map-advanced-marker in @angular/google-maps? How can I use the PinElement?


Solution

  • My problem was caused by not loading the marker library. I used @googlemaps/js-api-loader to load Google Maps, but I did not specify which libraries to load:

    const loader = new Loader({
       apiKey: apiKey,
       version: 'weekly',
       libraries: [],
    });
    

    Once I added marker library to load like this: libraries: ['marker'], I was able to start using PinElement:

    ts:

     let testPin = new google.maps.marker.PinElement({
           scale: 1.5,
     });
    

    HTML:

    <map-advanced-marker
      #mapMarker="mapAdvancedMarker"
      [position]="marker.position"
      [content]="testPin.element"
    ></map-advanced-marker>