マッピィ

ストリートビュー

ストリートビューの表示

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

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

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

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つです。

プロパティタイプ説明
headingnumber真北に相対的な角度。真北は 0 度、東は 90 度、南は 180 度、西は 270 度です。
pitchnumberストリートビュー車両に相対的な視点のピッチ(度)。90 度(真上)から -90 度(真下)の範囲です。
zoomnumberズーム レベル。レベル 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日の上限アクセス(割り当て)を超えた場合、サンプルが機能しないこともありますのでご了承ください。

ページトップ