Google マップのストリートビューを実装してみました。
ソースはこんな感じ↓↓で、意外と簡単に実装できました。
<!DOCTYPE html>
<html lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script language="JavaScript">
function view_load(){
//都庁周辺のストリートビューを表示してみます
var latlng = new google.maps.LatLng(35.690551, 139.69257);
//ストリートビューを表示
var viewOptions = {
position:latlng,
pov: {
heading: 190,
pitch: 30,
zoom: 0
}
};
var view = new google.maps.StreetViewPanorama(document.getElementById("street_view"), viewOptions);
view.setVisible(true);
}
</script>
</head>
<body onload="view_load();">
<div id="street_view" style="width:450px;height:350px;"></div>
</body>
</html>
ストリートビューは、StreetViewPanoramaクラスを使って表示させます。
まず、パノラマのオプションを設定してやります。
viewOptions = { ～
の部分です。
headingは「方角」
pitchは「カメラの向き」
zoomは「ズーム」
を設定してやります。
※プロパティは他にもいろいろあるので調べてみてください。
この辺は調整しながら最適の値を設定してやってください。
で、
あとは
var view = new google.maps.StreetViewPanorama(document.getElementById("street_view"), viewOptions);
view.setVisible(true);
としてやれば、
都庁周辺のストリートビューを表示してくれます。
因みに、日本にはまだまだストリートビューに対応していない地域もあります。
その場合には、getPanoramaByLocation()メソッドを使って適切に処理をしてやってください。
その説明は以下になります。
[ getPanoramaByLocation()メソッド ]
