Capture Coordinates in Google Map on User Click

Question

I\'m using this code to capture the co-ordinates when user clicks on the map by using below event listener:

google.map         


        

Answer 1

If you are using npm load-google-maps-api with webpack this worked for me:

  const loadGoogleMapApi = require("load-google-maps-api");
  loadGoogleMapApi({ key: process.env.GOOGLE_MAP_API_KEY }).then(map => {
    let mapCreated = new map.Map(mapElem, {
      center: { lat: lat, lng: long },
      zoom: 7
    });
    mapCreated.addListener('click', function(e) {
      console.log(e.latLng.lat()); // this gives you access to the latitude value of the click
       console.log(e.latLng.lng()); // gives you access to the latitude value of the click
      var marker = new map.Marker({
        position: e.latLng,
        map: mapCreated
      });
      mapCreated.panTo(e.latLng); // finally this adds red marker to the map on click.

    });
  });

Next if you are integrating openweatherMap in your app you can use the value of e.latLng.lat() and e.latLng.lng() which I console logged above in your api request. This way:

http://api.openweathermap.org/data/2.5/weather?lat=${e.latLng.lat()}&lon=${e.latLng.lng()}&APPID=${YOUR_API_KEY}

I hope this helps someone as it helped me. Cheers!