How to find the right point in Google Maps (longitude and latitude)
Have you ever used the Google Maps API and found out that you don't really know the right position where to place the markers? As you know, to do so requires entering in javascript the exact marker's coordinates, so you go in a trial-and-error loop to try to correct the numbers until you find the right spot, browse for various so called google maps builders hoping that one of them actually gives you the coordinates you need to nail the right place, or modify your code so that outputs in some way the coordinates, find the marker's position, jot it down, then restore the old script and add the numbers.
During this phase the client calls saying the marker isn't in the right place, it's "more to the sea", or "a bit more to the left". You also have the problem that modifying the javascript code makes the map go into the debug mode (outputting coordinates) as long as the right numbers have been found out, even web site readers see them.
Solve the problem one time for all by adding this few lines to your javascript code that uses the Google Maps API (I assume the google map object name is "map", change as needed):
if (document.location.href.indexOf('mapsdebug') != -1) {
var markerdebug = new GMarker(map.getCenter()),{draggable:true});
GEvent.addListener(markerdebug, "dragend", function() {
markerdebug.openInfoWindowHtml(markerdebug.getPoint().toString()
)
});
map.addOverlay(markerdebug);
}
This tells the browser that if the URL contains #mapsdebug a new draggable marker appears at the center of the map, that when dropped on a new location outputs in a balloon the point coordinates.
This way you or your client can simply find the marker's coordinates by adding a snippet to the URL.
Here there is a live example in standard and in debug mode.
Imagine the problem: You approximatively (maybe unintentionally) place a marker in the wrong position, then phone or email the client and say to add #mapsdebug to the map URL, drag the new marker and tell you the numbers.
You place the right coordinates in the javascript and the pinpoint appears into the right position.
Pros of this technique:
- As you reuse the code, you carry the debug section with you
- The website readers doesn't see the map in "debug mode"
- The website owner can easily correct the position with a simple drag and drop procedure
- It's fun
Cons:
- The google maps code gets longer by a hundred bytes, not very much but you could want to strip out the code when the website finishes building
- The website owner still has to correct the position by sending via email the new coordinates. Yes, I could have posted the position via an AJAX call, but the code would get cumbersome and/or more library dependant.
- You can't use anymore the word "mapsdebug" when calling the page because it triggers the debug section, but if you want so, simply change the secret token as you wish.
There's an alternate technique suggested on a lifehacker (indeed a tech recipes one but this has a screen shot!): Go to the Google Maps website, then center the view on the place you wish to know the latitude and longitude data, then paste this code into the browser bar:
javascript:void(prompt('',gApplication.getMap().getCenter()));
I prefer mine because it's more accurate and easily to explain to the website owner if he wants to pinpoint the address himself.
Happy mapping!
July 4th, 2007 - 10:03
The zoom in/out directions are the opposite of Google maps. I found this confusing. Is it because you are in Italia?
July 4th, 2007 - 14:05
You mean in the live example? Because in the article I don’t mention the zoom feature. The notation for zooming here in Italy is not different from the international standard. There’s even the lucky (for me!) event that you found an error in the live example! Did you experience inverted zooming on the live example? Where you using the scroller of the mouse or the controls on screen? If you’re using the scroller, what mouse do you have? What is your browser?
August 2nd, 2007 - 11:33
My map object is called ‘map’, I’ve added the code above to the external javascript code used to construct the map, but the map fails to load. Confusing.
http://www.hillarysboatshop.com.au/skins/default/en/google_maps.js
http://www.hillarysboatshop.com.au/cart.php?mode=map
August 3rd, 2007 - 02:26
Checked out your website, but the code is commented out so I can’t check with Firebug where the problem is!
I suppose the map fails to load even if you don’t use it in debug mode, so it could be a simple syntax error somewhere.
Could you try uncomment it (or create another page with the code uncommented) so we can try to debug it?
It would be very interesting, indeed.
August 3rd, 2007 - 02:30
try changing
var markerdebug = new GMarker(map.getCenter()),{draggable:true});
into
markerdebug = new GMarker(map.getCenter(),{draggable:true});
August 6th, 2007 - 21:00
that worked perfectly Giancarlo, thanks!
November 21st, 2007 - 14:18
I was googling for this kind of solution and found this post. The situation with the client on the phone explaining me where to put the marker is exactly what I am trying to avoid
Thank you very much for the code!
December 28th, 2007 - 17:10
Hi Giancarlo,
Liked the idea in your blog post:
“How to find the right point in Google Maps
(longitude and latitude)”.
My question:
- where exactly do you place your short Javascript code,
in a standard page with a Google Map?
(can you give a simple example?).
I tried looking at the source code of your demo page,
but could not find your JS code anywhere, (needed to perform “the magic”).
Grazie!!
Ray SF
December 28th, 2007 - 18:17
Hi Ray,
try to place the code after the initialization script, to clarify that I call a function named google_buildmap() located in
/lib/google_maps/js/google_maps.js
from the main init function.
February 16th, 2009 - 06:39
how do i trace the position in google map by using address, city,state and country not by using the latitude and longitude?
February 17th, 2009 - 15:55
Tha is called
“Geocoding”. There are two methods to retrieve this sort of data: Javascript and HTTP. If you need to populate a table with geographic coordinates, use the HTTP method. Go on with Javascript if your queries should be done in realtime, on the page.
Example of Javascript geocoding:
var geocoder = new GClientGeocoder();Geocoder.getLatLng(address, function(point) {
if (!point) {
alert(address + " not found");
} else {
// a new point object with the coordinates has been set
}
};
Example of geocoding via HTTP is a JSON call to google with parameters sent with GET method. Try following this link.
Further informations can be found on the Google geocoding API page
March 25th, 2009 - 15:28
Hello, nice method! I would actually like to retrieve coordinates and use it in other script and I can not do it from the “bubble”. Do you know how for example construct URL that contains in parameters new coordinates of dragged marker?
March 25th, 2009 - 15:29
Hello, nice method! I would like to retrieve coordinates and use it in other script and I can not do it from the “bubble”. Do you know how for example construct URL that contains in parameters new coordinates of dragged marker?