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:
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.
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.
You Are Here: Introducing Google Maps
Introducing the Google Maps API
Mashing Up Google Maps
On the Road with Google Maps
Google Maps in Words and Pictures
API Tips and Tricks
Extreme Google Maps Hacks