var gmarkers = [];
    var iconHandicap = new GIcon(); 
    iconHandicap.image = 'sites/all/copenhagen_map/images/handicap2.gif';
    iconHandicap.shadow = 'sites/all/copenhagen_map/images/shadow.png';
    iconHandicap.iconSize = new GSize(21, 31);
    iconHandicap.shadowSize = new GSize(52, 29);
    iconHandicap.iconAnchor = new GPoint(7, 29);
    iconHandicap.infoWindowAnchor = new GPoint(11, 10);
	
    var iconUnisex = new GIcon(); 
    iconUnisex.image = 'sites/all/copenhagen_map/images/unisex2.gif';
    iconUnisex.shadow = 'sites/all/copenhagen_map/images/shadow.png';
    iconUnisex.iconSize = new GSize(21, 31);
    iconUnisex.shadowSize = new GSize(52, 29);
    iconUnisex.iconAnchor = new GPoint(7, 29);
    iconUnisex.infoWindowAnchor = new GPoint(11, 10);
	
    var iconPissoir = new GIcon(); 
    iconPissoir.image = 'sites/all/copenhagen_map/images/pissoir2.gif';
    iconPissoir.shadow = 'sites/all/copenhagen_map/images/shadow.png';
    iconPissoir.iconSize = new GSize(21, 31);
    iconPissoir.shadowSize = new GSize(52, 29);
    iconPissoir.iconAnchor = new GPoint(7, 29);
    iconPissoir.infoWindowAnchor = new GPoint(11, 10);
	
    var customIcons = [];
    customIcons["Handicap"] = iconHandicap;
    customIcons["Unisex"] = iconUnisex;
	customIcons["Pissoir"] = iconPissoir;

  function fitMapToMarkers(){
   var noneVisible=true, i, bounds=new GLatLngBounds();
   for(i=0; i<gmarkers.length; i++){
	if(!gmarkers[i].isHidden()){
	 bounds.extend(gmarkers[i].getLatLng());
	 noneVisible=false;
	}
   }
   if(!noneVisible){
	map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
	map.savePosition();
   }
  }
      // A function to create the marker and set up the event window
        function createMarker(point,field_name_value,html,field_toilettype_value) {
        var marker = new GMarker(point,customIcons[field_toilettype_value]);
        // === Store the category and name info as a marker properties ===
        marker.mycategory = field_toilettype_value;                                 
        marker.myname = field_name_value;
        GEvent.addListener(marker, "click", function() {
	  	marker.openInfoWindowHtml(html, {maxWidth:450, maxHeight:400, autoScroll:true});
        });
        gmarkers.push(marker);
        return marker;
      }

      // == shows all markers of a particular category, and ensures the checkbox is checked ==
      function show(field_toilettype_value) {
        for (var i=0; i<gmarkers.length; i++) {
          if (gmarkers[i].mycategory == field_toilettype_value) {
            gmarkers[i].show();
          }
        }
        // == check the checkbox ==
        document.getElementById(field_toilettype_value+"box").checked = true;
		fitMapToMarkers();
      }

      // == hides all markers of a particular category, and ensures the checkbox is cleared ==
      function hide(field_toilettype_value) {
        for (var i=0; i<gmarkers.length; i++) {
          if (gmarkers[i].mycategory == field_toilettype_value) {
            gmarkers[i].hide();
          }
        }
        // == clear the checkbox ==
        document.getElementById(field_toilettype_value+"box").checked = false;
        // == close the info window, in case its open on a marker that we just hid
        map.closeInfoWindow();
		fitMapToMarkers();
      }

      // == a checkbox has been clicked ==
      function boxclick(box,field_toilettype_value) {
        if (box.checked) {
          show(field_toilettype_value);
        } else {
          hide(field_toilettype_value);
        }
        // == rebuild the side bar
        makeSidebar();
      }

      function myclick(i) {
        GEvent.trigger(gmarkers[i],"click");
      }

function makeSidebar(){
	var links={}, html, i, category;
	//	first loop thru the markers getting all categories used
	//	save any categories found in the categories variable
	for(i=0; i<gmarkers.length; i++){
		//	create empty array for each category that exists
		links[gmarkers[i].mycategory]=[];
	}
	for(i=0; i<gmarkers.length; i++){
		if(!gmarkers[i].isHidden()){
			category=gmarkers[i].mycategory;
			//	add links - creating an array of links for each category
			html='<a href="javascript:myclick('+i+')">'+gmarkers[i].myname+'</a><br>';
			links[category].push(html);
		}
	}
	html='';
	var tempStr;
	for(category in links){
		//	build category header
		tempStr=category;
		tempStr=tempStr.replace(/^./, tempStr.charAt(0).toUpperCase());
		html+='<b>'+tempStr+'</b><br />';
		for(i=0; i<links[category].length; i++){
			//	add all markers in this category
			html+=links[category][i];
		}
	}
	document.getElementById("side_bar").innerHTML = html;
}


	function ZoomIn(lat, lng) {
        map.setCenter(new GLatLng(lat, lng), 19);
		map.setMapType(G_HYBRID_MAP);
    }
	
   
    var varlat = 55.678068;
	var varlong = 12.575397;
	var zoom = 14;
	function ResetZoom(){
	map.setCenter(new GLatLng(varlat,varlong),zoom);
	map.setMapType(G_NORMAL_MAP);
	}
	
	
      // create the map
      function load() {
      if (GBrowserIsCompatible()) {
	  map = new GMap2(document.getElementById("MYmap"));
	  map.addMapType(G_SATELLITE_3D_MAP);
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
	  map.setCenter(new GLatLng(55.678068,12.575397), 14);

      // Read the data
      GDownloadUrl("sites/all/copenhagen_map/map_data.xml.php", function(data) {
        var xmlDoc = GXml.parse(data);
        var markers = xmlDoc.documentElement.getElementsByTagName("marker");
          
        for (var i = 0; i < markers.length; i++) {
          // obtain the attribues of each marker
          var field_lat_value = parseFloat(markers[i].getAttribute("field_lat_value"));
          var field_lng_value = parseFloat(markers[i].getAttribute("field_lng_value"));
          //var point = new GLatLng(lat,lng);
		  var point = new GLatLng(field_lat_value, field_lng_value);
          //var field_name_value = markers[i].getAttribute("field_name_value");
          var field_adresse_value = markers[i].getAttribute("field_adresse_value");
		  var field_postnummer_value = markers[i].getAttribute("field_postnummer_value");
		  var field_city_value = markers[i].getAttribute("field_city_value");
		  var field_toilettype_value = markers[i].getAttribute("field_toilettype_value");
		  var nid=parseInt(markers[i].getAttribute("nid"));


var html = "<b>nid: </b>" + nid + "<br><b>Toilettype: </b>" + field_toilettype_value + " <br><b>Adresse: </b>" + field_adresse_value + "<br><b>Postnr. og by: </b>" + field_postnummer_value + " " + field_city_value + "<br><b>Koordinater: </b>" + field_lat_value + ", " + field_lng_value + '<br>';

html+='<b>Print ruten og map: </b><a href="';
html+=encodeURI('http://maps.google.com/maps?f=q&hl=da&z=17&geocode=&q=' + field_adresse_value + '@' +field_lat_value + ',' + field_lng_value);

html+='">Ruteplan</a><H6>Make a comment and read more about this toilet <a href="node/' + nid + '">Here.</a></H6><div align="center">S&oslash;g i n&aelig;rheden: f.eks. pizza, caf&eacute;, tog osv.<form id="form" action="http://maps.google.dk/maps" method="get"" target="_blank">'+ '<input type="text" SIZE=35 MAXLENGTH=80 name="q" id="q" value="" />'+ '<INPUT value="S&Oslash;G" TYPE="SUBMIT">'+ '<input type="hidden" name="near" value="' + field_adresse_value+ ' @' + point.lat() + ',' + point.lng() + '"/><br /><a href="javascript:ZoomIn(' + field_lat_value + ',' + field_lng_value + ')"><img src="sites/all/copenhagen_map/images/zoomin.gif" alt="Zoom In" title="Zoom In" border="0" height="24" width="26"></a><a href="javascript:ResetZoom()"><img src="sites/all/copenhagen_map/images/resetzoom.gif" alt="Reset Zoom" title="Reset Zoom" border="0" height="24" width="26"></a><a href="#" onclick="map.closeInfoWindow()"><img src="sites/all/copenhagen_map/images/close.gif" alt="Close" title="Close" border="0" height="24" width="21"></a></div>';
		  
		  
          var field_toilettype_value = markers[i].getAttribute("field_toilettype_value");
          // create the marker
var marker = createMarker(point, field_adresse_value + '<br>', html, field_toilettype_value);
          map.addOverlay(marker);
		  
	    // has a javascript variable named 'requestedNid' been created by PHP
		//	if so then check to see if the requestedNid equals the nid of the marker that has just been created
		//	if they are equal then trigger a click on this marker so that the map displays this marker and it's infowindow is open
    if(typeof(requestedNid)!=='undefined' && requestedNid===nid){
      GEvent.trigger(marker, 'click');
    }
		  
        }

        // == show or hide the categories initially ==
        show("Handicap");
        show("Unisex");
        show("Pissoir");
        // == create the initial sidebar ==
        makeSidebar();
      });
    }
 }