AngularJSを使ってGoogleマップ(6)交通レイヤを表示する方法

交通レイヤはlayerタグを使って表示する事が出来ます。

(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"
      >
        <layer type="TrafficLayer" show="map.showTraffic"></layer>
      </google-map>
    </div>
    <div class="col-sm-6">
    </div>
  </div>
</div>

②スクリプト(js/map6.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: 16,
      showTraffic: true,
    }
  });
});

③CSS

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

(2)サンプルコードの内容
 
layerタグに下記属性を設定するだけで表示する事が出来ます。
 
・type
“TrafficLayer”
 
・show
指定したレイヤの表示、非表示を設定
 
AngularJS、Googleマップの他の記事の目次

関連記事の目次

コメントを残す

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