English: Wordmark of Google Maps

  • 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;
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
Get <span class=”hiddenSpellError” pre=”Get “>Lattitude</span> and Longitude onmouseover and onclick in Google Map v3 – Get lat lng on click google map version 3 – Programming – Google Maps
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”>
onmouseover and onmouseclick in google map version 3. Get lat lng onclick and onmouseover on google map version 3.” />
// <![CDATA[
” src=”http://maps.google.com/maps/api/js?sensor=false”&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;}
<body onload=”mapa()”>

0px auto;”>


mapdiv” style=”width:100%; height:500px;”>




Longitude: lngspan“>


Lat Lng:


Lat Lng on click:

<input type=”text” id=”latlongclicked” style=”width:300px; border:1px inset gray;”>
<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()


Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s