Archive for July 12th, 2007

Using AJAX To Update A Non-Map DIV Via Google Maps API’s GDownload() And GMarker OnClick Event

Recently asked on Yahoo! Answers:

Is it possible to have a google map invoke an Ajax request?

I basically need a google map to invoke a different Ajax request to load a part of a page outside the map when an item on the map is clicked…. is this possible? I know that the map itself uses Ajax when you scroll too far, to call in new imagery, but can I also modify the map to load/swap a different part of the page? I’m using ASP.NET pages too, btw.

The answer is “Yes,” thanks in large part to the Google Maps API’s built-in GDownload() class and the GMarker’s onclick event.

All we need to do is add an event listener that waits for our marker to be clicked, then call a function that will accept some unique ID for the marker, and cull the relevant information from some helper script. For this example, I’ll use PHP to pull a record from a MySQL database that gives details about the thing the marker is pointing out.

This discussion assumes you have basic familiarity with the Google Maps API, or that you can at least follow the documentation overview.

As always, you can download the source code for this example at the end of the discussion.

Read the rest of this entry »