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

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

(1)サンプルコード
デモ表示へ
 
①HTML本文

<div ng-controller="MyCtrl">
<div class="row">
  <div class="col-sm-6">
    <google-map 
      id="map-canvas"
      center="map.center"
      zoom="map.zoom"
      draggable="true"
      options="map.options"
      control="map.control"
      events="map.events"
    >
    </google-map>
  </div>
  <div class="col-sm-6">
  <div id="pano" style=" height: 400px;"></div>
  </div>
</div>
</div>

②スクリプト(js/map15.js)

var mapApp = angular.module('googleMapApp', ['google-maps','ui.bootstrap']);

mapApp.controller("MyCtrl", function ($scope) {
  angular.extend($scope, {
  map: {
      center: {
        latitude: 35.681382,
        longitude: 139.766084
      },
      options: {
        maxZoom: 20,
        minZoom: 3
      },
      zoom: 15,
      control: {},
      events: { 
        projection_changed: function (map, eventName, originalEventArgs) {
          var Tokyo = new google.maps.LatLng($scope.map.center.latitude, $scope.map.center.longitude);
          var panoramaOptions = {
            position: Tokyo,
            pov: {
              heading: 30,
              pitch: 5,
              zoom: 2
            }
          };
          var panorama = new  google.maps.StreetViewPanorama(document.getElementById('pano'),panoramaOptions);
          map.setStreetView(panorama);
        }
      }
  }
  });
});

③CSS

@import url('bootstrap/css/bootstrap.css');
.angular-google-map-container {
  height: 400px;
}

(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マップの他の記事の目次

関連記事の目次

コメントを残す

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