カテゴリー
未分類

Google Maps JavaScript API v3によるストリートビューの設置

一般的なストリートビューの設置にはStreet View containersを使う

まずindex.htmlというファイルを作成し、必要なライブラリを読み込んだ後、ストリートビューの描画エリアを定義する。

# index.html
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="street-view.js"></script>
<div id="map-canvas" style="width: 400px; height: 400px;"></div>

google.maps.LatLng()で座標を指定し、panoramaOptionsでパノラマビューの角度や向きを設定できる。

# map-canvas.js
function initialize() {
var bryantPark = new google.maps.LatLng(37.869260, -122.254811);
var panoramaOptions = {
position: bryantPark,
pov: {
heading: 165,
pitch: 0
},
zoom: 1
};
var myPano = new google.maps.StreetViewPanorama(
document.getElementById('map-canvas'),
panoramaOptions);
myPano.setVisible(true);
}

Street View eventsではリアルタイムでストリートビューの数値を取得する例が紹介されている。

Google Street View Image APIJavaScriptを使用せず、ストリートビューを画像で出力する。単なる画像のためユーザーによるコントロールはできないが、JavaScriptを使用できない環境でもストリートビューの資源を活用できる。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA