Get Latitude and Longitude with Google Maps V3

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>
<!-- MAP HOLDER -->
<div id="gmap"></div>
<!-- REFERENCES -->
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 :)
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.

DOWNLOAD

I have included the working version of this tutorial for you to download. If you make any changes on the code in order to improve/add more functionality to it (that is easy fellows), please share it here with us.

http://www.ramirezcobos.com/wp-content/plugins/downloads-manager/img/icons/default.gif download: Get Lat Lon Finder (1.41KB)
added: 22/01/2010
clicks: 5627

22 comments

  1. Husni   •  

    I think function placeMarker should be like this:

    1 function placeMarker(location) {
    2 var clickedLocation = new google.maps.LatLng(location);
    3 marker.setPosition(clickedLocation);
    4 }

  2. jishu   •  

    Thanks a lot

  3. Mike   •  

    This is what I’m looking for, thanks! :)

  4. kobsoft   •  

    I find this on google map api help. But not as good as your.

    Thank you :)

  5. Stanimir Genov   •  

    Thank you so much for this – you save people a lot of time!

  6. Pingback: essence hair

  7. SamC   •  

    I have a “signup” form already and would like to incorporate this into it so I can get the users location. I would like to pass the lat lon results with php code. How could this be done?

  8. Antonio Ramirez   •     Author

    If you wish to do that, then you need to code an event that on map click or through a marker mouse up, hidden fields are updated with lat-lng values that are after saved onto the database.

  9. Pingback: Can’t get value from form input textbox when using google map? | appsgoogleplus.com

  10. Enrique Ardavin   •  

    I can assign values ​​to a text box? I need to save the settings with PHP

  11. Fred   •  

    How would you set it to satellite view?

  12. Antonio Ramirez   •     Author

    Please check the mapType variables within its code (EGMap) is fully documented.

  13. nikul   •  

    thanx a lot dude………….

  14. Salman   •  

    Instead of hooking center_changed and zoom_changed events, you can simply assign an event handler for the idle event. It (i) takes care of both events (ii) is fired after the map has finished dragging/animating (center_changed event fires continuously while the map is being dragged). I’ve created a demo here, feel free to look at (and snag) the code:

    Latitude-Longitude Finder Tool

  15. anilravrani   •  

    thnaks your very much…sir this is very usefull for me i got good solution after long time.

  16. Atif   •  

    Bundle of thanks… This is what I was looking for….

  17. Atif   •  

    I would like to add a search bar in which if I put address & on enter map can take me to that particular location!

  18. Seriya   •  

    thanks

Add Comment Register



Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>