John Peloquin's Blog

The GMarker, GEvent, GInfoWindow and related classes in the Google Maps API allow you to easily create markers on a map which are interactive and which provide valuable information to users. Often it is convenient to extend such interaction beyond the actual map itself, allowing other elements in the web application to alter markers on the map, retrieve and show information, and so on. In this tech note, I provide a simple example of this, demonstrating how to make simple HTML links trigger Google Maps markers and display information.

In the code that follows I use both the Google Maps API as well as the Yahoo! User Interface (YUI) API. The YUI API is only used to simplify HTML DOM event handling, and can be easily replaced with equivalent code from elsewhere.

Let’s take a look at the main JavaScript code first:

// some places
var places = [
	{
		name: 'San Francisco',
		lat: 37.798391,
		lon: -122.419968,
		link_id: 'maplink_sf'
	},
	{
		name: 'Berkeley',
		lat: 37.878918,
		lon: -122.270622,
		link_id: 'maplink_bky'
	},
	{
		name: 'Mill Valley',
		lat: 37.912378,
		lon: -122.548199,
		link_id: 'maplink_mv'
	}
];

if(GBrowserIsCompatible()) {
	// create map
	var map = new GMap2(document.getElementById(’map’),
				{ size: new GSize(500,300) });

	// initialize map
	map.setCenter(new GLatLng(places[0].lat, places[0].lon), 10);
	map.addControl(new GSmallMapControl());
	map.addControl(new GMapTypeControl());

	// mark places and set links
	var coords;
	var marker;
	for(var i = 0; i < places.length; i++) {
		// create and add marker
		coords = new GLatLng(places[i].lat, places[i].lon);
		marker = new GMarker(coords);
		marker.bindInfoWindowHtml(places[i].name);
		map.addOverlay(marker);

		if(places[i].link_id) {
			// set link
			set_map_link(places[i].link_id, map, marker);
		}
	}
}

This code first defines an array of places, each of which has a name, geographical coordinates, and a link identifier. The link identifier is just the ID of an HTML link (anchor) that exists in the HTML and will be used to trigger the map marker associated with the place.

The code then creates a Google Map, places markers on the map corresponding to each place, and for each marker calls a function set_map_link which configures an HTML link to be able to trigger the marker. This function can be implemented as follows (using the YUI API):

// function which makes a link trigger a map marker
function set_map_link(id, map, marker) {
	YAHOO.util.Event.addListener(id, 'click',
		function(e) {
			map.setCenter(marker.getPoint(), 12);
			GEvent.trigger(marker, 'click');
		}
	);
}

This code simply registers an event handler for the ‘click’ event on the specified HTML element (in our case, a link). The event handler centers the Google Map on the specified marker (adjusting the zoom a bit), and then triggers the ‘click’ event on the marker in order to open the info window associated with it.

The corresponding HTML code might look as follows:

<p>Check out these locations on the map:</p>
<ul>
	<li><a id="maplink_sf" href="#">San Francisco</a></li>
	<li><a id="maplink_bky" href="#">Berkeley</a></li>
	<li><a id="maplink_mv" href="#">Mill Valley</a></li>

</ul>

The end result is that, whenever any of these links is clicked, the appropriate marker is displayed on the Google Map, and the info window for that marker pops up. To see this code in action, click here.

Tags: google, google maps, links, map, maps, marker, markers, trigger, triggers

This entry was posted on Sunday, May 18th, 2008 at 4:51 pm and is filed under Tech Notes. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.