Just another WordPress.com site

I would like to share with you a little piece of code that I find quite useful in my applications. I do create lots of guides that require a small utility to find out the latitude and longitude of a business location from a control panel in order to display the maps appropiately on the Web. Here I will do my best to explain a step procedure on how to do that -once you know the procedure, it is easy to create plugins or whatever you wish to do.

Step 1

 First of all, lets make a reference to the new version of Google Maps. Check that we have to specify a parameter sensor=false. To find out more about this parameter please follow this link.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">script>


Step 2



Now we are going to write the HTML tags on the BODY of our document that will hold the map and the controls that will hold latitude, longitude and zoom level references. Also, see the CSS that control the size of the map holder.


<style>
div#gmap {
width: 100%;
height: 300px;
}
style>
<body>
<center>
<div id="gmap">div>
lat:<span id="lat">span> lon:<span id="lon">span><br/>
zoom level: <span id="zoom_level">span>
center>
body>


Step 3

Now, we are going to write the function that will display the map when the document loads. The function, that we will call ‘initialize’ has different parts that we will describe now:

Part 1

Setting the map zoom level and its position in the world:

var myLatlng = new google.maps.LatLng(38.971154274048345,1.415863037109375); // IBIZA http://www.ramirezcobos.com/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley">
var myOptions = {
zoom: 16,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("gmap"), myOptions);

Part 2

Placing a marker on the map specifying its center position (please refer to above code for LatLon location).

// marker refers to a global variable
marker = new google.maps.Marker({
position: myLatlng,
map: map
});

Part 3

Now, the events that will take control of the marker center re-positioning and placing the information on the correspondent document objects (lat, lon, and zoom level).

// if center changed then update lat and lon document objects                          
google.maps.event.addListener(map, 'center_changed', function() {                      
var location = map.getCenter();                                                        
document.getElementById("lat").innerHTML = location.lat();                             
document.getElementById("lon").innerHTML = location.lng();                             
// call function to reposition marker location                                         
placeMarker(location);                                                                 
});                                                                                    
// if zoom changed, then update document object with new info                          
google.maps.event.addListener(map, 'zoom_changed', function() {                        
zoomLevel = map.getZoom();                                                             
document.getElementById("zoom_level").innerHTML = zoomLevel;                           
});                                                                                    
// double click on the marker changes zoom level                                       
google.maps.event.addListener(marker, 'dblclick', function() {                         
zoomLevel = map.getZoom()+1;                                                           
if (zoomLevel == 20) {                                                                 
zoomLevel = 10;                                                                        
}                                                                                      
document.getElementById("zoom_level").innerHTML = zoomLevel;                           
map.setZoom(zoomLevel);                                                                
});                                                                                    


Part 4

Initialize the document objects with default information

document.getElementById("zoom_level").innerHTML = 16;
document.getElementById("lat").innerHTML = 38.971154274048345;
document.getElementById("lon").innerHTML = 1.415863037109375;

Step 4

Finally, we have to write the function that will reposition the marker on ‘zoom_changed’ map event and call the ‘initialize’ function on window load event.

function placeMarker(location) {
var clickedLocation = new google.maps.LatLng(location);
marker.setPosition(location);
}
window.onload = function(){initialize()};
And that’s it, we have a great utility to plug onto our projects in order to find out the latitude and longitude of an address.





Finally! The Live Demo

body { margin: 0; padding: 0; font-family: “Gill sans”, sans-serif; background-color: #fff; color: #000; } div#bd { position: relative; } div#gmap { width: 100%; height: 500px; }

var map; var marker=false; function initialize() { var myLatlng = new google.maps.LatLng(38.909017951243754,1.4319777488708496); var myLatlng = new google.maps.LatLng(34.49648586452719,73.35619300603867); //for my home var myOptions = { zoom: 5, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById(“gmap”), myOptions); marker = new google.maps.Marker({ position: myLatlng, map: map }); google.maps.event.addListener(map, ‘center_changed’, function() { var location = map.getCenter(); document.getElementById(“lat”).innerHTML = location.lat(); document.getElementById(“lon”).innerHTML = location.lng(); placeMarker(location); }); google.maps.event.addListener(map, ‘zoom_changed’, function() { zoomLevel = map.getZoom(); document.getElementById(“zoom_level”).innerHTML = zoomLevel; }); google.maps.event.addListener(marker, ‘dblclick’, function() { zoomLevel = map.getZoom()+1; if (zoomLevel == 20) { zoomLevel = 10; } document.getElementById(“zoom_level”).innerHTML = zoomLevel; map.setZoom(zoomLevel); }); document.getElementById(“zoom_level”).innerHTML = 14; document.getElementById(“lat”).innerHTML = 38.909017951243754; document.getElementById(“lon”).innerHTML = 1.4319777488708496; } function placeMarker(location) { var clickedLocation = new google.maps.LatLng(location); marker.setPosition(location); } window.onload = function(){initialize();};

lat: lon:

zoom level:

All code in single File

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
    “http://www.w3.org/TR/html4/strict.dtd”&gt;
<html>
<head>
<title>Get Lat Lon Finder</title>
<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″>

<style type=”text/css”>
body {
    margin: 0;
    padding: 0;
    font-family: “Gill sans”, sans-serif;
    background-color: #fff;
    color: #000;
}
div#bd {
    position: relative;
}
div#gmap {
    width: 100%;
    height: 500px;
}
</style>
<script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=false”></script&gt;
<script type=”text/javascript”>
var map;
var marker=false;
function initialize() {
   
  var myLatlng = new google.maps.LatLng(38.909017951243754,1.4319777488708496);
  var myLatlng = new google.maps.LatLng(34.49648586452719,73.35619300603867); //for my home
 
  var myOptions = {
    zoom: 19,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
 
  map = new google.maps.Map(document.getElementById(“gmap”), myOptions);
 
  marker = new google.maps.Marker({
          position: myLatlng,
          map: map
      });
   
  google.maps.event.addListener(map, ‘center_changed’, function() {
      var location = map.getCenter();
    document.getElementById(“lat”).innerHTML = location.lat();
    document.getElementById(“lon”).innerHTML = location.lng();
    placeMarker(location);
  });
  google.maps.event.addListener(map, ‘zoom_changed’, function() {
      zoomLevel = map.getZoom();
    document.getElementById(“zoom_level”).innerHTML = zoomLevel;
  });
  google.maps.event.addListener(marker, ‘dblclick’, function() {
    zoomLevel = map.getZoom()+1;
    if (zoomLevel == 20) {
     zoomLevel = 10;
       }  
    document.getElementById(“zoom_level”).innerHTML = zoomLevel;
    map.setZoom(zoomLevel);
   
  });
 
  document.getElementById(“zoom_level”).innerHTML = 14;
  document.getElementById(“lat”).innerHTML = 38.909017951243754;
  document.getElementById(“lon”).innerHTML = 1.4319777488708496;
}
 
function placeMarker(location) {
  var clickedLocation = new google.maps.LatLng(location);
  marker.setPosition(location);
}
window.onload = function(){initialize();};

</script>
</head>
<body>
<center>
    <div id=”bd”>
        <div id=”gmap”></div>
        lat:<span id=”lat”></span> lon:<span id=”lon”></span><br/>
        zoom level: <span id=”zoom_level”></span>
    </div>
</center>
</body>
</html>

Special Thanx to for code conversion
http://qualitypointtech.net/encode/index.php
http://www.ramirezcobos.com/2010/01/22/get-latitude-and-longitude-with-google-maps-v3/

Advertisements

Comments on: "Get Latitude and Longitude with Google Maps V3" (9)

  1. Thanks for the original post mention (http://www.ramirezcobos.com/)

  2. real author should always be regarded…:)

  3. Hello. I am a google maps api v3 blogger. I came across your blog and would like to know how did you insert a live demo map here?My blog Spatial Unlimited @ http://shreerangpatwardhan.blogspot.com

  4. simply copy ur code in the post and you will be shown with the effect and to show the code Yous need to convert your html entities or you can use http://qualitypointtech.net/encode/index.php for encoding.

  5. thanx lottttttttt dude……

  6. I wasn't looking for this, I was jsut looking for a way to convert an address to long/lat – but I've just expanded my scope! Thanks a lot! 🙂

  7. Probably a stupid question but is it possible for you to print the resulting lat and lng into a form element in order for it to be passed to a database via a POST in Php.I have the above working but I cannot seem to get the variables into a form. Thanks in advance!

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: