{GoogleMapsAPI: 'JavaScript API V3', Title: 'show streetview event', Level: 6}

google Maps JavaScript

　流石に開始タイミングでstreetviewが空白ってものいただけないので
表示出来るポイントにLatLng位置を調整したい。


　かと言って、streetviewが何処なら表示できるかなんて
GoogleMapさんに聞かないと解る訳ない＞＜


　って、ことで聞きましょうか＾＾；

イメージ

top.html

<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; float: left"></div>
        <!-- <div id="pano_canvas" style="position:absolute; left:410px; top: 8px; width: 400px; height: 300px;"></div> -->
        <div id="pano_canvas" style="width: 400px; height: 300px; float: left"></div>
        <div id="pano_infoview" style="width: 400px; height: 300 px; float: left">
            <table>
                <tr>
                    <td><b>Position</b></td><td id="position_cell">&nbsp;</td>
                </tr>
                <tr>
                    <td><b>POV Heading</b></td><td id="heading_cell">270</td>
                </tr>
                <tr>
                    <td><b>POV Pitch</b></td><td id="pitch_cell">0.0</td>
                </tr>
                <tr>
                    <td><b>Pano ID</b></td><td id="pano_cell">&nbsp;</td>
                </tr>
                <table id="links_table">
                </table>
            </table>
        </div>
    </body>
</html>

hello_maps.js

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);
        }
    });
    //EventListener
    google.maps.event.addListener(panorama, 'pano_changed', function() {
        var panoCell = document.getElementById('pano_cell');
        panoCell.innerHTML = panorama.getPano();
    });

    google.maps.event.addListener(panorama, 'links_changed', function() {
        var linksTable = document.getElementById('links_table');
        while(linksTable.hasChildNodes()) {
            linksTable.removeChild(linksTable.lastChild);
        };
        var links =  panorama.getLinks();
        for (var i in links) {
            var row = document.createElement("tr");
            linksTable.appendChild(row);
            var labelCell = document.createElement("td");
            labelCell.innerHTML = "<b>Link: " + i + "</b>";
            var valueCell = document.createElement("td");
            valueCell.innerHTML = links[i].description;
            linksTable.appendChild(labelCell);
            linksTable.appendChild(valueCell);
        }
    });

    google.maps.event.addListener(panorama, 'position_changed', function() {
        var positionCell = document.getElementById('position_cell');
        positionCell.firstChild.nodeValue = panorama.getPosition();
    });

    google.maps.event.addListener(panorama, 'pov_changed', function() {
        var headingCell = document.getElementById('heading_cell');
        var pitchCell = document.getElementById('pitch_cell');
        headingCell.firstChild.nodeValue = panorama.getPov().heading;
        pitchCell.firstChild.nodeValue = panorama.getPov().pitch;
    });
}

　ほい＞＜
で、GoogleMpaさん曰く


京都駅の八条西口前はgoogle.maps.LatLng(34.984006, 135.75825499999996)ですね＾＾；