Home » Google, Javascript3 October 2017

Google Maps: Get Latitude/Longitude value on Click and on Mouse Move

This article shows how to get latitude and longitude value when you click or move the mouse over Google Map.

In previous article, we had seen how we can Display Google Map with Marker when we have latitude and longitude value.

Here, we will be using the same code to display the Google Map and then use Map’s event listener to get lat long on click or on mouse move.

If you are using double click event, then you can disable zoom on double click. By default, the map zooms when you double click on it. You can disable this by using the option disableDoubleClickZoom: true.

The example code below contains the following functions:

1) Google Map is displayed using a latitude and longitude value.
2) Whenever there is any click on the map, a div is updated with latitude and longitude value of the clicked position.
3) When the mouse is moved over the map, another div is updated with latitude and longitude value of the position where the mouse is.
4) A marker is displayed at the latitude longitude position.
5) Whenever there is double click on the map, a new marker is displayed in the map at the clicked position. And, when that new marker is clicked, the div is updated with latitude and longitude value of the clicked marker.

Here is the full source code:

Note that: At the bottom of the code there is a script src included. You need to put your API Key over there like this:
https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxxxxx&callback=initMap
You can get the API key from here: Get API Key

Hope this helps. Thanks.

Javascript

Get New Post by Email

Find me on

FacebookTwitterGoogle+LinkedInRSS Feed