Hack 11. Where Did the User Click?

Find the location of a click on a map and display it on your web page.

Google Maps makes it easy to put an interactive map on your web page. At http://www.naffis.com/maphacks/latandlon.html you can click on a map and have the corresponding latitude and longitude displayed in a Google Maps info box.

In Figure 2-4 you can see the location of the Washington Monument.

Figure 2-4. The Washington Monument at 38.88941 N, 77.03517 W

This site solves the common problem of figuring out the coordinates of a location from a map view and is an example of the sort of quick hack that Google Maps has made possible. This page illustrates one way to get the latitude and longitude from a click on a map and display results in an info box. So how can you do it? At http://mappinghacks.com/projects/gmaps/click.html there is a simplified example of updating a form from the coordinates of a click on a map.

This is the Hello World map with three changes. An HTML form has been added to receive the latitude and longitude from the click event:

Latitude:   Longitude:  

In the script, the latitude and longitude used to set the initial map location with centerAndZoom( ) now comes from these form elements. This code defaults to starting at 38.4094 N, 122.8290 W. Change those values to change the initial focus of the map. The important change to the script is the addition of a GEvent.addListener. This code and the above form can be pasted into the body of your HTML page. Change the developer's key and you can capture clicks on a map:

This code adds a listener to the GMap object named map. If you click on the map, the code in the event handler will be run. The code is given both an overlay (a marker) and a point. If you click on a marker, the overlay will be set. If you don't click on a marker, then a GPoint object is given to the code.

These two lines are standard JavaScript. They ask the document for the value of the elements click_lat and click_long. The only elements with those names are the form elements. point.x and point.y are the longitude and latitude of the GPoint object that marks where you clicked.

document.getElementById('click_lat').value = point.y; document.getElementById('click_long').value = point.x;

The end result is shown in Figure 2-5.

Figure 2-5. The click is back

The next steps are to add markers to the map from the click, populate a map from an external data source, and update an external data source based on the map.