AngularJSを使ってGoogleマップ(1)google-mapディレクティブを使って地図を表示

AngularJSを使ってGoogleマップを表示する方法についてです。

WordPressの投稿本文にGoogleマップを表示するために必要な環境設定については下記記事を参照下さい。

  • WordPressでAngularJSを使ったGoogleマップを使えるようにする
  •  
    今回は、東京駅周辺の地図を表示し、Googleマップの下記設定の仕方についてまとめました。
     
    ・地図のズームを指定
    ・地図のコントロールアイコン(移動、ズーム、ストリートビューなど)の表示
    ・地図のタイプ(ロードマップ、航空写真、地形など)
     

    (1)サンプルコード


     
    ①HTML本文

    <script type='text/javascript' src='http://www.example.com/wp/wp-content/themes/testtm/js/map1.js'></script>
    <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" bounds="map.bounds" events="map.events" options="map.options" control="map.control">
          </google-map>
        </div>
        <div class="col-sm-6">
        </div>
      </div>
    </div>
    

    ②スクリプト(js/map1.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
          },
          zoom: 14,
          bounds: {},
          events: {},
          options: {
            panControl: true,
            zoomControl: true,
            mapTypeControl: true,
            scaleControl: true,
            streetViewControl: true,
            overviewMapControl: true,
            rotateControl: true,
            maxZoom: 20,
            minZoom: 10,
            mapTypeId: google.maps.MapTypeId.TERRAIN
          }
        }
      });
    });
    

    ③CSS

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

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


     
    1)依存性の設定(スクリプト)
     
    var mapApp = angular.module(‘googleMapApp’, [‘google-maps’,’ui.bootstrap’]);
     
    上記コードで下記を設定しています。
     
    ①モジュール名:’googleMapApp’

    HTMLの<html ng-app=”googleMapApp”>と対応。
     
    ②このAngularJSのコードが依存するモジュール
     
    ここでは、Googleマップのモジュールとangular-ui-bootstrapモジュールを使用しているのでここで依存性を設定します。
     
    2)コントローラで地図の属性を設定(スクリプト)
     
    ①コントローラ名:”MyCtrl”
     
    HTMLの<div ng-controller=”MyCtrl”>と対応。
     
    ②地図の中心、ズームの初期値を設定(スクリプト)
     
    map.center、map.zoomで設定しています。
     
    ③マップオプションでマップタイプを設定(スクリプト)
     
    map.mapTypeIdで設定しています。
     
    サンプルコードでは、”TERRAIN”を指定しています。下記マップタイプがあります。
     
    ・ROADMAP
    Googleマップの通常のデフォルト。2Dタイル上で表示される。
     
    ・SATELLITE
    航空写真
     
    ・HYBRID
    航空写真で主要な対象物(道路、地名、建物)の名称が表示される。
     
    ・TERRAIN
    物理的な起伏を示すタイルで、高度や水系の対象物(山、河川など)を表示。山では等高線が表示。
     
    ④マップオプションでコントロールの表示有無を設定(スクリプト)
     
    下記コントロールのリンク、アイコンを地図上に表示するか設定します。
     
    ・panControl
    東西南北の矢印のリンクで地図を移動するボタンが表示
     
    ・zoomControl
    ズームを変更するスライダまたは+ボタンが表示される。
     
    ・mapTypeControl
    ROADMAPやSATELLITEなどのマップタイプを切り替えるチェックボックスを表示
     
    ・scaleControl
    地図のスケール(距離)を示す要素が表示
     
    ・streetViewControl
    ペグマンアイコン(人の形をしたアイコン)を地図上にドラッグして、ストリートビューを有効にする
     
    ・overviewMapControl
    広い領域内での現在の地図のビューポートを示すサムネイル概観マップ
     
    ・rotateControl
    傾斜の付いた画像を持つ地図を回転
     
     
    ※マップタイプ、コントロール以外のマップオプションは下記参照
    https://developers.google.com/maps/documentation/javascript/reference#MapOptions
     
    3)HTMLに<google-map>タグを記述し、スクリプトと連携させる。
     
    ここでは、地図上をドラッグして地図を移動できるようにするためdraggable=”true”を指定しています。それ以外の属性はスクリプトと連携して反映させています。
     
    4)HTMLのレイアウト
     
    ブートストラップ3のグリッドを使ってレイアウトしています。2カラム構成で左のカラムに地図を表示するように設定しています。

    関連記事の目次

    コメントを残す

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