Google Maps API V3 determine which button is pressed in maps mousedown event listener

Question

I have an event listener for mousedown. The event fires the same result on left and right button press. How do I determine which mouse button has been pressed ?

google.maps.event.addListener(map, 'mousedown', function (e) {
  console.log(e);
}

The event (e) returns Dm Class object and has only the properties: Z, latLng, pixel. It also returns prototype function stop().

Answer 1

Go right to its object. BUT google for a reason I dont know change the object var name (xa,ta,ha...), so get it by its position is much more safe and will prevent you from having to change it from time to time. This works for me:

google.maps.event.addListener(map, 'mousedown', function (e) {
  console.log('Button: ' + Object.value(e)[1].which);
}

Console:

Button: 1

Answer 2

After much of head banging, I think I have a workaround for this solution. Any better ideas and suggestions would be very much appreciated.

I was trying to mimic the Google Earth's creating path feature in Google Maps. Here is my experimental code:

function PolylineMarker(bounds, image, map) {
  // Now initialize all properties.
  this.bounds_ = bounds;
  this.image_ = image;
  this.map_ = map;

  // We define a property to hold the image's
  // div. We'll actually create this div
  // upon receipt of the add() method so we'll
  // leave it null for now.
  this.div_ = null;

  // Explicitly call setMap() on this overlay
  this.setMap(map);
  }

  PolylineMarker.prototype = new google.maps.OverlayView();

  PolylineMarker.prototype.onAdd = function() {

  // Note: an overlay's receipt of onAdd() indicates that
  // the map's panes are now available for attaching
  // the overlay to the map via the DOM.

  // Create the DIV and set some basic attributes.
  var div = document.createElement('div');
  div.style.border = "none";
  div.style.borderWidth = "0px";
  div.style.position = "absolute";

  // Create an IMG element and attach it to the DIV.
  //    var img = document.createElement("img");
  //    img.src = this.image_;
  //    img.style.width = "100%";
  //    img.style.height = "100%";
  //    div.appendChild(img);

  // Set the overlay's div_ property to this DIV
  this.div_ = div;

  // We add an overlay to a map via one of the map's panes.
  // We'll add this overlay to the overlayImage pane.
  var panes = this.getPanes();
  panes.overlayLayer.appendChild(div);
  }

  PolylineMarker.prototype.draw = function() {

  // Size and position the overlay. We use a southwest and northeast
  // position of the overlay to peg it to the correct position and size.
  // We need to retrieve the projection from this overlay to do this.
  var overlayProjection = this.getProjection();

  // Retrieve the southwest and northeast coordinates of this overlay
  // in latlngs and convert them to pixels coordinates.
  // We'll use these coordinates to resize the DIV.
  var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
  var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());

  // Resize the image's DIV to fit the indicated dimensions.
  var div = this.div_;
  div.style.left = (sw.x - 3 ) + 'px';
  div.style.top = (ne.y - 3 ) + 'px';
  div.style.width = (ne.x - sw.x + 6) + 'px';
  div.style.height = (sw.y - ne.y + 6) + 'px';
  div.style.background = 'red';
  div.style.margin = '0 auto';
}

PolylineMarker.prototype.onRemove = function() {
  this.div_.parentNode.removeChild(this.div_);
  this.div_ = null;
}

// Note that the visibility property must be a string enclosed in quotes
PolylineMarker.prototype.hide = function() {
  if (this.div_) {
      this.div_.style.visibility = "hidden";
  }
}

PolylineMarker.prototype.show = function() {
  if (this.div_) {
      this.div_.style.visibility = "visible";
  }
}

PolylineMarker.prototype.toggle = function() {
  if (this.div_) {
      if (this.div_.style.visibility == "hidden") {
      this.show();
      } else {
      this.hide();
      }
  }
}

PolylineMarker.prototype.toggleDOM = function() {
  if (this.getMap()) {
      this.setMap(null);
  } else {
      this.setMap(this.map_);
  }
}

function initialize() {
  var map = new google.maps.Map(document.getElementById("map-canvas"), {
      zoom: 15,
      center: new google.maps.LatLng(27.703744, 85.333729),
      mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var polyOptions = {
      strokeColor: '#000000',
      strokeOpacity: 1.0,
      strokeWeight: 1,
      map: map,
      clickable: false,
      icons: [{
          'icon': {
          path: google.maps.SymbolPath.FORWARD_OPEN_ARROW,
          strokeOpacity: 0.8,
          strokeWeight: 2,
          strokeColor: '#000'
          },
          'offset': '100%',
          'repeat': '100px'
      }]

  };

  var polyline = null;
  var mouseMoveHandler = null;
  var button = ''; 
  var isMouseReleased = false;
  google.maps.event.addDomListener(document.getElementById("map-canvas"), 'mousedown', function(e) {
      button = e.button;
      isMouseReleased = false;

      return false;
  });
  var mouseDownHandler = google.maps.event.addListener(map, 'mousedown', function (e) {
      map.setOptions({
      'draggable': false
      });
      if (!polyline) {
      polyline = new google.maps.Polyline(polyOptions);
      }
      isMouseReleased = false;
      setTimeout(function() {
      if (! isMouseReleased) {
          mouseMoveHandler = google.maps.event.addListener(map, 'mousemove', function (e) {
          if (button == 0) {
              var path = polyline.getPath();
              /**
              * Add new overlay
              */
              var image = '';
              var bounds = new google.maps.LatLngBounds(e.latLng, e.latLng);
              var overlay = new PolylineMarker(bounds, image, map);

              path.push(e.latLng);
          }
          e.stop();
          });
      }

      }, 100);                        
      e.stop();
  });

  google.maps.event.addListener(map, 'mouseup', function (e) {
      isMouseReleased = true;
      google.maps.event.clearListeners(map, 'mousemove');
      google.maps.event.removeListener(mouseMoveHandler);

      if (button == 0) {
      polyline.getPath().push(e.latLng);

      /**
      * Add new overlay
      */
      var image = '';
      var bounds = new google.maps.LatLngBounds(e.latLng, e.latLng);
      var overlay = new PolylineMarker(bounds, image, map);

      map.setOptions({
          'draggable': true
      });
      }

      e.stop();
  });

} // end of initialize function

google.maps.event.addDomListener(window, 'load', initialize);

Here is my demo : http://jsfiddle.net/himal/C6jMU/2/

Answer 3

which is a property of the event object, which most people label as e in their event handlers. It contains the key code of the key which was pressed to trigger the event.

As per your code add which to it.

google.maps.event.addListener(map, 'mousedown', function (e) {
  console.log(e.which);
}

Check console:

left Click: 1
middle button click: 2
right click: 3

After checking Google docs, instead of getting the mouse keyCodes you can directly use their mouse event.