WebサイトにGoogleマップを埋め込む（angular-google-maps）
AngularJSフレームワークを利用したWebサイトでGoogleマップを表示する方法です。表示するためのライブラリはいくつかあるようですが、今回は「angular-google-maps」を使います。
目次
- 必要なもの
- コード
- 動作確認
- 警告やエラーについて
- 「angular-google-maps」利用時の注意点
必要なもの
angular-google-maps以外に以下のライブラリが必要です。
こちらのサイトにクイックスタートやAPIについて掲載されています。インストールについては上記リンク先のサイトで確認してください。
なお、google maps sdkもこちらでダウンロードして読み込んでおかないといけないと思っていましたが、最終的には不要でしたので、以下の記述はいりません。（あっても動きます）
<script src='//maps.googleapis.com/maps/api/js?key=YOUR_API_ID'></script>
コード
以下、使ってみた際のコードになります。今回のライブラリに関係ない箇所については極力削除しているので、適宜、補完して下さい。
◆index.html
<!doctype html>
<html ng-app="myApp">
<head>
...
<style type="text/css">
.angular-google-map-container { height: 400px; }
</style>
</head>
<body ng-controller="exampleCtrl">
<ui-gmap-google-map center="map.center" zoom="map.zoom" options="map.options" ng-if="map">
</ui-gmap-google-map>
<script src="lib/angular.min.js"></script>
<script src="lib/lodash.min.js"></script>
<script src="lib/angular-simple-logger.min.js"></script>
<script src="lib/angular-google-maps.min.js"></script>
<script src="scripts/app.js"></script>
</body>
</html>
nodejsやbowerで各ライブラリをインストールしている場合は、外部スクリプトの参照先ディレクトリ（上記で「lib」としている箇所）は異なります。今回はそういったパッケージ管理やビルドツールを使っていない構築済みのサイトに対してGoogleマップの機能を追加したかったので、GitHubやCDNから直接落としてきたものを配置しています。
「ng-if="map"」については、データがセットされる前に読み込まれたのか、設定しておかないと私の環境ではエラーが出てサイトが表示されなくなりました。不要なら削除してください。
◆app.js
var myApp = angular.module('myApp', ['uiGmapgoogle-maps']);
myApp.config(function (uiGmapGoogleMapApiProvider) {
uiGmapGoogleMapApiProvider.configure({
v: '3.28',
language:'ja',
key: 'YOUR_API_KEY'
});
});
myApp.controller('exampleCtrl', function ($scope, uiGmapGoogleMapApi) {
uiGmapGoogleMapApi.then(function(maps) {
$scope.map = {
center: { latitude: 35.681167, longitude: 139.767052 },
zoom: 15,
options: {
mapTypeId: google.maps.MapTypeId.ROADMAP
}
};
});
});
動作確認
警告やエラーについて
以下、ライブラリ使用時にコンソールに出力された警告やエラーの一覧です。
util.js:215 Google Maps API warning: NoApiKeys
google map sdkを読み込む時にAPIキーが設定されていない場合に出力されます。SDKを利用するためにはAPIキーが必要です。昔は不要だったらしく今回もなくても表示はされましたが、利用時のAPIキーは必須になっているようなので、持っていない場合は取得しましょう。詳しくはこちら（キーの取得、認証 | Google Maps JavaScript API | Google Developers）を参照。
Google Maps API warning: SensorNotRequired
google map apiについて掲載している記事を漁っていたら、scriptタグでsdkライブラリを読み込む際のクエリストリングに「?sensor=false」といったパラメータが付加されていましたが、現在は不要になったみたいです。
Google Maps API warning: RetiredVersion
廃止されたgoogle map sdkバージョンを利用しようとしていた場合に出力されます。可能なら新しいバージョンを使いましょう。
js?key=YOUR_API_KEY:35 Google Maps API error: RefererNotAllowedMapError
APIキーに対してアクセス制限を設定していて、その制限に該当しない場合に出力されるエラーです。上記のエラーが出力された場合、Googleマップは表示されません。
なお、他のサイトで自分のAPIキーが利用されたら困るので、最終的にはリファラの制限は行いましょう。
上記以外のメッセージについては、こちら（エラー メッセージ | Google Maps JavaScript API | Google Developers）で確認して下さい。
「angular-google-maps」利用時の注意点
最後にライブラリ利用時の注意点についてです。
angular-google-mapsのリンク先のページに飛ぶと分かりますが、積極的にはメンテンスしないと書かれていて（2017年6月現在）、代替案として別のライブラリが紹介されています。
Googleマップのバージョンアップで使えなくなる可能性もありそうなので、その辺は注意が必要かもしれませんが、AngularJSのGoogleマップ用ライブラリとしてはよく利用されいているものっぽいので、問題があってから代替手段を考える方向でもいいのかな、と思います。