CODEWITHSUNDEEP
angular-google-mapsgoogle-maps-advanced-marker-element
Tyutlaeva Ekaterina
Tyutlaeva Ekaterina

Reputation: 196

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

I'm working with Angular 17 and @angular/[email protected] 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/[email protected]. 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?

Upvotes: 4

Views: 3004

Answers (1)

Tyutlaeva Ekaterina
Tyutlaeva Ekaterina

Reputation: 196

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>

Upvotes: 1

Related Questions