//<![CDATA[
      var gmarkers = [];
      var htmls = [];
      var points = [];
	  var map;
      
      function zoomIN(i) { 
	  		//map.setZoom(12);
			//gmarkers[i].openInfoWindowHtml(htmls[i]);
			//map.closeInfoWindow();
			map.setCenter(points[i],13,G_HYBRID_MAP);
	
	  } 

	  function roadMap(i) { 
			//map.closeInfoWindow();
			gmarkers[i].openInfoWindowHtml(htmls[i]);
			map.setCenter(points[i],7,G_NORMAL_MAP);
      } 

      function myclick(i) {
        //map.setCenter(province,5,G_HYBRID_MAP);
		map.setMapType(G_HYBRID_MAP);
		map.setZoom(5)
        gmarkers[i].openInfoWindowHtml(htmls[i]);
      }
	// load function builds page when page opened
    function load(xpoint,ypoint,markerfile) {
      if (GBrowserIsCompatible()) {
	  //var tm = new Date().getTime();
      var side_bar_html = "";
      var i = 0;
	  // make a custom icon
      var baseIcon = new GIcon();
		baseIcon.iconSize=new GSize(32,32);
		baseIcon.shadowSize=new GSize(56,32);
		baseIcon.iconAnchor=new GPoint(16,32);
		baseIcon.infoWindowAnchor=new GPoint(16,16);
      var mymarker = new GIcon(baseIcon, "imagefolder/flake.png", null, "imagefolder/flakes.png");
      
      function createMarker(point,shortName,html,icon) {
        var marker = new GMarker(point, {title:shortName, icon:icon});
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        // save the info we need to use later for the side_bar
        gmarkers[i] = marker;
        //points[i] = point;
        htmls[i] = html;
        // add a line to the side_bar html
        side_bar_html += '<a href="javascript:myclick(' + i + ')">' + shortName + '<\/a><br>';
        i++;
        return marker;
      }
	// create the map and assign controls
      map = new GMap2(document.getElementById("map"));
	  map.addMapType(G_PHYSICAL_MAP);
      map.addControl(new GSmallMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng(xpoint,ypoint),5,G_HYBRID_MAP);

      var side_bar_html = "";
      // opon the xml file and parse the data - uses either static xml or dynamic php page
      var request = GXmlHttp.create();
      request.open("GET", markerfile, 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("row");
		  
          for (var i = 0; i < markers.length; i++) {
            // obtain the attribues of each marker
		    var areaID = GXml.value(markers[i].getElementsByTagName("areaID")[0]);
		    var shortName = GXml.value(markers[i].getElementsByTagName("shortName")[0]);
		    var longName = GXml.value(markers[i].getElementsByTagName("longName")[0]);
            var lat = parseFloat(GXml.value(markers[i].getElementsByTagName("lat")[0]));
            var lng = parseFloat(GXml.value(markers[i].getElementsByTagName("lon")[0]));
            var point = new GLatLng(lat,lng);
		    var city = GXml.value(markers[i].getElementsByTagName("city")[0]);
		    var prov = GXml.value(markers[i].getElementsByTagName("prov")[0]);
		    var shortDesc = GXml.value(markers[i].getElementsByTagName("shortDesc")[0]);
		    var imagePath = GXml.value(markers[i].getElementsByTagName("imagePath")[0]);
			
		    //construct the html used in the marker
            html = '<div class="markerText"><span class="markerPic"><img src="' + imagePath + '" width="75"></span><a href="area.php?areaID=' + areaID + '">' + longName + '</a><span class="markerTextSmall"><br />' + city + ', ' + prov + '<p>' + shortDesc + '<a href="area.php?areaID=' + areaID + '"><br>Read more...</a></p><a href="javascript:roadMap('+i+');">Road Map</a>' + ' -  <a href="javascript:zoomIN('+i+');">Close-up View</a>' + ' - <a href="comment.php?areaID=' + areaID + '">Post a Comment</a></div>';
			
			// create the marker
            var marker = createMarker(point,shortName,html,mymarker);
            map.addOverlay(marker);
          }
          // put the assembled side_bar_html contents into the side_bar div
          document.getElementById("side_bar").innerHTML = side_bar_html;
        }
      }
      request.send(null);	  
	  //tm = (new Date().getTime() - tm)/1000.0
      //alert('Load time: ' + tm + ' seconds');

    }

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

    //]]>