Google Maps API 3: Get Coordinates from Right-Click

JavascriptGoogle MapsGoogle Maps-Api-3

Javascript Problem Overview


I have 2 text boxes for lat and lon for when a user is entering a new record to the db.

I have a live preview of Google Maps that works great, now what I want to do is add a right-click event on the map that populates the lat/lon text boxes with the coord clicked.

Is this even possible?

I know how to add the event listener, and looked through the API docs, but didn't see anything that does this. I know you can do it on google's map on their website.

Javascript Solutions


Solution 1 - Javascript

google.maps.event.addListener(map, "rightclick", function(event) {
    var lat = event.latLng.lat();
    var lng = event.latLng.lng();
    // populate yor box/field with lat, lng
    alert("Lat=" + lat + "; Lng=" + lng);
});

Solution 2 - Javascript

You can create an InfoWindow object (class documentation here) and attach to it a rightclick event handler that will populate it with latitude and longitude of the clicked location on the map.

function initMap() {
  var myOptions = {
      zoom: 6,
      center: new google.maps.LatLng(-33.8688, 151.2093)
    },
    map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
    marker = new google.maps.Marker({
      map: map,
    }),
    infowindow = new google.maps.InfoWindow;
  map.addListener('rightclick', function(e) {
    map.setCenter(e.latLng);
    marker.setPosition(e.latLng);
    infowindow.setContent("Latitude: " + e.latLng.lat() +
      "<br>" + "Longitude: " + e.latLng.lng());
    infowindow.open(map, marker);
  });
}

html,
body {
  height: 100%;
}
#map-canvas {
  height: 100%;
  width: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAIPPUQ0PSWMjTsgvIWRRcJv3LGfRzGmnA&callback=initMap" async defer></script>
<div id="map-canvas"></div>

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionguyfromflView Question on Stackoverflow
Solution 1 - JavascriptJiri KrizView Answer on Stackoverflow
Solution 2 - Javascriptuser2314737View Answer on Stackoverflow