var map ;
function initialize(){
    if (GBrowserIsCompatible()) 
    {
        var gmarkers = [];
        var htmls = [];
        var i = 0;
        map = new GMap2(document.getElementById("map_canvas"));
        var topLeft = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(10, 100));
        map.addControl(new GLargeMapControl(), topLeft);
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(37.788081, 137.680664, 24.67707, 48.120117), 5);
        map.setMapType(G_SATELLITE_MAP);
        map.enableDoubleClickZoom();
        map.enableContinuousZoom();
        var nanoIcon = new GIcon(G_DEFAULT_ICON);
        nanoIcon.image = "http://www.nanouniverse.jp/images/marker.png";
        markerOptions = {
            icon : nanoIcon 
        };

		
        function createMarker(point, html) 
        {
            var marker = new GMarker(point, markerOptions);

            GEvent.addListener(marker, "mouseover", function () 
            {
                marker.openInfoWindowHtml(html);
            });
            GEvent.addListener(marker, "mouseout", function () 
            {
                marker.closeInfoWindow();
            });
            GEvent.addListener(marker, "click", function () 
            {
                map.setCenter(point, 14);
                marker.openInfoWindowHtml(html);
            });
			
            gmarkers[i] = marker;
            htmls[i] = html;
            i++;
            return marker;
        }
		
		var request = GXmlHttp.create();
        request.open("GET", "shop/shoplist.xml", true);
        request.onreadystatechange = function () 

        {
            if (request.readyState == 4) 
            {
                var xmlDoc = request.responseXML;
                // var xmlDoc = GXml.parse(request.responseText); // Google Page Creator を使う場合
                var markers = xmlDoc.documentElement.getElementsByTagName("marker");
                for (var i = 0; i < markers.length; i++) 
                {
                    var lat = parseFloat(markers[i].getAttribute("lat"));
                    var lng = parseFloat(markers[i].getAttribute("lng"));
                    var point = new GLatLng(lat, lng);
                    var shopname = markers[i].getAttribute("shopname");
                    var post = markers[i].getAttribute("post");
                    var loc = markers[i].getAttribute("loc");
                    var tel = markers[i].getAttribute("tel");
                    var tel2 = markers[i].getAttribute("tel2");
                    var time1 = markers[i].getAttribute("time1");
                    var time2 = markers[i].getAttribute("time2");
                    var html = '<strong style=" font-size:13px;">' + shopname + '</strong><br /><br />' + post + '<br />' + loc + '<br /><br /><strong style=" font-size:12px;">tel</strong><br />' + tel + '<br />' + tel2 + '<br /><br /><strong style=" font-size:11px;">営業時間</strong><br />' + time1 + '<br />' + time2 ;
                    var marker = createMarker(point, html);

                    map.addOverlay(marker);
                }
            }
        }
    }
    request.send(null);
}