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!