Skip to content

Commit 5ea076a

Browse files
K0n4ta13crisbeto
authored andcommitted
docs(google-maps): add readme (#29898)
* docs(google-maps/map-advanced-marker): README.md added * Update README.md Removed list of inputs and corrected spelling. * Update README.md (cherry picked from commit a2dc657)
1 parent a2cd049 commit 5ea076a

File tree

1 file changed

+44
-0
lines changed

1 file changed

+44
-0
lines changed
Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
# MapAdvancedMarker
2+
3+
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.
4+
5+
**Note:** Use of `map-advanced-marker` requires a `google-map` with a valid `mapId`.
6+
7+
## Example
8+
9+
```typescript
10+
// google-map-demo.component.ts
11+
import {Component} from '@angular/core';
12+
import {GoogleMap, MapAdvancedMarker} from '@angular/google-maps';
13+
14+
@Component({
15+
selector: 'google-map-demo',
16+
templateUrl: 'google-map-demo.html',
17+
imports: [GoogleMap, MapAdvancedMarker],
18+
})
19+
export class GoogleMapDemo {
20+
center: google.maps.LatLngLiteral = {lat: 24, lng: 12};
21+
zoom = 4;
22+
advancedMarkerOptions: google.maps.marker.AdvancedMarkerElementOptions = {gmpDraggable: false};
23+
advancedMarkerPositions: google.maps.LatLngLiteral[] = [];
24+
25+
addAdvancedMarker(event: google.maps.MapMouseEvent) {
26+
this.advancedMarkerPositions.push(event.latLng.toJSON());
27+
}
28+
}
29+
```
30+
31+
```html
32+
<!-- google-map-demo.component.html -->
33+
<google-map
34+
mapId="yourMapId"
35+
height="400px"
36+
width="750px"
37+
[center]="center"
38+
[zoom]="zoom"
39+
(mapClick)="addAdvancedMarker($event)">
40+
@for (position of advancedMarkerPositions; track position) {
41+
<map-advanced-marker [position]="position" [options]="advancedMarkerOptions" />
42+
}
43+
</google-map>
44+
```

0 commit comments

Comments
 (0)