Skip to content

Commit

Permalink
docs(google-maps): add readme (#29898)
Browse files Browse the repository at this point in the history
* 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)
  • Loading branch information
K0n4ta13 authored and crisbeto committed Nov 5, 2024
1 parent a2cd049 commit 5ea076a
Showing 1 changed file with 44 additions and 0 deletions.
44 changes: 44 additions & 0 deletions src/google-maps/map-advanced-marker/README.md
Original file line number Diff line number Diff line change
@@ -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
<!-- google-map-demo.component.html -->
<google-map
mapId="yourMapId"
height="400px"
width="750px"
[center]="center"
[zoom]="zoom"
(mapClick)="addAdvancedMarker($event)">
@for (position of advancedMarkerPositions; track position) {
<map-advanced-marker [position]="position" [options]="advancedMarkerOptions" />
}
</google-map>
```

0 comments on commit 5ea076a

Please sign in to comment.