Get coordinates from Google Maps API 3 with rightclick event

Question

I have this simple maps code, but for some reason on the rightclick event the alert is not triggered. Could someone help spotting the problem and explaining it?

<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
  html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
  }
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
  mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);

google.maps.event.addListener(map, 'rightclick', function(event) {
var lat = event.latLng.lat();
var lng = event.latLng.lng();
alert("Lat=" + lat + "; Lng=" + lng);
});

</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>

Are you sure the `rightclick` event is handled properly? Try doing a `console.log` at appropriate places inside and outside your event handler to debug. — Vivek Pradhan, Oct 27 '14 at 05:06

score 2 · Accepted Answer · answered Oct 27 '14 at 06:53

You create map inside the function initialize, so you must add the listener also in initialize, otherwise map will be undefined at the moment when you try to add the listener.

<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
  mapOptions);
  google.maps.event.addListener(map, 'rightclick', function(event) {
var lat = event.latLng.lat();
var lng = event.latLng.lng();
alert("Lat=" + lat + "; Lng=" + lng);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

score 0 · Answer 2 · answered Oct 27 '14 at 10:44

Here is an example

<head>
  <style>
    html, body, #map-canvas {
      height: 400px;
      margin: 0px;
      padding: 0px
    }
    #display {
      width: 100%;
    }
  </style>
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?">
  </script>    
  <script>
    var map;
    var myLocation = {  // Belgium
      'latitude': 50.5,
      'longitude': 4.5
    };
    var myLatlng = new google.maps.LatLng(myLocation.latitude, myLocation.longitude);
    var mapOptions = {
      zoom: 8,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    function initialize() {
      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

      var displayElement = document.getElementById('display');
      // Add a right click event
      // @see http://stackoverflow.com/questions/7168394/google-map-v3-context-menu
      var contextMenu = google.maps.event.addListener(
        map,
        "rightclick",
        function( event ) {
          // just as an example, I write the data to the input
          displayElement.value = 
            'mouse: ' + event.pixel.x +','+  event.pixel.y +
            ' ||| coordinates: ' + event.latLng.lat() +','+ event.latLng.lng() ;
        }
      );
    }
    google.maps.event.addDomListener(window, 'load', initialize);
  </script>
</head>
<body>
  <input id="display">
  <div id="map-canvas"></div>
</body>

score -1 · Answer 3 · edited May 23 '17 at 12:23

-1

You need to define right click function.

/*
  1 = Left   mouse button
  2 = Centre mouse button
  3 = Right  mouse button
*/

$([selector]).mousedown(function(e) {
    if (e.which === 3) {
        /* Right mouse button was clicked! */
    }
});

See How to distinguish between left and right mouse click with jQuery

edited May 23 '17 at 12:23

Community

1
1

answered Oct 27 '14 at 05:48

UtkarshBhavsar

249
3
23

he has defined a rightclick-function(`rightclick` is a event implemented by the maps-API). Using jQuery (or anything else) wouldn't help here, because a DOMMouseEvent will not expose the LatLng. – Dr.Molle Oct 27 '14 at 07:04

Get coordinates from Google Maps API 3 with rightclick event

3 Answers3