なお、本連載では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
基本的な地図を表示する
まずは、基本的なマップを有効化してみましょう。
<!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）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
}
};
});
}]);
.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>要素で利用できる主な属性は、以下の通りです。
| 属性 | 概要 |
|---|---|
| center | 地図の中心座標（latitude：緯度、longitude：経度） |
| zoom | 拡大率（1～20） |
| options | 地図オプション |
これらの情報はスコープオブジェクトのプロパティとして宣言しています（5）。この際、uiGmapGoogleApi.thenメソッドの配下でスコープオブジェクトを操作している点に注目してください。thenメソッドは、Google Maps APIがロードされた後で配下のコードを実行しなさい、という意味です。thenメソッドの配下でないと、google.maps.MapTypeId.ROADMAPのような定数は認識できませんので、注意してください。
options－mapTypeIdパラメーターは地図の種類を表します。ROADMAP（通常の地図）、SATELLITE（衛星地図）、HYBRID（双方）などを指定できます。
