Google Map with Tabbed Info Windows
Following is the code to produce a google map with tabbed info windows.
Note that you must set the input format to PHP in order for this to work.
<?php
drupal_set_html_head('
<script src="http://maps.google.com/maps?file=api&v=2&key=YOUR_KEY_HERE&sensor=false" type="text/javascript">
</script>
<script type="text/javascript">
//<![CDATA[
function initialize() {
if (GBrowserIsCompatible()) {
// A function to create a tabbed marker and set up the event window
function createTabbedMarker(point,html1,html2,label1,label2) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowTabsHtml([new GInfoWindowTab(label1,html1), new GInfoWindowTab(label2,html2)]);
});
return marker;
}
// Display the map, with some controls and set the initial location
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(43.907787,-79.359741), 9);
// Set up the tabbed markers
var point = new GLatLng(43.82589,-79.10040);
var marker = createTabbedMarker(point, "This is the contents of the first tab<br> of marker zero", "Another page<br> of marker zero contents", "Truth", "Beauty");
map.addOverlay(marker);
var point = new GLatLng(43.65654,-79.90138);
var marker = createTabbedMarker(point, "is the time for all good men<br>to come to the aid of the party", "a dangerous temptation comes to us<br>in gay, fine colours", "Now", "Many");
map.addOverlay(marker);
}
}
//]]>
</script>
<script type="text/javascript">
window.onload = function() {
initialize();
}
window.onunload = function() {
GUload();
}
</script>');
?>
<?php print ('<div align="center"><div id="map" style="width: 640px; height: 400px"></div></div>'); ?>