<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Mijn omgeving op de kaart</title>
<link rel="stylesheet" href="css/slimbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/slimbox.js"></script>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAOfchazHtZZ37S17QAZJnYhR8YNf7e9Sy3GXJ36ojijArf7NSHhQRVadDlax182XHXxxJAhV9QPeMZg&sensor=false" type="text/javascript"></script>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">_uacct = "UA-162157-1";urchinTracker();</script>
</head>
<body>
<div id="map" style="width: 550px; height: 450px"></div>
<div id="sidebar"></div>
<script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible()) {
// this variable will collect the html which will eventualkly be placed in the sidebar
var sidebar_html = "";
// arrays to hold copies of the markers and html used by the sidebar
// because the function closure trick doesnt work there
var gmarkers = [];
// ==================================================
// A function to create a tabbed marker and set up the event window
// This version accepts a variable number of tabs, passed in the arrays htmls[] and labels[]
function createTabbedMarker(point,label,tabs,icon) {
var marker = new GMarker(point,icon);
var marker_num = gmarkers.length;
marker.marker_num = marker_num;
marker.tabs = tabs;
gmarkers[marker_num] = marker;
GEvent.addListener(gmarkers[marker_num], "click", function() {
marker.openInfoWindowTabsHtml(gmarkers[marker_num].tabs);
});
// add a line to the sidebar html
sidebar_html += '<a href="javascript:myclick(' + marker_num + ')">' + label + '</a><br>';
return marker;
}
// ==================================================
// This function picks up the click and opens the corresponding info window
function myclick(i) {
GEvent.trigger(gmarkers[i], "click");
}
// create the map
// var map = new GMap2(document.getElementById("map"));
var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(47.614495, -122.341861), 13);
// Read the data from example.xml
var request = GXmlHttp.create();
var filename = "testxml.php";
request.open("GET", filename, true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
if ((request.status != 200) && (request.status != 304)) {
alert("file not found: "+filename);
return;
}
var xmlDoc = request.responseXML;
// obtain the array of markers and loop through it
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
// alert("processing "+markers.length+" markers");
for (var i = 0; i < markers.length; i++) {
// obtain the attributes of each marker
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var label = markers[i].getAttribute("label");
// alert("point["+i+"] label="+label+":("+lat+", "+lng+")");
if (isNaN(lat) || isNaN(lng)) {
alert("bad point "+i);
continue;
}
var point = new GLatLng(lat,lng);
// get the tab info
tabInfo = markers[i].getElementsByTagName("tab");
tabs = new Array();
if (tabInfo.length > 0) {
// alert("processing "+tabInfo.length+" tabs");
for (var j = 0; j < tabInfo.length; j++) {
var tabLabel = GXml.value(tabInfo[j].getElementsByTagName("label")[0]);
var tabHtml = GXml.value(tabInfo[j].getElementsByTagName("content")[0]);
// alert("point["+i+"] tab["+j+"] label="+tabLabel+", content="+tabHtml);
if ((j==0) && (tabInfo.length > 2)){ // adjust the width so that the info window is large enough for this many tabs
tabHtml = '<div style="width:'+tabInfo.length*88+'px">' + tabHtml + '</div>';
}
tabs.push(new GInfoWindowTab(tabLabel,tabHtml));
}
} else { alert("no tabs point "+i); }
// create the marker
var marker = createTabbedMarker(point,label,tabs);
map.addOverlay(marker);
}
// put the assembled sidebar_html content into the sidebar div
document.getElementById("sidebar").innerHTML = sidebar_html;
}
}
request.send(null);
}
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}
</script>
</body>
</html>
