diff --git a/src/google-maps/map-advanced-marker/README.md b/src/google-maps/map-advanced-marker/README.md new file mode 100644 index 000000000000..4f2177219546 --- /dev/null +++ b/src/google-maps/map-advanced-marker/README.md @@ -0,0 +1,44 @@ +# MapAdvancedMarker + +The `MapAdvancedMarker` component wraps the [`google.maps.marker.AdvancedMarkerElement` class](https://developers.google.com/maps/documentation/javascript/reference/advanced-markers) from the Google Maps JavaScript API. The `MapAdvancedMarker` component displays a marker on the map when it is a content child of a `GoogleMap` component. + +**Note:** Use of `map-advanced-marker` requires a `google-map` with a valid `mapId`. + +## Example + +```typescript +// google-map-demo.component.ts +import {Component} from '@angular/core'; +import {GoogleMap, MapAdvancedMarker} from '@angular/google-maps'; + +@Component({ + selector: 'google-map-demo', + templateUrl: 'google-map-demo.html', + imports: [GoogleMap, MapAdvancedMarker], +}) +export class GoogleMapDemo { + center: google.maps.LatLngLiteral = {lat: 24, lng: 12}; + zoom = 4; + advancedMarkerOptions: google.maps.marker.AdvancedMarkerElementOptions = {gmpDraggable: false}; + advancedMarkerPositions: google.maps.LatLngLiteral[] = []; + + addAdvancedMarker(event: google.maps.MapMouseEvent) { + this.advancedMarkerPositions.push(event.latLng.toJSON()); + } +} +``` + +```html + + + @for (position of advancedMarkerPositions; track position) { + + } + +```