var map = new GMap2(document.getElementById("map"));
var myPano= new GStreetviewPanorama(document.getElementById("pano"));
var Streetvie_spot;
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GOverviewMapControl(new GSize(200,150)));
map.setCenter(new GLatLng(35.67065,139.708543), 16);
map.enableDoubleClickZoom();
map.enableContinuousZoom();
streetview = new GStreetviewOverlay();
map.addOverlay(streetview); 


                GEvent.addListener(map, 'click', function(objOverlay, objPoint){
                 add_Streetvie(objPoint)
                });

                var add_Streetvie = function(objPoint) {
                        document.getElementById("pano").innerHTML="";
                        panoramaOptions = { latlng:objPoint };
                        var myPano = new GStreetviewPanorama(document.getElementById("pano"), panoramaOptions);
                        if(myPano){
                          if(Streetvie_spot)map.removeOverlay(Streetvie_spot)
                          var guyIcon = new GIcon(G_DEFAULT_ICON);
                          guyIcon.image = "/image/marker/man_arrow-0.png";
                          guyIcon.transparent = "/image/marker/man-pick.png";
                          guyIcon.imageMap = [
                                26,13, 30,14, 32,28, 27,28, 28,36, 18,35, 18,27, 16,26,
                                16,20, 16,14, 19,13, 22,8
                             ];
                          guyIcon.iconSize = new GSize(49, 52);
                          guyIcon.iconAnchor = new GPoint(25, 35);
                          guyIcon.infoWindowAnchor = new GPoint(25, 5);
                        　Streetvie_spot = new GMarker(objPoint,guyIcon);
                        　GEvent.addListener(myPano, "newpano", onNewLocation);
                        　GEvent.addListener(myPano, "yawchanged", onYawChange); 
                        　//GEvent.addListener(myPano, "yawchanged", handleYawChange);
                        　svOverlay = new GStreetviewOverlay();
                        　map.addOverlay(Streetvie_spot);
                        　GEvent.addListener(myPano, "maximizeend", function() {
                        　myPano.setContainer(contentNode);  
                        　window.setTimeout("myPano.checkResize()", 5);
                        　});

                        }
                }

        function handleInitialized(location) {
                map.setCenter(location.latlng);
                currentLatLng=location.latlng;
                placeFovMarker();
                return;
        }
        function handleYawChange(yaw) {
                currentYaw = Math.round(yaw);
                placeFovMarker();
                return;
        }
        function placeFovMarker(){
                map.removeOverlay(fovMarker);
                fovMarker = new GMarker(currentLatLng, {clickable: false});
                map.addOverlay(fovMarker);
                return;
        }

        function onYawChange(newYaw) {
          var GUY_NUM_ICONS = 16;
          var GUY_ANGULAR_RES = 360/GUY_NUM_ICONS;
          if (newYaw < 0) {
            newYaw += 360;
          }
          guyImageNum = Math.round(newYaw/GUY_ANGULAR_RES) % GUY_NUM_ICONS;
          guyImageUrl = "/image/marker/man_arrow-" + guyImageNum + ".png";
          Streetvie_spot.setImage(guyImageUrl);
        }
        function onNewLocation(lat, lng) {
          var latlng = new GLatLng(lat, lng);
          Streetvie_spot.setLatLng(latlng);
        }

        var icon = new GIcon();
        icon.shadow = "/image/marker/shadow.png";
        icon.iconSize = new GSize(20, 34);
        icon.shadowSize = new GSize(37, 34);
        icon.iconAnchor = new GPoint(9, 34);
        icon.infoWindowAnchor = new GPoint(9, 2);
        icon.infoShadowAnchor = new GPoint(18, 25);
        function createMarker(point, text, type) {

                if(type == "CAFE"){ icon.image = "/image/marker/marker1.png"; }
                if(type == "DIARY"){ icon.image = "/image/marker/marker2.png"; }
                if(type == "ITEM"){ icon.image = "/image/marker/marker3.png"; }
                if(type == "NEWS"){ icon.image = "/image/marker/marker4.png"; }
                if(type == "SHOP"){ icon.image = "/image/marker/marker5.png"; }

                var marker = new GMarker(point, icon);
                var html = "<div class=\"info\">" + text + "</div>";
                GEvent.addListener(marker, "click", function() {
                marker.openInfoWindowHtml(html);
                });

                return marker;
        }


        var request = GXmlHttp.create();
        request.open("GET", "mark.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, markers[i].firstChild.nodeValue, markers[i].getAttribute("type") );
                                map.addOverlay(marker);
                        }
                }
        }
        request.send(null);