ストリートビュー（streetview）だけを表示する

スポンサードリンク

ストリートビュー（streetview）だけを表示する

Posted by 管理人 on 2011年2月27日 Leave a comment (0) Go to comments

◆ Google Maps API v3 / ストリートビュー（streetview）だけを表示する

ストリートビュー（streetview）もＶ3で試していきます。残念なのは、iPhone（アイフォン）ではまだ見れないようですね。

ちょいといじって気がついたのが、ズームレベルが増えていたり、ピッチの設定が逆？になっていたことでしょうか。上向きが正の値になりますね。

それでは、基本から徐々に勉強していきます。

最初は、ともかくストリートビュー（streetview）表示するだけのサンプルについてです。基本は大事ですからね。

google先生のサンプルデモからもっともシンプルなストリートビューのソースは次のようになっています。StreetViewPanoramaOptionsは今回、positionとpovだけですが、まだまだいろいろありますので今後試していきたいと思いますが、日本語版は英文版よりプロパティの説明が抜けていますので、英文版を参考とした方がいいでしょう。

ソースは、次のようになっています。キーは、streetViewPanoramaOptions、StreetViewPovの指定、そしてStreetViewPanoramaクラスの指定です。

ソース末尾のsetVisible(true);を指定しないと表示されません。また、ストリートビューを表示するdivタグも、<div id=”pano” >としただけでは、当然表示されません。width、heightをタグ内で次のように指定するかcss外部ファイルに記述しておきましょう。</div><div id=”pano” style=”width: 960px; height: 600px”></div>

function initialize()

{

var center = new google.maps.LatLng(35.70960950,139.81388658);　//初期表示座標

var panoramaOptions = 　//StreetViewPanoramaOptions オブジェクトの仕様

{

position:center,

pov: //StreetViewPov オブジェクトの仕様

{

heading: 278.3,　//真北は 0 度、東は 90 度、南は 180 度、西は 270 度

pitch:30,　//ストリートビュー車両に相対的なカメラのピッチ（度）。90 度（真上）から -90 度（真下）の範囲

zoom:0　//0から5？までの指定が出来ます。

}

};

var myPano = new google.maps.StreetViewPanorama(document.getElementById(“pano”), panoramaOptions);

myPano.setVisible(true);//StreetViewPanorama クラス

}

window.onload = initialize;