Angular5 and Google Maps v3 Api - Getting coordinations from map "click" event

Question

I'm trying to get coordinations from click event on map

Heres the result im trying to get: Here

As far here is my code:

import { Component, OnInit } from '@angular/core';
import { ViewChild } from '@angular/core';
import { } from '@types/googlemaps';
import { map } from 'rxjs/operator/map';
import { Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-google-map',
  templateUrl: './google-map.component.html',
  styleUrls: ['./google-map.component.css']
})
export class GoogleMapComponent implements OnInit {
  constructor() { }

  markers: Array<Object>
  myLatLng = { lat: 53.131083, lng: 23.154742 };
  latitude: 53.131083;
  longitute: 23.154742;
  googleMap: google.maps.Map;

  ngOnInit() {
    var mapCanvas = document.getElementById("map");
    var myCenter = new google.maps.LatLng(53.131083, 23.154742);
    var mapOptions = {
      center: myCenter,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    this.googleMap = new google.maps.Map(mapCanvas, mapOptions);
    google.maps.event.addListener(map, 'click', function (event) {
      this.placeMarker(event);
    });
  }

  placeMarker(event) {

    //-------------- i can't get map coords -------------
    var eventLatLng = { lat: event.clientX, lng: event.clientY };
    console.log(eventLatLng);
    var marker = new google.maps.Marker({
      position: this.myLatLng,
      map: this.googleMap
    });

    var infowindow = new google.maps.InfoWindow({
      content: 'Marker Location:' + marker.getPosition()
    });

    infowindow.open(this.googleMap, marker);
  }

  addBicycleLayer() {
    var bikeLayer = new google.maps.BicyclingLayer();
    bikeLayer.setMap(this.googleMap);
  }

  setMapType(mapTypeId: string) {
    this.googleMap.setMapTypeId(mapTypeId)
  }


  setCenter(e: any) {
    e.preventDefault();
    this.googleMap.setCenter(new google.maps.LatLng(this.latitude, this.longitute));
  }
}

HTML component:

<div id="map" style="width:100%;height:600px" (click)="placeMarker($event)">
</div>

I don't know how to get to the map coordinations. These coords that are in placeMarker function are just client coords ( not integrated with Maps ) I found some https://angular-maps.com/ but it will be a large project and i don't want to rely on this. I will be grateful for any help :)

Cheers

Looking at the Google Maps JS API, shouldn't you be using event.latLng to get the coords in placeMarker(event) (developers.google.com/maps/documentation/javascript/3.exp/… )? — 5ar
– 5ar, Commented Jan 15, 2018 at 0:17
Tried, in easy-language, angular don't know what event.latLng is, it shows me an error in Firefox (event.latLng you are talking about is here : w3schools.com/graphics/… and i want to get same result — Ralph
– Ralph, Commented Jan 15, 2018 at 0:27
I can add marker from coords that i put myself in the code, but its hard to make it via click event and get it from the map — Ralph
– Ralph, Commented Jan 15, 2018 at 0:28
I'm not sure I follow, you're trying to get the coordinates form a click event, i.e. the event object, correct? If so, what error does Firefox show for event.latLng? If not can you please further explain what are you trying to do. — 5ar
– 5ar, Commented Jan 15, 2018 at 0:46
I want to get latitude and longitude from map to make a marker, from "click" event. ( I will click on the map, get coordinations of i.e New York street and make marker on the map ). After changing code to event.latLng ( see "position" in var marker)and clicking on the map i get this error : ibb.co/hsESGm — Ralph
– Ralph, Commented Jan 15, 2018 at 1:30

Ralph · Accepted Answer · 2018-01-15 02:56:40Z

After Jags help i found the answer! Here is complete and working code:

import { Component, OnInit } from '@angular/core';
import { ViewChild } from '@angular/core';
import { } from '@types/googlemaps';
import { map } from 'rxjs/operator/map';
import { Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-google-map',
  templateUrl: './google-map.component.html',
  styleUrls: ['./google-map.component.css']
})
export class GoogleMapComponent implements OnInit {
  constructor() { }

  markers: Array<Object>
  myLatLng = { lat: 53.131083, lng: 23.154742 };
  latitude: 53.131083;
  longitute: 23.154742;
  googleMap: google.maps.Map;

  ngOnInit() {
    var mapCanvas = document.getElementById("map");
    var myCenter = new google.maps.LatLng(53.131083, 23.154742);
    var mapOptions = {
      center: myCenter,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    this.googleMap = new google.maps.Map(mapCanvas, mapOptions);
    google.maps.event.addListener(this.googleMap, 'click', (event) => {
      this.placeMarker(event);
    });
  }

  placeMarker(event) {

    var marker = new google.maps.Marker({
      position: event.latLng,
      map: this.googleMap
    });
    console.log(event.latLng.lat() +" "+ event.latLng.lng());
  }

  addBicycleLayer() {
    var bikeLayer = new google.maps.BicyclingLayer();
    bikeLayer.setMap(this.googleMap);
  }

  setMapType(mapTypeId: string) {
    this.googleMap.setMapTypeId(mapTypeId)
  }


  setCenter(e: any) {
    e.preventDefault();
    this.googleMap.setCenter(new google.maps.LatLng(this.latitude, this.longitute));
  }
}

Here is a picture of working code :)

Jags · Accepted Answer · 2018-01-15 01:50:29Z

1

As per my comment, remove the (click)="placeMarker($event)" as it's not what you want to be doing.

Try logging this in the click event. It is likely not the context you are after. Instead you should use the fat arrow to pass the correct context to your function.

google.maps.event.addListener(this.googleMap, 'click', (event) => {
  this.placeMarker(event);
});

Now you should have the correct event in the placeMarker function. You should be able to call the latlng from the event

edited Jan 15, 2018 at 1:50

answered Jan 15, 2018 at 1:37

Jags

1,7811 gold badge18 silver badges30 bronze badges

12 Comments

Ralph Over a year ago

As you said i removed click event and changed addListener function, but now after clicking on the map nothing happens

Jags Over a year ago

change the listner object to this.googleMap I'll update my answer to reflect

Jags Over a year ago

Also your eventLatLng will fail now in the placeMarker event. This is because you are now getting a google event instead of the click event. You should be able to figure it out from here.

Ralph Over a year ago

I think that position: event.LatLng, should work but it says its undefined

Jags Over a year ago

what do you get if you console.log(event) ?

|

Collectives™ on Stack Overflow

Angular5 and Google Maps v3 Api - Getting coordinations from map "click" event

2 Answers 2

Comments

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related