• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 4794
  • Last Modified:

Google Maps API - show popup Lat Lon at mouse click

I would like to show a popup on a Google Map that I have generated, via the APIs provided by Google and accessed via Javascript code.

This popup should show the Latitude and Longitude of the mouse click location on the map.

How do I do this via Javascript and the Google Map APIs ?

Thanks
0
Donelson
Asked:
Donelson
  • 4
  • 3
1 Solution
 
hieloCommented:
Refer to:
http://code.google.com/apis/maps/documentation/events.html

Specifically, look at the "Using Passed Arguments in Events" example. A slightly modified version of it is included below. The example below will call "processClick" with the latitude and longitude values upon click.
Hope this helps.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example: Event Arguments</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"
            type="text/javascript"></script>
    <script type="text/javascript">
 
		
    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
 
        GEvent.addListener(map,"click", function(overlay,latlng) {     
          //var myHtml = "The GLatLng value is: " + map.fromLatLngToDivPixel(latlng) + " at zoom level " + map.getZoom();
          //map.openInfoWindow(latlng, myHtml);
		var coordinate = String(map.fromLatLngToDivPixel(latlng)).replace(/[\)\(]/g,"").split(", ");
		processClick( coordinate[0],coordinate[1] );
        });
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
      }
    }
 
function processClick(latitude,longitude)
{
	alert("Latitude: " +latitude + "; Longitude:"+longitude);
}
    </script>
  </head>
 
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 500px; height: 300px"></div>
  </body>
</html>

Open in new window

0
 
DonelsonAuthor Commented:
Could you explain in english what this string proc does?

(map.fromLatLngToDivPixel(latlng)).replace(/[\)\(]/g,"").split(", ");

thanks.
0
 
hieloCommented:
OK, sure. This part:
map.fromLatLngToDivPixel(latlng)

will return the latitude and longitude as a string, but formatted as follows:
(234, 312)

The replace part is removing the leading and trailing parentheses.
The split part "breaks" apart "234, 312" at the ", " returning an array.
Ultimately "var coordinate " ends up receiving an array of two elements. The first is the latitude and the other is the longitude.

Then I just called my "generic" function with the coordinates.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
hieloCommented:
Just so we are clear:
var coordinate = String(map.fromLatLngToDivPixel(latlng)).replace(/[\)\(]/g,"").split(", ");

could have been written as:

//get coordinates formatted as "(#, #)"
var coordinate = String(map.fromLatLngToDivPixel(latlng));

//remove leading and trailing parenthesis, leaving you with "#, #"
coordinate = coordinate.replace(/[\)\(]/g,"");

//break the string at the comma space. split returns its results in an array.
coordinate = coordinate.split(", ");

At this point: coordinate[0] contains the latitude; coordinate[1] contains the longitude.
0
 
DonelsonAuthor Commented:
Someone said there is a "point" function:

point.lat() --and-- point.lon()

William


0
 
hieloCommented:
Donelson, I did a research based on you last post and there is a HUGE difference between String(map.fromLatLngToDivPixel(latlng)), and the Point methods.

The first Computes the pixel coordinates of the given geographical point in the DOM element that holds the draggable map. Tthe latter are he actual "earth" geographic values. Assuming you are interested in the latter, the code would need to bechanged as follows:
 
       GEvent.addListener(map,"click", function(overlay,latlng) {    
     processClick( latlng.lat(),latlng.lng() );
        });
0
 
DonelsonAuthor Commented:
Excellent!

Much better. We both learned something !

Cheers
William


0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now