Retrieve Coordinates from Google Maps on Click

Technical Level: Beginner

Problem: Retrieve the coordinates from a click event on html/javascript google maps.

Required Tools:

Solution:Very simple solution, a Google map click event passes the coordinate as a parameter. I Use JQuery in my implementation of this map because I intend to make AJAX calls. If you are not familiar with JQuery, then the following codes can be substituted in the as follows:

$("#SomeIDOfATextBox").val("Some value");
//Can be replaced by:
document.getElementById('SomeIDOfATextBox').value = "Some value";

Below is the javascript used to setup the map and grab the coordinates:

var map;
function initialize() {

   if (GBrowserIsCompatible()) //a check to make sure the browser is compatible for GEmaps.
   {
     map = new GMap2(document.getElementById("map_canvas")); //assign the div to map var
     map.setCenter(new GLatLng(18, -77.4), 13); //centering the location
     map.setUIToDefault(); //setting the default location to the center.

    //The GE event for clicking the map.
    GEvent.addListener(map, 'click', function(overlay, point) {
    map.clearOverlays(); //clearing the previous marker
    var lati = point.lat(); //Function to extract latitude
    var longi = point.lng(); //Function to extract longitude
    var marker = new GMarker(new GLatLng(lati, longi), { draggable: false }); //Setting the marker to clicked location
    map.addOverlay(marker); //adding the marker to the map
    //JQuery function to assign the lat and long to the values of textboxes.
    $('#LatTxt').val(lati);
    $('#LonTxt').val(longi);
   });
}

//This JQuery Function operates almost the same as the onload function, except more earlier
$(function() {
   initialize();//call to initialize the map.
}
<div id="map_canvas" style="width: 600px; height: 400px;">
 </div>
<label>
 Latitude
 <input id="LatTxt" disabled="disabled" type="text" />
</label>
<label>
 Longitude
 <input id="LonTxt" disabled="disabled" type="text" />
</label>

Below is a screenshot of my extended version (I’ll show how to get Geo-coded locations in a next post):

PS. Google Geo-Code service sucks for Jamaica. I’m now seeking alternative data sets.

Advertisements
This entry was posted in Javascript, Uncategorized and tagged . Bookmark the permalink.

2 Responses to Retrieve Coordinates from Google Maps on Click

  1. ravi says:

    can u post the full working code..

  2. That is a very cool code .
    I was actually looking for a simple explanation on how to get the coordinated with jQuery.
    In the spirit of the previous comment , it would be great if you will post demo , and I will be waiting for the Geo-coded locations implementation !
    Thanks again !! (and your comment form is cool too 🙂 )

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