//<![CDATA[
	function onLoad() {   
	// Center the map on Palo Alto
	var map = new GMap(document.getElementById("map"));
	map.addControl(new GLargeMapControl());
	map.addControl(new GMapTypeControl());
	var types = map.getMapTypes() ;
	map.setMapType(types[0]);
	map.centerAndZoom(new GPoint(139.741308333333,35.6553083333333), 6);
	
	function createMarker(point, index, title, permalink, category) {
	  // Create a lettered icon for this point using our icon class from above
	  var icon = new GIcon();
	  var marker = new GMarker(point);
	
	  // Show this marker's index in the info window when it is clicked
	  var html = "<a href=\"" + permalink + "\">" + "<h2>" + title + "</h2>"  + "</a>" + "<br />" + "<h3>" + category + "</h3>";
	  GEvent.addListener(marker, "click", function() {
	    marker.openInfoWindowHtml(html);
	  });
	
	  return marker;
	}
	
	// Download the data in data.xml and load it on the map. The format we
	// expect is:
	// <markers>
	//   <marker lat="37.441" lng="-122.141" title="sample" permalink="url"/>
	//   <marker lat="37.322" lng="-121.213" title="sample" permalink="url"/>
	// </markers>
	var request = GXmlHttp.create();
	request.open("GET", "data.xml", true);
	request.onreadystatechange = function() {
	  if (request.readyState == 4) {
	    var xmlDoc = request.responseXML;
	    var markers = xmlDoc.documentElement.getElementsByTagName("marker");
	    for (var i = 0; i < markers.length; i++) {
	      var point = new GPoint(parseFloat(markers[i].getAttribute("lng")),
	                             parseFloat(markers[i].getAttribute("lat")));
	      var marker = createMarker(point, i, markers[i].getAttribute("title"), markers[i].getAttribute("permalink"), markers[i].getAttribute("category"));
	      map.addOverlay(marker);
	    }
	  }
	}
	request.send(null);
    }
//]]>