Google Maps API 3: Get Coordinates from Right-Click

Question

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.

Answer 1

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);
});

Answer 2

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>