AngularJSアプリに地図を導入する - Angular Google Maps

AngularJSアプリ開発を支援する便利モジュール（12）

　AngularJSは、テンプレートエンジン、データバインディング、ルーティング、DIコンテナーなどなど、Webアプリのフロントエンドを開発するために必要な機能をあまねく揃えたフルスタックのフレームワークです。もっとも、本格的な開発ではそれだけで賄えるわけではなく、要件に応じて、周辺のモジュールと連携するのが一般的です。本連載では、AngularJSで利用できる拡張ライブラリを、具体的な利用例とともに紹介します。

　なお、本連載ではAngularJSそのものに関しては解説しませんので、専門書として『AngularJSアプリケーションプログラミング』、姉妹連載「AngularJSではじめるJavaScriptフレームワーク開発スタイル」などを併せて参照してください。

はじめに

　Googleマップと言えば、おそらくこの記事を読む人であれば知らない人はいないだろうと思われる、地図アプリの定番中の定番です。Google Maps APIと呼ばれるJavaScriptベースのAPIも用意されており、自作のアプリから地図を操作したり、挙動を自在にカスタマイズできる点も重宝される要因のひとつです。

　Angular Google Mapsは、このGoogle Maps APIのラッパーで、AngularJSのディレクティブ構文でGoogleマップを自前のアプリに組み込むことを可能にします。

対象読者

• AngularJSについて基本的な概念を理解している方
• AngularJSで利用できる拡張モジュールに興味がある方
• AngularJSアプリからGoogleマップを利用したい方

検証環境

　この記事では、以下の環境でサンプルの動作を確認しています。

• AngularJS 1.5.0
• Angular Google Maps 2.3.2
• Chrome 49
• Firefox 45
• Internet Explorer 11

　Angular Google Mapsは、Bowerを利用することで、以下のコマンドでインストールできます。

> bower install angular-google-maps

基本的な地図を表示する

　まずは、基本的なマップを有効化してみましょう。

リスト1　map.html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS</title>
<link rel="stylesheet" href="css/map.css" />
<!-- （1）各ライブラリをインポート -->
<script src="bower_components/lodash/dist/lodash.min.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-simple-logger/dist/angular-simple-logger.min.js"></script>
<script src="bower_components/angular-google-maps/dist/angular-google-maps.min.js"></script>
<script src="scripts/map.js"></script>
</head>
<body ng-controller="MyController">
<!-- （4）地図を表示 -->
<ui-gmap-google-map center="map.center" zoom="map.zoom" options="map.options">
</ui-gmap-google-map>
</body>
</html>

リスト2　map.js

// （2）uiGmapgoogle-mapsモジュールへの依存関係を設定
angular.module('myApp', [ 'uiGmapgoogle-maps' ])
  // （3）Google Maps APIをロード時の基本情報を設定
  .config(['uiGmapGoogleMapApiProvider', function(uiGmapGoogleMapApiProvider) {
    uiGmapGoogleMapApiProvider.configure({
      v: '3.22'
    });
  }])
  .controller('MyController', ['$scope', 'uiGmapGoogleMapApi',
    function($scope, uiGmapGoogleMapApi) {
      uiGmapGoogleMapApi.then(function(maps) {
        // （5）<ui-gmap-google-map>要素の属性情報
        $scope.map = {
          center: { latitude: 35.681382, longitude: 139.766084 },
          zoom: 12,
          options: {
            mapTypeId: google.maps.MapTypeId.HYBRID
          }
        };
      });
    }]);

リスト3　map.css

.angular-google-map-container {
  height: 400px;
  width: 600px;
}

東京駅を中心に地図を表示

　Angular Google Mapsを利用するには、Angular Google Maps本体のほか、lodash、angular-simple-loggerというライブラリが必要です。Angular Google Mapsに先立って、インポートしてください（1）。また、アプリモジュール（myApp）からuiGmapgoogle-mapsモジュールへの依存関係を設定しておきます（2）。

　configメソッドの配下では、uiGmapGoogleMapApiProviderプロバイダーのconfigureメソッドでGoogle Maps APIをロードする際の基本情報を指定しておきます（3）。ここでは最低限、vパラメーター（APIのバージョン）を宣言しておきます。

　基本的な地図を表示するのは、<ui-gmap-google-map>要素の役割です（4）。地図そのもののサイズなどは、スタイルシート（本書ではmap.css）で.angular-google-map-containerクラスに対して設定します。.angular-google-map-containerクラスは、<ui-gmap-google-map>要素によって生成された地図のコンテナー要素です。

　<ui-gmap-google-map>要素で利用できる主な属性は、以下の通りです。

<ui-gmap-google-map>要素の主な属性

属性	概要
center	地図の中心座標（latitude：緯度、longitude：経度）
zoom	拡大率（1～20）
options	地図オプション

　これらの情報はスコープオブジェクトのプロパティとして宣言しています（5）。この際、uiGmapGoogleApi.thenメソッドの配下でスコープオブジェクトを操作している点に注目してください。thenメソッドは、Google Maps APIがロードされた後で配下のコードを実行しなさい、という意味です。thenメソッドの配下でないと、google.maps.MapTypeId.ROADMAPのような定数は認識できませんので、注意してください。

　options－mapTypeIdパラメーターは地図の種類を表します。ROADMAP（通常の地図）、SATELLITE（衛星地図）、HYBRID（双方）などを指定できます。