Google Map V3 – Get Langitude and Latitude on mouseover

  • First an object representing google map properties is created with zoom level, map center and map type.
  • Then a map object is created. It takes two parameters. One is the div where the map should be displayed and the other is the object which contains various properties to initialize the google map.
  • With the above to lies the map can be displayed.
  • Next are the two event handlers which will display the lattitude and longitude when the move is moved over the google map or when the mouse is clicked on the map.
  • The event listener needs three parameters first is the map object, next is the event like onmousemove or onclick and the third parameter is the callback function to which the coordinates are passed as a parameter.
  • Each time the event handlers (callback functions) are called i am updating the lattitude and longitude.

That is all folks. Enjoy.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Get Lattitude and Longitude onmouseover and onclick in Google Map v3 – Get lat lng on click google map version 3 – Programming – Google Maps</title>
<meta name=”keywords” content=”get lattitude longitude, latlng onclick google map, latlng onmousemove google map, get lattitude longitude onclick, google map mouse event, show lattitude longutude onmousemove, show latlng onclick”>
<meta name=”description” content=”Get lattitude and longitude when onmouseover and onmouseclick in google map version 3. Get lat lng onclick and onmouseover on google map version 3.” />
<script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=false”></script>
<style type=”text/css”>
body {font:10pt arial; }
.main { text-align:center; font:12pt Arial; width:100%; height:auto; }
.eventtext {width:100%; margin-top:20px; font:10pt Arial; text-align:left; line-height:25px; background-color:#EDF4F8;
padding:5px; border:1px dashed #C2DAE7;}
#mapa {width:100%; height:340px; border:5px solid #DEEBF2;}
ul {font:10pt arial; margin-left:0px; padding:5px;}
li {margin-left:0px; padding:5px; list-style-type:decimal;}
.code {border:1px dashed #cecece; background-color:#F7F7F7; padding:5px;}
.small {font:9pt arial; color:gray; padding:2px; }
.jimi { margin:0px;}
</style>
</head>
<body onload=”mapa()”>
<div class=”main”>

<div style=”width:70%;  margin:0px auto;”>
<div id=”mapdiv” style=”width:100%; height:500px;”></div>
<div class=”eventtext”>
<div>Lattitude: <span id=”latspan”></span></div>
<div>Longitude: <span id=”lngspan”></span></div>
<div>Lat Lng: <span id=”latlong”></span></div>
<div>Lat Lng on click:
  <input type=”text” id=”latlongclicked” style=”width:300px; border:1px inset gray;”></span></div>
</div>
</div>
</div>
<script type=”text/javascript”>
var map;
function mapa()
{
//var opts = {‘center': new google.maps.LatLng(26.12295, -80.17122), ‘zoom':11, ‘mapTypeId': google.maps.MapTypeId.ROADMAP }
var opts = {‘center': new google.maps.LatLng(34.54140959793796, 73.36364895561223), ‘zoom':6, ‘mapTypeId': google.maps.MapTypeId.ROADMAP }
map = new google.maps.Map(document.getElementById(‘mapdiv’),opts);
google.maps.event.addListener(map,’click’,function(event) {
document.getElementById(‘latlongclicked’).value = event.latLng.lat() + ‘, ‘ + event.latLng.lng()
})
google.maps.event.addListener(map,’mousemove’,function(event) {
document.getElementById(‘latspan’).innerHTML = event.latLng.lat()
document.getElementById(‘lngspan’).innerHTML = event.latLng.lng()
document.getElementById(‘latlong’).innerHTML = event.latLng.lat() + ‘, ‘ + event.latLng.lng()
});
}
</script>
</body>
</html>

live demo check here http://www.ecarobar.com/google/