var iconBlue = new GIcon(); 
    iconBlue.image = 'skin1/images/marker_blue.png';
    iconBlue.shadow = 'skin1/images/marker_shadow.png';
    iconBlue.iconSize = new GSize(12, 20);
    iconBlue.shadowSize = new GSize(22, 20);
    iconBlue.iconAnchor = new GPoint(6, 20);
    iconBlue.infoWindowAnchor = new GPoint(5, 1);

    var iconRed = new GIcon(); 
    iconRed.image = 'skin1/images/marker_red.png';
    iconRed.shadow = 'skin1/images/marker_shadow.png';
    iconRed.iconSize = new GSize(12, 20);
    iconRed.shadowSize = new GSize(22, 20);
    iconRed.iconAnchor = new GPoint(6, 20);
    iconRed.infoWindowAnchor = new GPoint(5, 1);
    
    var iconYellow = new GIcon(); 
    iconYellow.image = 'skin1/images/marker_yellow.png';
    iconYellow.shadow = 'skin1/images/marker_shadow.png';
    iconYellow.iconSize = new GSize(12, 20);
    iconYellow.shadowSize = new GSize(22, 20);
    iconYellow.iconAnchor = new GPoint(6, 20);
    iconYellow.infoWindowAnchor = new GPoint(5, 1);
    
    var iconGreen = new GIcon(); 
    iconGreen.image = 'skin1/images/marker_green.png';
    iconGreen.shadow = 'skin1/images/marker_shadow.png';
    iconGreen.iconSize = new GSize(12, 20);
    iconGreen.shadowSize = new GSize(22, 20);
    iconGreen.iconAnchor = new GPoint(6, 20);
    iconGreen.infoWindowAnchor = new GPoint(5, 1);

    var customIcons = [];
    customIcons["blue"] = iconBlue;
    customIcons["red"] = iconRed;
    customIcons["yellow"] = iconYellow;
    customIcons["green"] = iconGreen;

function map_load(map_filename) {	
	map_filename = "skin1/customer/maps/" + map_filename;	
	
	if (GBrowserIsCompatible()) {
		var map = new GMap2(document.getElementById("map"));
		map.addControl(new GSmallMapControl());
		map.addControl(new GMapTypeControl());		
			
				
		// Download the data in data.xml and load it on the map. 
    GDownloadUrl(map_filename, function(data) {
      var xml = GXml.parse(data);
      var markers = xml.documentElement.getElementsByTagName("marker");
      for (var i = 0; i < markers.length; i++) {
        var name = markers[i].getAttribute("name");
        var address = markers[i].getAttribute("address");
        var type = markers[i].getAttribute("type");
        var description = markers[i].getAttribute("description");
        var lat = parseFloat(markers[i].getAttribute("lat"));
        var long = parseFloat(markers[i].getAttribute("lng"));
        var point = new GLatLng(lat,long);
        
        if(i==0){
        	if(markers.length == 1) map.setCenter(new GLatLng(lat,long), 16);
        	else map.setCenter(new GLatLng(1.36,103.83), 11);
      	}
      	
        var marker = createMarker(point, name, address, type, description);        
        
        map.addOverlay(marker);
      }
    });
  }
}

function createMarker(point, name, address, type, description) {
  var marker = new GMarker(point, customIcons[type]);
  var html = "<b>" + name + "</b> <br/>" + description + "</b> <br/>" + address;
  GEvent.addListener(marker, 'click', function() {
    marker.openInfoWindowHtml(html);
  });
  return marker;
}