Point & Click Geolocating on your own Google Map

There are many ways to find the latitude/longitude coordinates on a Google Map:

  • You can create a map at Google and pull the coordinates of the center point from the query string of the permalink.
  • You can right-click on the map at Google, go to “What’s Here” which creates a marker, then when you hover that marker, you’ll see the geographical coordinates.
  • You can use Google Earth, which shows the coordinates in the corner of the screen as you move the cursor around.

No matter how easy these various techniques might seem, getting the Latitude/Longitude of a larger number of map points can become quite tedious.

Let’s say you’re using Google Maps JavaScript API to create an embedded map for your website and you need to draw a line or polygon through a long series of map coordinates. Now what?

Easy fix. During map development, this chunk of JavaScript integrated into your own Google Map JavaScript will give you an info window containing the coordinates wherever you click.

google.maps.event.addListener(map, 'click', function (event) {
    new google.maps.InfoWindow({
        position: event.latLng,
        content: event.latLng.toString()
    }).open(map);
});

As long as your map object is named `map`, you’re all set. Of course, if you have a polygon on the map already, you may have trouble clicking on it. In that case, change `map` to the name of your polygon object and continue.

The info window will stay open until you close it which is handy for mapping out a line of coordinates… just cut & paste each lat/long into the JavaScript that makes your lines and polygons.

Once you’re done creating your custom Google map, simply remove this piece of code. (unless you want your website visitors to have access to this great feature too.)

Working DEMO: http://jsfiddle.net/X7vHG/

Leave a Reply

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