Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular Google Maps mapClick() event not working

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:

  • CANNOT GET COORDINATES. Error in html = 'Identifier coords is not defined'
  • When i print the event on console, returns "c".

enter image description here

like image 433
Alba Moreno González Avatar asked Sep 09 '20 17:09

Alba Moreno González


People also ask

How to open pop-up window of marker in Google Maps using angular?

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.

How to use Google Maps with angular?

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:

Why is there no documentation for the angular component?

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.

How to add a marker to a Google map?

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.


1 Answers

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.

like image 81
hyperdrive Avatar answered Oct 08 '22 18:10

hyperdrive