地図とストリートビューを並列に並べて表示するサンプルコードを作成しました。
(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マップの他の記事の目次 関連記事の目次
- WordPressでAngularJSを使ったGoogleマップを使えるようにする
 - google-mapディレクティブを使って地図を表示
 - 地図上に複数のマーカーを表示する
 - マーカーをクリックして情報ウィンドウを表示
 - マーカーでイベントを処理
 - 重複して表示されるマーカーをクラスター化する方法
 - 交通レイヤを表示する方法
 - ルートサービスを使って簡単な徒歩ルートを表示する
 - 経由地を指定して徒歩ルートを表示する
 - ルート計算の結果をテキストでも表示する
 - ドラッグ可能なルートを表示し、結果をテキストでも表示
 - ルートサービスで表示するルートの線の色、太さを設定する方法
 - Fusionテーブルのデータを地図上にマーカーとして表示
 - 逆ジオコーディングで地図上クリックで住所を表示
 - ジオコーディングを使って入力した住所にマーカーを表示
 - 地図とストリートビューを並べて表示
 - クリックした地点のストリートビューを表示
 - 地図上にGoogleアドセンスの広告を表示
 - パノラミオ(Panoramio)の写真を表示
 - パノラミオ(Panoramio)の写真をタグでフィルタして表示
 - プレイスライブラリで店や施設を表示(1)nearbySearch
 - プレイスライブラリで店や施設を表示(2)テキスト検索
 - プレイスライブラリで店や施設を表示(3)詳細情報表示
 - 地図に独自のスタイルを設定
 - 地図上にラインを表示
 - プレイスライブラリで店や施設を表示(4)オートコンプリート
 
- WordPressでAngularJSを使ったGoogleマップを使えるようにする
 - google-mapディレクティブを使って地図を表示
 - 地図上に複数のマーカーを表示する
 - マーカーをクリックして情報ウィンドウを表示
 - マーカーでイベントを処理
 - 重複して表示されるマーカーをクラスター化する方法
 - 交通レイヤを表示する方法
 - ルートサービスを使って簡単な徒歩ルートを表示する
 - 経由地を指定して徒歩ルートを表示する
 - ルート計算の結果をテキストでも表示する
 - ドラッグ可能なルートを表示し、結果をテキストでも表示
 - ルートサービスで表示するルートの線の色、太さを設定する方法
 - Fusionテーブルのデータを地図上にマーカーとして表示
 - 逆ジオコーディングで地図上クリックで住所を表示
 - ジオコーディングを使って入力した住所にマーカーを表示
 - 地図とストリートビューを並べて表示
 - クリックした地点のストリートビューを表示
 - 地図上にGoogleアドセンスの広告を表示
 - パノラミオ(Panoramio)の写真を表示
 - パノラミオ(Panoramio)の写真をタグでフィルタして表示
 - プレイスライブラリで店や施設を表示(1)nearbySearch
 - プレイスライブラリで店や施設を表示(2)テキスト検索
 - プレイスライブラリで店や施設を表示(3)詳細情報表示
 - 地図に独自のスタイルを設定
 - 地図上にラインを表示
 - プレイスライブラリで店や施設を表示(4)オートコンプリート