The MapMarker
component wraps the google.maps.Marker
class from the Google Maps JavaScript API. The MapMarker
component displays a marker on the map when it is a content child of a GoogleMap
component. Like GoogleMap
, this component offers an options
input as well as convenience inputs for position
, title
, label
, and clickable
, and supports all google.maps.Marker
events as outputs.
Note: As of 2024, Google Maps has deprecated the Marker
class. Consider using the map-advanced-marker
instead.
// google-map-demo.component.ts
import {Component} from '@angular/core';
import {GoogleMap, MapMarker} from '@angular/google-maps';
@Component({
selector: 'google-map-demo',
templateUrl: 'google-map-demo.html',
standalone: true,
imports: [GoogleMap, MapMarker],
})
export class GoogleMapDemo {
center: google.maps.LatLngLiteral = {lat: 24, lng: 12};
zoom = 4;
markerOptions: google.maps.MarkerOptions = {draggable: false};
markerPositions: google.maps.LatLngLiteral[] = [];
addMarker(event: google.maps.MapMouseEvent) {
this.markerPositions.push(event.latLng.toJSON());
}
}
<!-- google-map-demo.component.html -->
<google-map
height="400px"
width="750px"
[center]="center"
[zoom]="zoom"
(mapClick)="addMarker($event)">
@for (position of markerPositions; track position) {
<map-marker [position]="position" [options]="markerOptions" />
}
</google-map>