Solved

Google Maps API - show popup Lat Lon at mouse click

Posted on 2007-12-02
7
4,757 Views
Last Modified: 2010-01-30
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
Comment
Question by:Donelson
  • 4
  • 3
7 Comments
 
LVL 82

Accepted Solution

by:
hielo earned 500 total points
ID: 20398204
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
 

Author Comment

by:Donelson
ID: 20399411
Could you explain in english what this string proc does?

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

thanks.
0
 
LVL 82

Expert Comment

by:hielo
ID: 20399529
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
PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

 
LVL 82

Expert Comment

by:hielo
ID: 20399568
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
 

Author Comment

by:Donelson
ID: 20399570
Someone said there is a "point" function:

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

William


0
 
LVL 82

Expert Comment

by:hielo
ID: 20403580
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
 

Author Comment

by:Donelson
ID: 20404070
Excellent!

Much better. We both learned something !

Cheers
William


0

Featured Post

NAS Cloud Backup Strategies

This article explains backup scenarios when using network storage. We review the so-called “3-2-1 strategy” and summarize the methods you can use to send NAS data to the cloud

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
How to make a moving character 3 59
javascript comparing two dates 3 19
How to show span when clicked on? 10 24
JavaScript let vs var 5 27
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question