//<![CDATA[

if (GBrowserIsCompatible()) { 

  // Display the map, with some controls and set the initial location 
  var map = new GMap2(document.getElementById("googlemap"));
//              map.addControl(new GMapTypeControl());
            map.addControl(new GLargeMapControl());
            map.addControl(new GOverviewMapControl());
            map.addControl(new GScaleControl());
            map.setCenter(new GLatLng(53.39464, -2.977917), 15);


  // arrays to hold copies of the markers and html used by the side_bar
  // because the function closure trick doesnt work there
  var gmarkers = [];
  var htmls = [];
  var i = 0;

//      setup graphic and position of icons
//      var icon = new GIcon();
//      icon.image = "../_images/map/red-pushpin.png";
//      icon.shadow = "../_images/map/pushpin-shadow.png";
//      icon.iconSize = new GSize(32, 32);
//      icon.shadowSize = new GSize(59, 32);
//      icon.iconAnchor = new GPoint(5, 30);
//      icon.infoWindowAnchor = new GPoint(31, 8);      


  // A function to create the marker and set up the event window
  function createMarker(point,name,html) {
//      put this line in if want custom icons
//      var marker = new GMarker(point, icon);
    var marker = new GMarker(point);
    GEvent.addListener(marker, "click", function() {
      marker.openInfoWindowHtml(html);
    });
    // save the info we need to use later for the side_bar
    gmarkers[i] = marker;
    htmls[i] = html;
    i++;
    return marker;
  }


  // This function picks up the click and opens the corresponding info window
  function myclick(i) {
    gmarkers[i].openInfoWindowHtml(htmls[i]);
  }

  // Read the data from where.xml
  
  var request = GXmlHttp.create();
  request.open("GET", "/wp-content/themes/arena/map.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("addr");
        var label = markers[i].getAttribute("label");
        // create the marker
        html = "<strong>"+label+"</strong><br/>"+html;
        var marker = createMarker(point,label,html);
        map.addOverlay(marker);
      }
     
   }
  }
  request.send(null);

}

//]]>