var locations = {};

    function load() {
      var map = new GMap2(document.getElementById("map"));
      map.setCenter(new GLatLng(51.9221, 4.47895), 11);
		map.addControl(new GSmallZoomControl3D());

		map.enableContinuousZoom();
      GDownloadUrl("xml.php", function(data) {
        var xml = GXml.parse(data);
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var stad = markers[i].getAttribute("stad");
		   var id = markers[i].getAttribute("id");
		   var prijs = markers[i].getAttribute("prijs");
          var address = markers[i].getAttribute("address");
          var plaatje = markers[i].getAttribute("plaatje");
          var latlng = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                  parseFloat(markers[i].getAttribute("lng")));
          var store = {latlng: latlng, stad: stad, prijs: prijs, address: address, id: id, plaatje: plaatje};
          var latlngHash = (latlng.lat().toFixed(6) + "" + latlng.lng().toFixed(6));
          latlngHash = latlngHash.replace(".","").replace(".", "").replace("-","");
          if (locations[latlngHash] == null) {
            locations[latlngHash] = []
          }
          locations[latlngHash].push(store);
        }
        for (var latlngHash in locations) {
          var stores = locations[latlngHash];
          if (stores.length > 1) {
            map.addOverlay(createClusteredMarker(stores));
          } else {
            map.addOverlay(createMarker(stores));
          }
         }
      });
    }

    function createMarker(stores) {
      var store = stores[0];
     
	 
				 var iconG = new GIcon();
				iconG.image = 'images/marker.png';
				iconG.shadow = 'images/shadow.png';
				iconG.iconSize = new GSize(31, 33);
				iconG.shadowSize = new GSize(60, 33);
				iconG.iconAnchor = new GPoint(15, 15);
				iconG.infoWindowAnchor = new GPoint(0, 6);
	 
	 
      var marker = new GMarker(store.latlng, iconG);
      var html = 
	  "<a href=\"show.php?id="+store.id+"\"><img src='../plaatjes/" + store.plaatje +"' width='80' height='60' border='2' style='border-color: #F9781A; float:left; margin:-3px 6px 0 6px;'/></a><b><a href=\"show.php?id="+store.id+"\" style='color: #F9781A; text-decoration:none; font-weight:bold;'>" + store.address +"</a></b><br/>"+ store.stad +"<br/>&euro;"+ store.prijs +",-";
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      return marker;
    }

    function createClusteredMarker(stores) {
      
	   var iconG = new GIcon();
				iconG.image = 'images/marker.png';
				iconG.shadow = 'images/shadow.png';
				iconG.iconSize = new GSize(31, 33);
				iconG.shadowSize = new GSize(60, 33);
				iconG.iconAnchor = new GPoint(15, 15);
				iconG.infoWindowAnchor = new GPoint(0, 6);
	  
      var marker = new GMarker(stores[0].latlng, iconG);
      var html = "";
      for (var i = 0; i < stores.length; i++) {
        html += "<b>" + stores[i].name + "</b> <br/>" + stores[i].address + "<br/>";
      }
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      return marker;
    }