10-07-21
Google Maps API version3を使ってみる（4）
demo
memo
作業内容
前回のGoogle Maps API version3を使ってみる（3）では、マーカーの複数表示やオリジナル画像設定について学びましたが、今回はストリートビューを用いた見せ方について調べてみたいと思います。
--- head内に設定等を記述 ---
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(33.593434606900864,130.37826418876648);
var myOptions = {
zoom: 17,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: true, //ストリートビューアイコンを追加
//地図タイプの切り替えボタン設定
mapTypeControl : true,
mapTypeControlOptions : {
style : google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var makerImg = 'img/100719/ico_marker.png';
var markerA = new google.maps.Marker({
position: new google.maps.LatLng(33.59232418300553,130.3789624214172),
map: map,
icon: makerImg,
title:"ここで書いてます"
});
var contentStringA =
'<h1>ここで書いています</h1>'+
'<p>福岡県福岡市中央区荒戸になります。<br />' +
'夜は暴走族と救急車がよく通ります。</p>';
var infowindowA = new google.maps.InfoWindow({
content: contentStringA,
size: new google.maps.Size(250, 100)
});
google.maps.event.addListener(markerA, 'click', function() {
infowindowA.open(map,markerA);
});
//ストリートビュー画面の表示設定
var panoramaOptions = {
position: new google.maps.LatLng(33.59434840578281,130.37745416164398),
pov: {
heading: 180, //東西南北の向き。0なら北、180なら南向き
pitch: 10, //上下の角度（90なら真上、-90なら真下を見ている）
zoom: 1 //ズームの度合い（0は最も広角）
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"),panoramaOptions);
map.setStreetView(panorama);
}
</script>
--- body内に記述 ---
<div id="map_canvas" style="width:335px; height:335px; float:left; margin-right:10px;"></div>
<div id="pano" style="width:335px; height:335px; float:left;"></div>長々とコードを書いておりますが、前回までに学んだマーカーの設定が大部分です。ストリートビューの機能を追加するだけならstreetViewControl: trueを1行追加するだけで可能です。demoのようにマップとストリートビューを同時に見せる場合は、コード内「//ストリートビュー画面の表示設定」以下を参照ください。