[GMaps API v3] ストリートビューを使う。

ストリートビュー、２７市町村も対象に　グーグル　群馬

グーグルグッジョブ! (￣∇￣ﾉﾉ”ﾊﾟﾁﾊﾟﾁﾊﾟﾁ!!

これまでは「ストビューなんて使えるのは、所詮一部の都会人だけ」と手を出さずに拗ねていましたが、これから心を入れ替えて勉強しようと思います。

とりあえず基本から。

<!DOCTYPE HTML>
<html>
<head>
<title>GMap Streetview example</title>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="index.js"></script>

</head>
<body onload="initialize()">
<h2>GMap Streetview API　テスト </h2>
<div>
    <div id="map_canvas" style="float:left;width: 400px; height: 300px"></div>
    <div id="pano" style="width: 400px; height: 300px;"></div>
</div>
    <div id="panoInfo" style="width: 425px; height: 240 px;">
        <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>
        </table>
    </div>
    <input id="address" type="textbox" value="群馬県前橋市">
    <input type="button" value="検索" onclick="addressSearch()">

</body>
</html>

<!DOCTYPE HTML>

<html>

<head>

<title>GMap Streetview example</title>

</head>

<h2>GMap Streetview API　テスト </h2>

<div>

</div>

<table>

<tr>

<td><b>Position</b></td><td id="position_cell"> </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>

</table>

</div>

</body>

</html>

var map;
var geocoder = new google.maps.Geocoder();
var sv = new google.maps.StreetViewService();
var panorama;

    
function initialize() {
    defPos = new google.maps.LatLng(36.322161, 139.00613099999998);
    
    //地図初期化 
    var mapOptions = {
        center: defPos,
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

    //ストリートビュー初期化
    var panoramaOptions = {
        position: defPos,
        pov: {
            heading: 44,
            pitch: 13
        }
    };  
    panorama = new  google.maps.StreetViewPanorama(document.getElementById('pano'),panoramaOptions);
    map.setStreetView(panorama);
      
  
  
    //ストリートビューにeventListener登録
    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;
    });     
}

//検索
function addressSearch(){    
    var address = document.getElementById('address').value;    
    geocoder.geocode({ 'address': address}, function(results, status){
        if(status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location); //地図移動
            
            sv.getPanoramaByLocation(    //指定された軽度緯度上にストリートビューが存在するかチェック
                results[0].geometry.location,
                500, //検索範囲(m)
                function(svData,svStatus){
                    if(svStatus == google.maps.StreetViewStatus.OK){
                        panorama.setPosition(svData.location.latLng);    //ストリートビュー移動                        
                    }else{
                        alert("ストリートビュー対象外の地域です。")
                    };
                }
            );
        } else {
             alert('座標の取得に失敗しました: ' + status);
        }
    });
}

var map;

var geocoder = new google.maps.Geocoder();

var sv = new google.maps.StreetViewService();

var panorama;

function initialize() {

defPos = new google.maps.LatLng(36.322161, 139.00613099999998);

//地図初期化

var mapOptions = {

center: defPos,

zoom: 14,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

//ストリートビュー初期化

var panoramaOptions = {

position: defPos,

pov: {

heading: 44,

pitch: 13

}

};

panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'),panoramaOptions);

map.setStreetView(panorama);

//ストリートビューにeventListener登録

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;

});

}

//検索

function addressSearch(){

var address = document.getElementById('address').value;

geocoder.geocode({ 'address': address}, function(results, status){

if(status == google.maps.GeocoderStatus.OK) {

map.setCenter(results[0].geometry.location); //地図移動

sv.getPanoramaByLocation( //指定された軽度緯度上にストリートビューが存在するかチェック

results[0].geometry.location,

500, //検索範囲(m)

function(svData,svStatus){

if(svStatus == google.maps.StreetViewStatus.OK){

panorama.setPosition(svData.location.latLng); //ストリートビュー移動

}else{

alert("ストリートビュー対象外の地域です。")

};

}

);

} else {

alert('座標の取得に失敗しました: ' + status);

}

});

}

example

投稿者: shimizu