ストリートビュー

ストリートビューの表示

Google Maps APIでストリートビューの切り替えは、MapOptions.streetViewControl=true/falseの変更で簡単にできます。

ナビゲーションコントロールの下にストリートビューのストリートビュー人形マークが表示されますので、それを地図上にドラッグ＆ドロップをすることでストリートビューが表示されます。

プロパティ	タイプ	説明
streetView	StreetViewPanorama	ストリートビューでペグマンが地図上にドロップされたときに表示する、StreetViewPanorama。パノラマが指定されていない場合、ペグマンがドロップされるとデフォルトの StreetViewPanorama が地図のキャンパス(div要素)に表示されます。
streetViewControl	boolean	ストリートビューでペグマンコントロールの有効/無効の初期状態。

StreetViewPanorama クラス指定された LatLng またはパノラマ ID のパノラマを表示します。StreetViewPanorama オブジェクトはストリートビューの「ビューア」を提供し、これは別の内でスタンドアロンにすることも、Map にバインドすることもできます。このクラスは MVCObject を拡張します。

コンストラクタ	説明
StreetViewPanorama(container:Node, opts?:StreetViewPanoramaOptions)	渡された StreetViewPanoramaOptions でパノラマを作成します。

var data = new Array(); 
var opts = {
  zoom: 15,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  streetview : true
}

サンプルコード

サンプル.js

function initialize() {
  var latlng = new google.maps.LatLng(35.658425,139.737254);
  var opts = {
    zoom: 12,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    streetview : true
  };
  var map = new google.maps.Map
  (document.getElementById("map_canvas"),opts);
}

サンプル.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps JavaScript API ストリートビューを表示</title>
<style>
p {line-height:180%}
.head-title {width:100%;background:#87ceeb;color:#fff;text-indent:8px;font-weight:700;line-height:180%}
</style>
<script
 src="https://maps.google.com/maps/api/js?key=APIキー"></script>
<script src="サンプル.js"></script>
</head>
<body onload="initialize()">
<div class="head-title">Google Maps APIを使ったサンプル。</div>
<p>ストリートビューを表示</p>
<div id="map_canvas" style="width:100%;height:300px"></div>
</body>
</html>

表示例　ストリートビューを表示

地図サンプルイメージ
ストリートビューを表示

サンプルイメージ地図は地理院タイル（標高タイル）を加工して作成

Google Maps サンプル　>　ストリートビューを表示

※リクエスト制限を設けてありますので1日の上限アクセス（割り当て）を超えた場合、サンプルが機能しないこともありますのでご了承ください。

視点の設定

ストリートビューでは視点を任意に動かすことができますが、スクリプト側でも指定することができます。

視点の設定はStreetViewPov オブジェクトを使用します。ストリートビューパノラマの位置での視点の向きを指定する、視点オブジェクト。視点は、角度、ピッチ、ズームで定義されます。設定可能なプロパティは3つです。

プロパティ	タイプ	説明
heading	number	真北に相対的な角度。真北は 0 度、東は 90 度、南は 180 度、西は 270 度です。
pitch	number	ストリートビュー車両に相対的な視点のピッチ（度）。90 度（真上）から -90 度（真下）の範囲です。
zoom	number	ズームレベル。レベル 0 は完全なズームアウトで、ズームインするとズームレベルが増加します。

var opts = {
position:center,
 pov: 
 {
 heading: 278.3,
 pitch:30,
 zoom:0
 }
}

サンプルコード

サンプル.js

function initialize() {
var center = new google.maps.LatLng(35.308191,139.487196);
var opts = {
position:center,
 pov: 
 {
 heading: 278.3,
 pitch:30,
 zoom:0
 }
};
var myPano = new google.maps.StreetViewPanorama
 (document.getElementById("pano"),opts);
myPano.setVisible(true);
}

サンプル.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps JavaScript API ストリートビュー 視点の設定</title>
<style>
p {line-height:180%}
.head-title {width:100%;background:#87ceeb;color:#fff;text-indent:8px;font-weight:700;line-height:180%}
</style>
<script
 src="https://maps.google.com/maps/api/js?key=APIキー"></script>
<script src="サンプル.js"></script>
</head>
<body onload="initialize()">
<div class="head-title">Google Maps APIを使ったサンプル。</div>
<p>ストリートビューを表示 視点の設定</p>
<div id="pano" style="width:100%;height:300px"></div>
</body>
</html>

表示例　ストリートビューを表示視点の設定

Google Maps サンプル　>　ストリートビュー視点の設定

※リクエスト制限を設けてありますので1日の上限アクセス（割り当て）を超えた場合、サンプルが機能しないこともありますのでご了承ください。

ストリートビュー