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


i have event listener mousedown. event fires same result on left , right button press. how determine mouse button has been pressed ?

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

the event (e) returns dm class object , has properties: z, latlng, pixel. returns prototype function stop().

after of head banging, think have workaround solution. better ideas , suggestions appreciated.

i trying mimic google earth's creating path feature in google maps. here experimental code:

function polylinemarker(bounds, image, map) {   // initialize properties.   this.bounds_ = bounds;   this.image_ = image;   this.map_ = map;    // define property hold image's   // div. we'll create div   // upon receipt of add() method we'll   // leave null now.   this.div_ = null;    // explicitly call setmap() on overlay   this.setmap(map);   }    polylinemarker.prototype = new google.maps.overlayview();    polylinemarker.prototype.onadd = function() {    // note: overlay's receipt of onadd() indicates   // map's panes available attaching   // overlay map via dom.    // create div , set basic attributes.   var div = document.createelement('div');   div.style.border = "none";   div.style.borderwidth = "0px";   div.style.position = "absolute";    // create img element , attach div.   //    var img = document.createelement("img");   //    img.src = this.image_;   //    img.style.width = "100%";   //    img.style.height = "100%";   //    div.appendchild(img);    // set overlay's div_ property div   this.div_ = div;    // add overlay map via 1 of map's panes.   // we'll add overlay overlayimage pane.   var panes = this.getpanes();   panes.overlaylayer.appendchild(div);   }    polylinemarker.prototype.draw = function() {    // size , position overlay. use southwest , northeast   // position of overlay peg correct position , size.   // need retrieve projection overlay this.   var overlayprojection = this.getprojection();    // retrieve southwest , northeast coordinates of overlay   // in latlngs , convert them pixels coordinates.   // we'll use these coordinates resize div.   var sw = overlayprojection.fromlatlngtodivpixel(this.bounds_.getsouthwest());   var ne = overlayprojection.fromlatlngtodivpixel(this.bounds_.getnortheast());    // resize image's div fit 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 visibility property must 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 demo : http://jsfiddle.net/himal/c6jmu/2/


Comments

Popular posts from this blog

javascript - Count length of each class -

What design pattern is this code in Javascript? -

hadoop - Restrict secondarynamenode to be installed and run on any other node in the cluster -