Google Map API V3 events mousedown, mousemove and mouseup

Question

I am trying to simulate a google earth desktop version for drawing on a google map. What I did was when I try to draw a path, I turned off the default drag event and added the mousedown event. After the mousedown event, the mousemove event is a trigger and works accordingly. When the mouse is a release event, it is trapped in the mouseup handler, where the mousemove handler is removed in the mouseup event listener. However, this does not work properly after the second mousedown and mouseup event.

My code is:

var map = 'Already created map object'; var polyOptions = { strokeColor: '#000000', strokeOpacity: 1.0, strokeWeight: 2, map: map, idx: 0 }; var mouseMoveHandler = null; google.maps.event.addListener(map, 'mousedown', function(e) { mouseMoveHandler = google.maps.event.addListener(map, 'mousemove', function(e) { // Create a new polyline instance if it does not exists if ("undefined" == typeof(GMap._poly[GMap._active_overlay])) { GMap._poly[GMap._active_overlay] = new google.maps.Polyline(polyOptions); } var path = GMap._poly[GMap._active_overlay].getPath(); path.push(e.latLng); }); // End of mousemove lister return false; }); google.maps.event.addListener(map, 'mouseup', function(e) { google.maps.event.removeListener(mouseMoveHandler); }); 

Answer 1

add this to polyOptions:

 clickable:false 

without this, the polygon will listen to mouse events, and the mouseup event will fire on the polygon, not on the map.

Answer 2

Tooltip example:

  google.maps.event.addListener(poly,"mousemove",function(e){ var _tooltipPolys = $("#tooltipPolys"); if(_tooltipPolys.length == 0) { _tooltipPolys = $(' \ <div id="tooltipPolys" class="tooltip top" role="tooltip"> \ <div class="tooltip-arrow"></div> \ <div class="tooltip-inner"></div> \ </div> \ '); $("body").append(_tooltipPolys); $("div.tooltip-inner", _tooltipPolys).text(this.title); _tooltipPolys.css({ "opacity": ".9", "position":"absolute" }); } var pageX = event.pageX; var pageY = event.pageY; if (pageX === undefined) { pageX = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; pageY = event.clientY + document.body.scrollTop + document.documentElement.scrollTop; }