var iconPink = new GIcon(); 
iconPink.image = 'images/roze2.png';
iconPink.shadow = 'images/fringe_shadow.png';
iconPink.iconSize = new GSize(14, 20);
iconPink.shadowSize = new GSize(21, 20);
iconPink.iconAnchor = new GPoint(7, 10);
iconPink.infoWindowAnchor = new GPoint(11, -5);

var iconBlue = new GIcon(); 
iconBlue.image = 'images/tf.png';
iconBlue.shadow = 'images/tf_shadow.png';
iconBlue.iconSize = new GSize(25, 25);
iconBlue.shadowSize = new GSize(37, 18);
iconBlue.iconAnchor = new GPoint(13, 13);
iconBlue.infoWindowAnchor = new GPoint(16, -5);

var iconGreen = new GIcon(); 
iconGreen.image = 'images/macbike.png';
iconGreen.shadow = 'images/macbike_shadow.png';
iconGreen.iconSize = new GSize(26, 31);
iconGreen.shadowSize = new GSize(36, 18);
iconGreen.iconAnchor = new GPoint(13, 13);
iconGreen.infoWindowAnchor = new GPoint(11, -5);

var iconOrange = new GIcon(); 
iconOrange.image = 'images/oranje2.png';
iconOrange.shadow = 'images/fringe_shadow.png';
iconOrange.iconSize = new GSize(14, 20);
iconOrange.shadowSize = new GSize(21, 20);
iconOrange.iconAnchor = new GPoint(7, 10);
iconOrange.infoWindowAnchor = new GPoint(11, -5);

var customIcons = [];
customIcons["1"] = iconPink;
customIcons["2"] = iconBlue;
customIcons["3"] = iconOrange;
customIcons["4"] = iconGreen;


var gmarkers = [];
var htmls =[];
var id = 0;

function load() {
  if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map"),
    { size: new GSize(610,650) } );
    map.setCenter(new GLatLng(52.3651129,4.8920814), 13);
    var customUI = map.getDefaultUI();
    customUI.controls.scalecontrol = false;
    map.setUI(customUI);
	map.setMapType(G_NORMAL_MAP);
	
	GDownloadUrl("admin/locations/genxml.php", function(data) {
      var xml = GXml.parse(data);
      var markers = xml.documentElement.getElementsByTagName("marker");
      for (var i = 0; i < markers.length; i++) {
        var id = markers[i].getAttribute("id");
        var name = markers[i].getAttribute("name");
        var address = markers[i].getAttribute("address");
	    var html = GXml.value(markers[i].getElementsByTagName("infowindow")[0]);
        var type = markers[i].getAttribute("type");
        var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                parseFloat(markers[i].getAttribute("lng")));
        var marker = createMarker(id, point, name, address, type, map, html);
        map.addOverlay(marker);
      }
    });

  }
}

function createMarker(id, point, name, address, type, map, html) {
  var marker = new GMarker(point, customIcons[type]);
	GEvent.addListener(marker, "click", function() {
        marker.openExtInfoWindow(
          map,
	      "fringe",
	      html,
	      {beakOffset: -3}
        );	});


  gmarkers[id] = marker;
  htmls[id] = html;


  return marker;
}

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