Just another WordPress.com site

  • 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”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<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&gt;
<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/

Advertisements

Comments on: "Google Map V3 – Get Langitude and Latitude on mouseover" (1)

  1. Thanks!!! 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: