Get mouse coordinates with mousemove on route

Question

On a normal google map, I can get and display the geographical coordinates of my mousepoint using the following code:

google.maps.event.addListener(map, "mousemove", function(event) {
  document.getElementById('message').innerHTML =
  'Geographical Coordinates: ' + event.latLng.lat() + ', ' + event.latLng.lng();
});

If I calculate a route using the google directions api and move the mouse over the displayed route, the "mousemove" event is not fired. How can I get the coordinates when the mousepointer is on the route?

I have a running example on jsfiddle. When you follow the route with your mouse, the coordinates don't update.

I made a small example at [jsfiddle.net](http://jsfiddle.net/BYBK8/1/) — gianclaudio, Sep 03 '12 at 15:22

score 1 · Answer 1 · answered Jul 05 '15 at 11:28

This is an example moving a tooltip of bootstrap at cursor position:

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

        // Update the current tooltip position each time the cursor moves
        _tooltipPolys.css({
            "top":(pageY - _tooltipPolys.height() - 10)+"px",
            "left":(pageX - (_tooltipPolys.width() / 2))+"px"
        });
    });

score 0 · Answer 2 · answered Sep 03 '12 at 17:10

0

The only way I know of to add a mouseover event to the route itself is to draw the polyline (so you can access it), then add a mouseover event to it.

Example

answered Sep 03 '12 at 17:10

geocodezip

158,664
13
220
245

I'm sorry, I didn't include the render option `draggable: true` in my example. With the option `suppressPolylines: true` the route will not get draggable. – gianclaudio Sep 03 '12 at 20:04
I don't think you will be able to get both the mouse coordinates on mouseover and draggable directions. – geocodezip Sep 03 '12 at 21:41

Get mouse coordinates with mousemove on route

2 Answers2