var lat= 139.426541666667;
var lng= 35.6542111111111;
var zm = 4;
var map;
var markerAry = new Array();

    function init() {
		if (GBrowserIsCompatible()) {

		    map = new GMap(document.getElementById("map"));
		    map.setMapType(G_MAP_TYPE);
		    map.addControl(new GMapTypeControl());
		    map.addControl(new GLargeMapControl());
		    map.centerAndZoom(new GPoint(lat,lng), zm);

		    placeMarkers();

		}else{
		    document.getElementById("map").innerHTML = 'このブラウザでは利用できません。<br />'
		        +'サポートブラウザは以下の通りです。<br />'
		        +'<ul><li>IE 5.5以降　(Windows)</li>'
		        +'<li>Firefox 0.8以降　(Windows, Mac, Linux)</li>'
		        +'<li>Safari 1.2.4以降　(Mac)</li>'
		        +'<li>Netscape 7.1以降　(Windows, Mac, Linux)</li>'
		        +'<li>Mozilla 1.4以降　(Windows, Mac, Linux)</li>'
		        +'<li>Opera 7.5以降　(Windows, Mac, Linux)</li>'
		        +'</ul>';
		}
    }

	function change_position(p_lng,p_lat,item) {
		var m = markerAry[item];
	    m.openInfoWindowHtml(m.html);
        map.recenterOrPanToLatLng(new GPoint(p_lat,p_lng));
	}


function placeMarkers() {

    //var b = map.getBoundsLatLng();
	//var args = 'minX='+b.minX+'&maxX='+b.maxX+'&minY='+b.minY+'&maxY='+b.maxY;
	//placeMapObject('xml.cgi?'+args);
	placeMapObject('xml.cgi');

}

function placeMapObject(url) {
	var request = GXmlHttp.create();
	request.open("GET", url, true);
	request.onreadystatechange = function() {
	  if (request.readyState == 4) {
	    map.clearOverlays()
	    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("desc"), markers[i].getAttribute("thumb"));
	      map.addOverlay(marker);
	      markerAry[i] = marker;
	    }
	  }
	}

	request.send(null);
}

function createMarker(point, index, title, desc, thumb) {

 var icon = new GIcon();
   icon.image = "images/flag.png";
   icon.iconSize = new GSize(22, 22);
   icon.iconAnchor = new GPoint(10, 20);
   icon.infoWindowAnchor = new GPoint(5, 1);

  var marker = new GMarker(point, icon);

  // Show this marker's index in the info window when it is clicked 
  var html = "<div class=\"balloon\">" + title
            +'<br /><img src="'+thumb+'" style="padding:3px;border:1px solid #ccc;margin:5px;" height="120"><br />'
           + desc + "</div>";

  GEvent.addListener(marker, "click", function() {
    map.recenterOrPanToLatLng(point);
    marker.openInfoWindow(html);
  });

  marker.html = html;
  return marker;
}