-2

I am using the following snippet for displaying the cursor position (latitude & longitude) on the map, but I am not able to see the tooltip when I move my mouse cursor over map. But when I check the javascript console the latitude and longitude based on the position of the mouse cursor movement is displayed as you can see in the screenshot below. 

google.maps.event.addListener(that.map, 'mousemove', function(event) {
    displayCoordinates(event.latLng);
});

function displayCoordinates(pnt) {

    var lat = pnt.lat();
    lat = lat.toFixed(4);
    var lng = pnt.lng();
    lng = lng.toFixed(4);

    console.log("Latitude: " + lat + "  Longitude: " + lng);
}

I have used console.log to display the coordinates which indicates that the snippet is correct. Is there any way to use an infowindow or some work around with which I can see the coordinates on the map itself?

enter image description here

MrUpsidown
  • 21,592
  • 15
  • 77
  • 131
sandeep
  • 1
  • 3

1 Answers1

1

There isn't a built in tooltip feature in Google Maps. Your answer is close but you require some knowledge of jQuery to achieve this; it's nothing special in Google Maps.

I built a working one at https://jsbin.com/gumuvu/1/edit?html,css,js,output to illustrate the main points to you.

You need to create a div that the coordinates will be displayed in, then capture the mouse location of the user every time the mouse moves on the page.

After the mousemoves on the Google Maps, instead of logging to the console, your event will now fill that div with the coordinates using css() and text().

tempranova
  • 929
  • 9
  • 13