// JavaScript Document

document.write("<h2>How to use this map</h2>")
document.write("<p>Click on a marker on the map to see details.</p>")
document.write("<p>You can also click on a link in the list below the map to see the information.</p>")
document.write("<div id='gmap'></div>")
document.write("<div id='markers'>")
document.write("<h2>Parks and green spaces</h2>")
document.write("<ul id='gmarkers'>")
document.write("</ul>")
document.write("</div>")
document.write("<div id='key'>")
document.write("<h2>Key</h2>")
document.write("<table summary='Key to map icons' cellspacing='0' class='key'>")
document.write("<thead>")
document.write("<tr>")
document.write("<th scope='col'>Icon</th>")
document.write("<th scope='col'></th>")
document.write("</tr>")
document.write("</thead>")
document.write("<tbody>")
document.write("<tr>")
document.write("<th scope='row'><img src='http://www.cambridge.gov.uk/public/googlemaps/icons/park.gif' style='height: 32px; width: 32px;' alt='Park, gardens and recreation grounds' /></th>")
document.write("<td>Parks, gardens and recreation grounds</td>")
document.write("</tr>")

document.write("<tr>")
document.write("<th scope='row'><img src='http://www.cambridge.gov.uk/public/googlemaps/icons/park1.gif' style='height: 32px; width: 32px;' alt='Park, gardens and recreation grounds' /></th>")
document.write("<td>Parks, gardens and recreation grounds (not run by us)</td>")
document.write("</tr>")
document.write("<tr>")
document.write("<th scope='row'><img src='http://www.cambridge.gov.uk/public/googlemaps/icons/beefcow.gif' style='height: 32px; width: 32px;' alt='Common' /></th>")
document.write("<td>Common</td>")
document.write("</tr>")
document.write("<tr>")
document.write("<th scope='row'><img src='http://www.cambridge.gov.uk/public/googlemaps/icons/butterfly.gif' style='height: 32px; width: 32px;' alt='Nature reserve' /></th>")
document.write("<td>Nature reserve</td>")
document.write("</tr>")
document.write("<tr>")
document.write("<th scope='row'><img src='http://www.cambridge.gov.uk/public/googlemaps/icons/playground.gif' style='height: 32px; width: 32px;' alt='Playgrounds' /></th>")
document.write("<td>Playgrounds</td>")
document.write("</tr>")
document.write("</tbody>")
document.write("</table>")
document.write("</div>")

//<![CDATA[
if (GBrowserIsCompatible()) {

 // Create generic marker icon
 var icon = new GIcon();
 //icon.image = "http://www.cambridge.gov.uk/public/googlemaps/icons/20blue.png";
 icon.shadow = "http://www.cambridge.gov.uk/public/googlemaps/icons/32shadow.png";
icon.iconSize=new GSize(32,32); 
icon.shadowSize=new GSize(56,32); 
icon.iconAnchor=new GPoint(16,32); 
icon.infoWindowAnchor=new GPoint(16,0); 
 
 var icons = [];
 // Create specific icons for each category
 icons["play"] = new GIcon(icon, "http://www.cambridge.gov.uk/public/googlemaps/icons/playground.png");
 icons["park"] = new GIcon(icon, "http://www.cambridge.gov.uk/public/googlemaps/icons/park.png");
 icons["park1"] = new GIcon(icon, "http://www.cambridge.gov.uk/public/googlemaps/icons/park1.png");
 icons["common"] = new GIcon(icon, "http://www.cambridge.gov.uk/public/googlemaps/icons/beefcow.png");
 icons["reserve"] = new GIcon(icon, "http://www.cambridge.gov.uk/public/googlemaps/icons/butterfly.png");

 // Create the marker and set up the event window
 function createMarker(point, name, html, category) {
  var marker = new GMarker(point, {
   icon: icons[category], title: name
  });
  GEvent.addListener(marker, "click", function() {
   marker.openInfoWindowHtml('<div class="info" style="height: 350px; width: 250px;"><h2>' + name + '</h2>' + html + '</div>');
  });
  // save the info we need to use later for the side_bar
  gmarkers[i] = marker;
  htmls[i] = html;
  names[i] = name;
  // add a line to the side_bar html
  sidebar_html += '<li><a href="javascript:myclick(' + i + ')">' + name + '</a></li>';
  i++;
  return marker;
 }
	  
 // Create the map
 var map = new GMap2(document.getElementById("gmap"));
 map.addControl(new GSmallMapControl());
 map.addControl(new GMapTypeControl());
 map.addControl(new GScaleControl());
 map.addControl(new GOverviewMapControl());
 map.enableScrollWheelZoom();
 map.setCenter(new GLatLng(52.20500, 0.12400), 14, map.getMapTypes()[2]);


 // Collect the HTML for the sidebar
 var sidebar_html = "";
 // Arrays to hold copies of the markers and HTML
 var gmarkers = [];
 var htmls = [];
 var names = [];
 var i = 0;
 
 // This function picks up the click and opens the corresponding info window
 function myclick(i) {
  gmarkers[i].openInfoWindowHtml('<div class="info" style="height: 350px; width: 250px;"><h2>' + names[i] + '</h2>' + htmls[i] + '</div>');
 }
	
 // Read the data from example.xml
 var request = GXmlHttp.create();
 request.open("GET", "/public/googlemaps/parks.xml", true);
 request.onreadystatechange = function() {
  if (request.readyState == 4) {
   var xmlDoc = request.responseXML;
   // 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 = GXml.value(markers[i].getElementsByTagName("lat")[0]);
    var lng = GXml.value(markers[i].getElementsByTagName("lng")[0]);
    var point = new GLatLng(lat, lng);
    var name = GXml.value(markers[i].getElementsByTagName("name")[0]);
	var html = GXml.value(markers[i].getElementsByTagName("infowindow")[0]);
	var category = GXml.value(markers[i].getElementsByTagName("category")[0]);
    // create the marker
    var marker = createMarker(point, name, html, category);
    map.addOverlay(marker);
   }
   
   // put the assembled side_bar_html contents into the side_bar div
   document.getElementById("gmarkers").innerHTML = sidebar_html;
  }
 }
 request.send(null);
}

else {
 alert("Sorry, the Google Maps API is not compatible with this browser");
}
//]]>