{GoogleMapsAPI: 'JavaScript API V3', Title: 'range map and streetview', Level: 5}

　で、mapとstreetviewを同時に表示したいので＾＾；

完成イメージ

地図とストリートビューの同時表示したいの

top.html

　ひとまずmapのフル画面でなく
mapとstreetviewを並べて表示に変更。

<html>
    <head>
        <title>Hello world in Google Maps API version3</title>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script src="http://www.google.com/jsapi"></script>
        <script>
            google.load("jquery", "1.5.0");
            google.load("jqueryui", "1.8.9");
        </script>
        <script type="text/javascript" src="hello_maps.js" charset=UTF-8></script>
    </head>
    <body onload="initialize()">
        <div id="map_canvas" style="width: 400px; height: 300px"></div>
        <div id="pano_canvas" style="position:absolute; left:410px; top: 8px; width: 400px; height: 300px;"></div>
    </body>
</html>

hello_maps.js

　ズーム倍率変更、
Panorama追加、
Geocodeの結果をPanoramaにも設定*1。

　京都駅が、streetviewの表示できるポイントでな無いためか
streetview画面が表示されていないｗ；

　けど、mapのstreetviewcontrolアイコンを表示できるポイントに配置すれば
表示されてるので、ひとまず無視。

function initialize() {
    var centerPos = new google.maps.LatLng(42.345573,-71.098326);
    var mapOptions = {
        zoom : 16,//18
        center : centerPos,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        streetViewControl: true
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    //Panorama
    var panoramaOptions = {
        position: centerPos,
        pov: {
            heading: 34,
            pitch: 10,
            zoom: 1
        }
    };
    var panorama = new  google.maps.StreetViewPanorama(document.getElementById("pano_canvas"), panoramaOptions);
    map.setStreetView(panorama);
    //Geocode
    var geocoder = new google.maps.Geocoder();
    var address = 'kyotoeki';
    geocoder.geocode( {
        'address': address
    }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);         // map set latlng
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });
            panorama.setPosition(results[0].geometry.location);  // streetview set latlng
        } else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });
}

*1:panorama.setPosition(latlng)部分。まあ動作してないので、これが正しいのかどうかは知らないｗ；