AngularJSを使ってGoogleマップ(15)地図とストリートビューを並べて表示

地図とストリートビューを並列に並べて表示するサンプルコードを作成しました。

(1)サンプルコード


 
デモ表示へ
 

(2)サンプルコードの内容


 
1)ストリートビュー画像の表示
 
ストリートビュー画像は、StreetViewPanorama オブジェクトを使って表示します。
 
var panorama = new google.maps.StreetViewPanorama(document.getElementById(‘pano’),panoramaOptions);
map.setStreetView(panorama);
 
2)projection_changedイベント
 
上記1)で示したようにストリートビューを表示するには、GoogleマップのmapオブジェクトのsetStreetViewメソッドを実行する必要があります。
 
projection_changedイベントは、地図が表示される際に一度発行されるようなので、このイベント発行時に上記1)を実行させます。
参考サイト
 
マップイベント projection_changedとは?
 
AngularJS、Googleマップの他の記事の目次

関連記事の目次

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください