//Geef hier de url van de xml met de data op.
    //var configFileUrl = ("demomap.xml");
    var geocoder = new GClientGeocoder();
    var map;
    var infoWindowOpen = false; //hulpmiddel om infoboxes goed te sluiten
    function load(configFileUrl) {
      if (GBrowserIsCompatible()) {
        //Maak een kaartobject aan
        map = new GMap2(document.getElementById("map"));
        
	//Lees de configuratie in en bouw de kaart op met deze informatie
        GDownloadUrl(configFileUrl, function(data, responseCode) {
           var xml = GXml.parse(data);
           //kaartinfo
           var mapConfig= xml.documentElement.getElementsByTagName("map")[0];
           var longitudeCenter = mapConfig.getAttribute("centerLongitude");
           var latitudeCenter = mapConfig.getAttribute("centerLatitude");
           var zoomlevel = mapConfig.getAttribute("zoomlevel");
           var zoomControlsOnOff = mapConfig.getAttribute("zoomControlsOnOff");
           var zoomControlsSize = mapConfig.getAttribute("zoomControlsSize");
           var mapTypeControlsOnOff = mapConfig.getAttribute("mapTypeControlsOnOff");
           var mapType = mapConfig.getAttribute("mapType");
           var boxWidth = mapConfig.getAttribute("boxWidth");

           //Geef het centerpoint en zoomlevel op
           map.setCenter(new GLatLng(parseFloat(latitudeCenter), parseFloat(longitudeCenter)), parseFloat(zoomlevel));
           
           if (zoomControlsOnOff != null && zoomControlsOnOff.toUpperCase()=="ON") {
             if (zoomControlsSize != null && zoomControlsSize.toUpperCase()=="LARGE") {
                map.addControl(new GLargeMapControl());
             } else {
                map.addControl(new GSmallMapControl());
             } 
           } 
           
           if (mapTypeControlsOnOff != null && mapTypeControlsOnOff.toUpperCase()=="ON") {
             map.addControl(new GMapTypeControl());
           } 
           
           if (mapType != null && mapType.toUpperCase()=="SATELLITE") {
             map.setMapType(G_SATELLITE_MAP);
           } else if (mapType != null && mapType.toUpperCase()=="HYBRID") {
             map.setMapType(G_HYBRID_MAP);
           } else {
            map.setMapType(G_NORMAL_MAP);
           }
           var infoBoxOptions = new Object;
           infoBoxOptions.maxWidth = boxWidth;

           //MarkerIcons inlezen
           var markerIcons = xml.documentElement.getElementsByTagName("markerIcon");
           var iconList=new Object();
           for (var i = 0; i < markerIcons.length; i++) {
              var id=markerIcons[i].getAttribute("id");
              var image=markerIcons[i].getAttribute("image");
              var shadow=markerIcons[i].getAttribute("shadow");
              var iconSizeHeight=markerIcons[i].getAttribute("iconSizeHeight");
              var iconSizeWidth=markerIcons[i].getAttribute("iconSizeWidth");
              var shadowSizeHeight=markerIcons[i].getAttribute("shadowSizeHeight");
              var shadowSizeWidth=markerIcons[i].getAttribute("shadowSizeWidth");
              var iconAnchorX=markerIcons[i].getAttribute("iconAnchorX");
              var iconAnchorY=markerIcons[i].getAttribute("iconAnchorY");
              var infoWindowAnchorX =markerIcons[i].getAttribute("ifoWindowAnchorX");
              var infoWindowAnchorY =markerIcons[i].getAttribute("ifoWindowAnchorY");
              var customIcon = new GIcon();
              customIcon.image = image;
              if (shadow!=null && shadow.length!=0) customIcon.shadow = shadow;
              customIcon.iconSize = new GSize(iconSizeWidth, iconSizeHeight);
              if (shadow!=null && shadow.length!=0) customIcon.shadowSize = new GSize(shadowSizeWidth, shadowSizeHeight);
              customIcon.iconAnchor = new GPoint(iconAnchorX, iconAnchorY);
              customIcon.infoWindowAnchor = new GPoint(infoWindowAnchorX, infoWindowAnchorY);
              iconList[id]=customIcon;
           }

           //Markers inlezen en tonen
           var markers = xml.documentElement.getElementsByTagName("marker");
           for (var i = 0; i < markers.length; i++) {

              var infoHtml=markers[i].getAttribute("infoHtml");
              var infoUrl=markers[i].getAttribute("infoUrl");
              var url=markers[i].getAttribute("url");
              var iconId=markers[i].getAttribute("iconId");

              //Markeroptions instellen
              if (iconId!=null  && (iconId.length!=0)) {
                 markerOptions = { icon:iconList[iconId] };
              } else {
                 markerOptions = { }; //defaultplaatje
              }
              //Marker maken
              if (markers[i].getAttribute("lat") == null){
                var adress = markers[i].getAttribute("address");
                createGeoCodedMarker(map, adress, infoUrl, infoHtml, url, markerOptions, infoBoxOptions);
              } else {
                var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));
                createMarker(map, point, infoUrl, infoHtml, url, markerOptions, infoBoxOptions);
              }
           }
           
           //Polylines inlezen en tonen
           var polylines = xml.documentElement.getElementsByTagName("polyline");
           for (var i = 0; i < polylines.length; i++) {
              var points=polylines[i].getAttribute("points");
              var color=polylines[i].getAttribute("color");
              var weight=polylines[i].getAttribute("weight");
              var opacity=polylines[i].getAttribute("opacity");
              var zoomFactor=polylines[i].getAttribute("zoomFactor");
              var levels=polylines[i].getAttribute("levels");
              var numLevels=polylines[i].getAttribute("numLevels");
              var encodedPolyline = new GPolyline.fromEncoded({color: color, weight: weight, points: points, levels: levels, zoomFactor: zoomFactor, numLevels: numLevels, opacity: opacity});
              map.addOverlay(encodedPolyline);
           }
           
           //Polygons inlezen en tonen
           var polygons = xml.documentElement.getElementsByTagName("polygon");
           for (var i = 0; i < polygons.length; i++) {
              var points=polygons[i].getAttribute("points");
              var color=polygons[i].getAttribute("color");
              var weight=polygons[i].getAttribute("weight");
              var opacity=polygons[i].getAttribute("opacity");
              var zoomFactor=polygons[i].getAttribute("zoomFactor");
              var levels=polygons[i].getAttribute("levels");
              var numLevels=polygons[i].getAttribute("numLevels");
              var fill=polygons[i].getAttribute("fill");
              var fillColor=polygons[i].getAttribute("fillColor");
              var fillOpacity=polygons[i].getAttribute("fillOpacity");
              var outline=polygons[i].getAttribute("outline");
              var polygon = new GPolygon.fromEncoded({  
                 polylines: [{
                    points: points,
                    levels: levels,
                    zoomFactor: zoomFactor,
                    numLevels: numLevels,
                    weight: weight,
                    opacity: opacity,
                    color: color
                    }],
                 fill: fill,
                 color: fillColor,
                 opacity: fillOpacity,
                 outline: outline
                 });
             map.addOverlay(polygon);
           }
           
           //kml/kmz files inlezen en tonen
           var kmls = xml.documentElement.getElementsByTagName("kml");
           for (var i = 0; i < kmls.length; i++) {
              var url=kmls[i].getAttribute("url");
              var kml = new GGeoXml(url);
              map.addOverlay(kml);
           }

        });
      }
    }

    function createMarker(map, point, infoUrl, infoHtml, url, markerOptions, infoBoxOptions){
       var marker = new GMarker(point, markerOptions);
       //Afhandeling infobox
       if(infoUrl!=null && infoUrl.length>0) {
          //Bij mouseover een infobox tonen, data uit de opgegeven url halen.
          var defaultHtml= "<div id='info'></div>"; // tbv ajax update
          GEvent.addListener(marker, "mouseover", function() {marker.openInfoWindowHtml(defaultHtml,infoBoxOptions); ajax(infoUrl);});
          GEvent.addListener(marker, "mouseout", function() {setTimeout("map.closeInfoWindow()", 1000);}); 
       } else if(infoHtml!=null && infoHtml.length>0){
          //Bij mouseover een infobox tonen, data uit de opgegeven html halen.
          GEvent.addListener(marker, "mouseover", function() {infoWindowOpen=true; marker.openInfoWindowHtml(infoHtml, infoBoxOptions);});
          //GEvent.addListener(marker, "mouseout", function() {setTimeout("map.closeInfoWindow()", 1000);}); 
          //GEvent.addListener(marker, "mouseout", function() {infoWindowOpen=false; setTimeout(closeInfoWindow, 2000);});
       }

       //Bij klikken op de marker de url openen
       if (url!=null && url.length>0) {
         GEvent.addListener(marker, "click", function() {window.open(url);});
       }
       map.addOverlay(marker);
    }

    function createGeoCodedMarker(map, address, infoUrl, infoHtml, url, markerOptions, infoBoxOptions){
       var point = geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert(address + " niet gevonden");              
            } else {
              createMarker(map, point, infoUrl, infoHtml, url, markerOptions, infoBoxOptions);
            }
          }
        );
    }
    


    function ajax(url){
       element=document.getElementById("info");
       element.innerHTML="Laden...";
       var request = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("MSXML2.XMLHTTP.3.0");
 
       request.open("POST", url, true);
       request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
 
       request.onreadystatechange = function(){
          if (request.readyState == 4 && request.status == 200) {
             if (request.responseText){
               element.innerHTML = request.responseText; 
             }
         }
      }
      request.send(null);
   }
   
   function closeInfoWindow(){
      if(infoWindowOpen==false) { //Alleen de box sluiten als ie niet opnieuw geopend is!
         map.closeInfoWindow();
      }
   }// JavaScript Document