<script. type="text/javascript">
//<![CDATA[
var points = [];
var markers = [];
var infoWindowHtml = [];
var sidebarHtml = "";
var redCircleIcon = new GIcon();
redCircleIcon.image = "RedCircle7x7.gif";
redCircleIcon.iconSize = new GSize(7, 7);
redCircleIcon.iconAnchor = new GPoint(3, 3);
redCircleIcon.infoWindowAnchor = new GPoint(3, 3);
function createBridgeMarker(ind, name, latitude, longitude) {
var marker;
points[ind] = new GLatLng(latitude, longitude);
marker = new GMarker(points[ind], redCircleIcon);
infoWindowHtml[ind] = "<a href=\" GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(infoWindowHtml[ind]);
});
markers[ind] = marker;
sidebarHtml += "<p><a href=\"javascript.:void(0)\" nclick=\"markerSelected(" + ind + ")\">" + name + "</a></p>";
return marker;
}
function markerSelected(ind) {
markers[ind].openInfoWindowHtml(infoWindowHtml[ind]);
}
function onLoad() {
// Creates a map and centers it on the Hot Metal Bridge in Pittsburgh.
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
map.setCenter(new GLatLng(40.6413,-74.1428), 11, G_NORMAL_MAP);
GDownloadUrl("Bridges.xml", function(data, responseCode) {
var xml = GXml.parse(data);
var bridges = xml.documentElement.getElementsByTagName("bridge");
for (var i = 0; i < bridges.length; i++) {
var name = bridges[i].getAttribute("name");
var latitude = parseFloat(bridges[i].getAttribute("latitude"));
var longitude = parseFloat(bridges[i].getAttribute("longitude"));
var marker = createBridgeMarker(i, name, latitude, longitude)
map.addOverlay(marker);
}
document.getElementById("sidebar").innerHTML = sidebarHtml;
});
}
}
//]]>
</script>