function onMapLoad() {
    // Creates a map and centers it on Los Angeles and adds basic map controls

    map = new PMap(document.getElementById("map"));
    map.setCenter(new PLatLng(39.0, -96), 2);
    map.addControl(new PSmallMapControl());

    geocoder = new PClientGeocoder();

    var icon = new PIcon();
    icon.image = "../images/raa/doghouse_sm.gif";
    icon.shadow = "http://le.pushpin.com/images/icon_pushpin_3d_shadow.png";
    icon.iconSize = new PSize(39, 34);
    icon.shadowSize = new PSize(23, 22);
    icon.iconAnchor = new PPoint(0, 22);
    icon.shadowAnchor = new PPoint(0, 22);
    icon.infoWindowAnchor = new PPoint(8, 2);

//    // Create the Pushpin logo icon
//    var icon2 = new PIcon();
//    icon2.image = "http://le.pushpin.com/images/icon_pushpin_3d.png";
//    icon2.shadow = "http://le.pushpin.com/images/icon_pushpin_3d_shadow.png";
//    icon2.iconSize = new PSize(17, 22);
//    icon2.shadowSize = new PSize(23, 22);
//    icon2.iconAnchor = new PPoint(0, 22);
//    icon2.shadowAnchor = new PPoint(0, 22);
//    icon2.infoWindowAnchor = new PPoint(8, 2);

    // Creates a marker at the given point with the given html for the info window
    function createMarker(point, html, useIcon) {
	    var marker;
	    switch(useIcon){
	        case "3":
			    marker = new PMarker(point, PIcon.SMALL);
			    break;
		    case "2":
			    marker = new PMarker(point, PIcon.POINT);
			    break;
		    case "1":
		    default:
			    marker = new PMarker(point, icon);
			    break;
	    }

	    PEvent.addListener(marker, "click", function() {
		    marker.openInfoWindowHtml(html);
	    });
	    return marker;
    }

    // Download the data in data.xml and load it on the map.
    PDownloadUrl("../rallyacrossamerica/raaEventFeed.ashx", function(data, responseCode) {
	    var xml = PXml.parse(data);
	    var markers = xml.documentElement.getElementsByTagName("event");
	    for (var i = 0; i < markers.length; i++) {
		    var point = new PLatLng(parseFloat(markers[i].getAttribute("lat")),
								    parseFloat(markers[i].getAttribute("lng")));
		    var html = '<table><tr><td style="width:60px;">';
		    html += '<img src="../images/raa/doghouse_lg.gif" alt="Rally Across America"/></td><td class="popupText">';
		    html += markers[i].getAttribute("name");
		    html += '<br />' + markers[i].getAttribute('location');
		    html += '<br />' + markers[i].getAttribute('date') + '&nbsp;&nbsp;' + markers[i].getAttribute('time');
		    if (!(markers[i].getAttribute("id") == "")) {
			    html += '<br /><a href="Event.aspx?id=' + markers[i].getAttribute("id");
			    html += '">event details &gt;&gt;</a></div>';
		    }
		    html += "</td><td><img src='../images/raa/doghouse_sm.gif' />";
		    html += "</td></tr></table>";

		    map.addOverlay(createMarker(point, html, markers[i].getAttribute("pin")));
	    }
    });
}