Using Angular Google Map (AGM), I'm trying to add a new marker when map is clicked. To do so, I have added an event mapClick that will send the event with the coordinates to addMarker method.
<agm-map [latitude]="location.latitude" [longitude]="location.longitude" (mapClick)="addMarker($event.coords.lat, $event.coords.lng)">
<agm-marker [latitude]="location.latitude" [longitude]="location.longitude"></agm-marker>
import { Component, OnInit } from '@angular/core';
import { Location } from '../models/map-model';
@Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.scss']
})
export class MapComponent implements OnInit {
public location: Location;
public markers: [];
constructor() { /*empty*/ }
ngOnInit(): void {
this.location = {
latitude: -28.68352,
longitude: -147.20785
}
}
addMarker(latitude: number, longitude: number) {
console.log(`latitude: ${latitude}, longitude: ${longitude}`);
}
}
PROBLEM:
The full reference to the API can be found at the Google Maps API Docs, and the Angular implementation in the source code. The last component is MapInfoWindow, it can be used to open a pop-up window of a marker. To show the pop-up we have to add the component inside the google-map template.
The Google Maps module can be installed from @angular/google-maps. When the installation is finished, we must add the Angular module GoogleMapsModule to the import declaration. The GoogleMapsModule exports three components that we can use:
The Angular component is very new, that's why the documentation and example code is minimal. Because the Angular implementation follows the Google Maps API specs, we can take a look at the rich documentation from the JavaScript API. See the code below for the full explored example of this post.
With the map in place, we can start adding markers. This is done by using the MapMarker component. To add a marker, make sure the marker is added inside the google-map tag otherwise it will not be displayed.
It's a bug in the latest published version. 3.0.0-beta.0
It's apparently been fixed but not published.
You could revert to ^1.1.0
.
Or implement the workaround suggested in the issue.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With