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

Facebook Tweet LinkedIn Pin Print EmailShares

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


<html>
	<head>
		<title>Google Map</title>
		<meta name="viewport" content="initial-scale=1.0">
		<meta charset="utf-8">
		<style>		  
		  #map { 
			height: 300px;	
			width: 600px;			
		  }		  
		</style>		
	</head>	
	<body>
		<div id="latclicked"></div>
		<div id="longclicked"></div>
		
		<div id="latmoved"></div>
		<div id="longmoved"></div>
		
		<div style="padding:10px">
			<div id="map"></div>
		</div>
		
		<script type="text/javascript">
		var map;
		
		function initMap() {							
			var latitude = 27.7172453; // YOUR LATITUDE VALUE
			var longitude = 85.3239605; // YOUR LONGITUDE VALUE
			
			var myLatLng = {lat: latitude, lng: longitude};
			
			map = new google.maps.Map(document.getElementById('map'), {
			  center: myLatLng,
			  zoom: 14,
			  disableDoubleClickZoom: true, // disable the default map zoom on double click
			});
			
			// Update lat/long value of div when anywhere in the map is clicked	
			google.maps.event.addListener(map,'click',function(event) {				
                document.getElementById('latclicked').innerHTML = event.latLng.lat();
                document.getElementById('longclicked').innerHTML =  event.latLng.lng();
            });
            
            // Update lat/long value of div when you move the mouse over the map
            google.maps.event.addListener(map,'mousemove',function(event) {
                document.getElementById('latmoved').innerHTML = event.latLng.lat();
                document.getElementById('longmoved').innerHTML = event.latLng.lng();
            });
					
			var marker = new google.maps.Marker({
			  position: myLatLng,
			  map: map,
			  //title: 'Hello World'
			  
			  // setting latitude & longitude as title of the marker
			  // title is shown when you hover over the marker
			  title: latitude + ', ' + longitude 
			});	
			
			// Update lat/long value of div when the marker is clicked
			marker.addListener('click', function(event) {			  
			  document.getElementById('latclicked').innerHTML = event.latLng.lat();
              document.getElementById('longclicked').innerHTML =  event.latLng.lng();
			});
			
			// Create new marker on double click event on the map
			google.maps.event.addListener(map,'dblclick',function(event) {
                var marker = new google.maps.Marker({
				  position: event.latLng, 
				  map: map, 
				  title: event.latLng.lat()+', '+event.latLng.lng()
				});
				
				// Update lat/long value of div when the marker is clicked
				marker.addListener('click', function() {
				  document.getElementById('latclicked').innerHTML = event.latLng.lat();
				  document.getElementById('longclicked').innerHTML =  event.latLng.lng();
				});            
            });
            
            // Create new marker on single click event on the map
			/*google.maps.event.addListener(map,'click',function(event) {
                var marker = new google.maps.Marker({
				  position: event.latLng, 
				  map: map, 
				  title: event.latLng.lat()+', '+event.latLng.lng()
				});                
            });*/
		}
		</script>
		<script src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY&callback=initMap"
		async defer></script>
	</body>	
</html>

Hope this helps. Thanks.

Share this:

Related posts: