var map;


function createMarker(point, number) {
    var icon = new GIcon();
    
    icon.image = "images/cluster.png";
    icon.iconSize = new GSize(32, 32);
    icon.shadowSize = new GSize(32, 32);
    icon.iconAnchor = new GPoint(16, 32);
    
    var marker = new GMarker(point, icon);
    marker.value = number;
    GEvent.addListener(marker, "click", function() {
        var myHtml = "<table width=\"300\" height=\"50\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\">";
	 myHtml = myHtml + "<tr>";
	 myHtml = myHtml + "<td width=\"50\">";
	 myHtml = myHtml + "<a href=\"" + maps[number] + "\" style=\"text-decoration: none\">"; 
	 myHtml = myHtml + "<img src=\"images/" + imgs[number] + "\"/>";
	 myHtml = myHtml + "</a>";
	 myHtml = myHtml + "</td><td valign=\"top\">";
	 myHtml = myHtml + "<a href=\"" + maps[number] + "\" style=\"text-decoration: none\">";
         myHtml = myHtml + "<h3 align=\"left\">" + names[number] + "</h3>"; 
	 myHtml = myHtml + "</a>";
	 myHtml = myHtml + "<p>" +  desc[number] + "</p>";
	 myHtml = myHtml + "</td></tr></table>";
        map.openInfoWindowHtml(point, myHtml);
    });
    return marker;
}



/////////////////////////////////////////////////////////////////MAIN FUNCTION - LOAD
//add all the layers and controls to the map
function load() {
    if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map"), {draggableCursor: 'pointer'});
        map.setCenter(new GLatLng(centerlat, centerlon), initzoom);
        //map.enableContinuousZoom();
	map.enableScrollWheelZoom();
	map.enableGoogleBar();
        map.setMapType(G_SATELLITE_MAP);
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        for (var i = 0; i < points.length; i++) {
            var point = new GLatLng(points[i][0], points[i][1]);
            map.addOverlay(createMarker(point, i));
        }
    }
}