if (GBrowserIsCompatible()) {
var Icon = new GIcon(G_DEFAULT_ICON);
Icon.image = "blue-pushpin.png";
Icon.shadow = "pushpin_shadow.png";
var side_bar_html = "";
var gmarkers = [];
var htmls = [];
var i = 0;
// A function to create the marker and set up the event window
function createMarker(point,html,district,street,city,zip,tel,fax,email,url) {
var marker = new GMarker(point,Icon);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
// Switch icon on marker mouseover and mouseout
GEvent.addListener(marker, "mouseover", function() {
  marker.setImage("red-pushpin.png");
});
GEvent.addListener(marker, "mouseout", function() {
  marker.setImage("blue-pushpin.png");
});
gmarkers[i] = marker;
htmls[i] = html;
// add a line to the side_bar html, with click, mouseover and mouseout event handlers

i++;
return marker;
}
// This function picks up the click and opens the corresponding info window
function myclick(i) {
gmarkers[i].openInfoWindowHtml(htmls[i]);
}
// create the map
var map = new GMap2(document.getElementById("map2"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(38.445425818944486,-122.71238207817078),11);
// Read the data from example.xml
var request = GXmlHttp.create();
request.open("GET", "office/scripts/districts.xml", true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
var xmlDoc = GXml.parse(request.responseText);
// obtain the array of markers and loop through it
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new GLatLng(lat,lng);
var html = markers[i].getAttribute("html");
var dist = markers[i].getAttribute("district");
var street = markers[i].getAttribute("street");
var city = markers[i].getAttribute("city");
var zip = markers[i].getAttribute("zip");
var tel = markers[i].getAttribute("tel");
var fax = markers[i].getAttribute("fax");
var email = markers[i].getAttribute("email");
var url = markers[i].getAttribute("url");
var marker = createMarker(point,html);
map.addOverlay(marker);
}
// put the assembled side_bar_html contents into the side_bar div
}
}
request.send(null);
}
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}