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?
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>