Google Maps API v3 - Mousemove and Click Combo Event

Question

If I have a click event associated with my map and then I fire the mousemove event, the click event no longer works. I don’t think anyone knows about this? By the way, this is in version 3.4.

As a simple example:

var map; function initialize() { var myLatlng = new google.maps.LatLng(-34.397, 150.644); var myOptions = { zoom: 8, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var secondClick = false; var firstClick = false; var firstClickLatLng; var secondClickLatLng; var lines = []; google.maps.event.addListener(map, 'mousemove', function (event) { redrawLine(event); }); google.maps.event.addListener(map, 'click', function (event) { if (!firstClick && !secondClick) { firstClick = true; firstClickLatLng = event.latLng; } else if (firstClick && !secondClick) { secondClick = true; firstClick = false; // draw the polyline here secondClickLatLng = event.latLng; //google.maps.event.removeListener(listener); } else if (!firstClick && secondClick) { secondClick = false; // clear the polyline here alert("what"); //google.maps.event.removeListener(listener); } }); function redrawLine(event) { if (firstClickLatLng != null) { var lineCoords = [ firstClickLatLng, event.latLng ]; var line = new google.maps.Polyline({ path: lineCoords, strokeColor: "#FF0000", strokeOpacity: 1.0, strokeWeight: 2 }); // You need to clear the previous line, otherwise // it draws loads and loads of lines. I did this // in case it doesn't manage to clear the previous // one for some reason. for (var i = 0; i < lines.length; i++) { lines[i].setMap(null); } line.setMap(map); lines.push(line); } } } 

Thus, a line is drawn for whenever you move the mouse. The problem is that if I clicked a second time, the click event would not fire.

Ideas?

EDIT

This problem is related: http://www.mail-archive.com/ [e-mail] /msg15878.html

It clearly does not solve my problem, but others have tried and experienced this.

Answer 1

Sorted, as this link showed, you need to specify clickable: false

http://code.google.com/apis/maps/documentation/javascript/reference.html#PolylineOptions

Answer 2

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