Google Maps API v3でストリートビューを表示させるには、MapOptions.streetViewControl=trueにするだけで簡単にできます。
ナビゲーションコントロールの下にストリートビューの 人形マークが表示されますので、それを地図上にドラッグ&ドロップをすることでストリートビューが表示されます。
表示例 ストリートビュー
プロパティ | タイプ | 説明 |
---|---|---|
streetView | StreetViewPanorama | ストリートビューでペグマンが地図上にドロップされたときに表示する、StreetViewPanorama。パノラマが指定されていない場合、ペグマンがドロップされるとデフォルトの StreetViewPanorama が地図の div に表示されます。 |
streetViewControl | boolean | ストリートビューでペグマン コントロールの有効/無効の初期状態。 |
コンストラクタ | 説明 |
---|---|
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);
}
<!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>