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

Another solution is to place a polygon over the map, same size as the map rectangle, and collect this rectangles clicks.

function initialize() {
  var mapDiv = document.getElementById('map-canvas');
  var map = new google.maps.Map(mapDiv, {
    center: new google.maps.LatLng(37.4419, -122.1419),
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  google.maps.event.addListener(map, 'bounds_changed', function() {
      var lat1 = 37.41463623043073;
      var lat2 = 37.46915383933881;
      var lng1 = -122.1848153442383;
      var lng2 = -122.09898465576174;  

      var rectangle = new google.maps.Polygon({
         paths : [
           new google.maps.LatLng(lat1, lng1),
           new google.maps.LatLng(lat2, lng1),
           new google.maps.LatLng(lat2, lng2),
           new google.maps.LatLng(lat1, lng2)
         ],
        strokeOpacity: 0,
        fillOpacity : 0,
        map : map
      });
      google.maps.event.addListener(rectangle, 'click', function(args) {  
         console.log('latlng', args.latLng);
    });
  });
}

Now you get LatLng's for places of interest (and their likes) also.

demo -> http://jsfiddle.net/qmhku4dh/

Answer 2

You should add the click listener on marker will give you the position of marker.

//Add listener
google.maps.event.addListener(marker, "click", function (event) {
    var latitude = event.latLng.lat();
    var longitude = event.latLng.lng();
    console.log( latitude + ', ' + longitude );
}); //end addListener

Edit: You need something like this

//Add listener
google.maps.event.addListener(marker, "click", function (event) {
    var latitude = event.latLng.lat();
    var longitude = event.latLng.lng();
    console.log( latitude + ', ' + longitude );

    radius = new google.maps.Circle({map: map,
        radius: 100,
        center: event.latLng,
        fillColor: '#777',
        fillOpacity: 0.1,
        strokeColor: '#AA0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        draggable: true,    // Dragable
        editable: true      // Resizable
    });

    // Center of map
    map.panTo(new google.maps.LatLng(latitude,longitude));

}); //end addListener

Answer 3

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!

Answer 4

You're talking about the Point of Interest icons that Google puts on the map.

Would it work for you to remove these icons entirely? You can do that with a Styled Map. To see what this would look like, open the Styled Map Wizard and navigate the map to the area you're interested in.

Click Point of interest under Feature type, and then click Labels under Element type. Finally, click Visibility under Stylers and click the Off radio button under that.

This should remove all of the point of interest icons without affecting the rest of the map styling. With those gone, clicks there will respond to your normal map click event listener.

The Map Style box on the right should show:

Feature type: poi
Element type: labels
Visibility: off

If the result looks like what you want, then click Show JSON at the bottom of the Map Style box. The resulting JSON should like this this:

[
  {
    "featureType": "poi",
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  }
]

You can use that JSON (really a JavaScript object literal) using code similar to the examples in the Styled Maps developer's guide. Also see the MapTypeStyle reference for a complete list of map styles.

Answer 5

This example demonstrates the use of click event listeners on POIs (points of interest). It listens for the click event on a POI icon and then uses the placeId from the event data with a directionsService.route request to calculate and display a route to the clicked place. It also uses the placeId to get more details of the place.

Read the google documentation.

<!DOCTYPE html>
<html>
  <head>
    <title>POI Click Events</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      .title {
        font-weight: bold;
      }
      #infowindow-content {
        display: none;
      }
      #map #infowindow-content {
        display: inline;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div id="infowindow-content">
      <img id="place-icon" src="" height="16" width="16">
      <span id="place-name"  class="title"></span><br>
      Place ID <span id="place-id"></span><br>
      <span id="place-address"></span>
    </div>
    <script>
      function initMap() {
        var origin = {lat: -33.871, lng: 151.197};

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 18,
          center: origin
        });
        var clickHandler = new ClickEventHandler(map, origin);
      }

      /**
       * @constructor
       */
      var ClickEventHandler = function(map, origin) {
        this.origin = origin;
        this.map = map;
        this.directionsService = new google.maps.DirectionsService;
        this.directionsDisplay = new google.maps.DirectionsRenderer;
        this.directionsDisplay.setMap(map);
        this.placesService = new google.maps.places.PlacesService(map);
        this.infowindow = new google.maps.InfoWindow;
        this.infowindowContent = document.getElementById('infowindow-content');
        this.infowindow.setContent(this.infowindowContent);

        // Listen for clicks on the map.
        this.map.addListener('click', this.handleClick.bind(this));
      };

      ClickEventHandler.prototype.handleClick = function(event) {
        console.log('You clicked on: ' + event.latLng);
        // If the event has a placeId, use it.
        if (event.placeId) {
          console.log('You clicked on place:' + event.placeId);

          // Calling e.stop() on the event prevents the default info window from
          // showing.
          // If you call stop here when there is no placeId you will prevent some
          // other map click event handlers from receiving the event.
          event.stop();
          this.calculateAndDisplayRoute(event.placeId);
          this.getPlaceInformation(event.placeId);
        }
      };

      ClickEventHandler.prototype.calculateAndDisplayRoute = function(placeId) {
        var me = this;
        this.directionsService.route({
          origin: this.origin,
          destination: {placeId: placeId},
          travelMode: 'WALKING'
        }, function(response, status) {
          if (status === 'OK') {
            me.directionsDisplay.setDirections(response);
          } else {
            window.alert('Directions request failed due to ' + status);
          }
        });
      };

      ClickEventHandler.prototype.getPlaceInformation = function(placeId) {
        var me = this;
        this.placesService.getDetails({placeId: placeId}, function(place, status) {
          if (status === 'OK') {
            me.infowindow.close();
            me.infowindow.setPosition(place.geometry.location);
            me.infowindowContent.children['place-icon'].src = place.icon;
            me.infowindowContent.children['place-name'].textContent = place.name;
            me.infowindowContent.children['place-id'].textContent = place.place_id;
            me.infowindowContent.children['place-address'].textContent =
                place.formatted_address;
            me.infowindow.open(me.map);
          }
        });
      };
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap"
        async defer></script>
  </body>
</html>