• 小
  • 中
  • 大

ストリートビューの表示

Google Maps API v3でストリートビューを表示させるには、MapOptions.streetViewControl=trueにするだけで簡単にできます。
ナビゲーションコントロールの下にストリートビューの ストリートビュー人形マーク 人形マークが表示されますので、それを地図上にドラッグ＆ドロップをすることでストリートビューが表示されます。

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

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

StreetViewPanorama クラス指定された LatLng またはパノラマ ID のパノラマを表示します。StreetViewPanorama オブジェクトはストリートビューの「ビューア」を提供し、これは別の <div> 内でスタンドアロンにすることも、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 "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps v3 JavaScript API サンプル</title>
<script type="text/javascript"
      src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="サンプル.js" type="text/javascript"></script>
</head>
<body onload="initialize()">
<p>Google Maps v3 APIを使ったサンプル。</p>
<div id="map_canvas" style="width:500px; height:300px"></div>
</body>
</html>


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


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