google mapをローカル開発環境で表示させるには？

数日前にGoogle mapがローカルの開発環境で表示できなくなり、ハマったのでその備忘録です。原因はGoogle map APIの仕様変更でした。

対策としてGoogle APIs ManagerでAPIキーの生成と、呼び出し元のサイトをリファラとして設定したら、上手く表示できました。ローカル開発中にgoogle mapを表示させたい時にはリファラにlocalhost:xxxx/hoge/*など指定すれば良さそうです。

photo by Mr. Alex Garcia - Double Cliche on flickr

Google API Expertが解説する Google Maps APIプログラミングガイド

  Amazonでレビューを見る

目次

エラー表示された内容

表示されるエラー表示はこの2通りだと思います。

エラーが発生しました。
このページでは Google マップが正しく読み込まれませんでした。JavaScript コンソールで技術情報をご確認ください。

というようなメッセージです。コンソールでは以下のようなエラーが出ています。

ケース１：APIキーを指定していない

google map apiのクエリにkeyを渡していない場合には、APIキーが必要だと怒られます。

1
2

js?v=3.exp&callback=makeMaps:35 Google Maps API error: MissingKeyMapError
Google Maps API warning: NoApiKeys

ケース2：APIキーを指定している

仮に、キーを指定しても後述するGoogle APIs Managerでリファラを登録していないと、apiの実行を拒否されます。

1

Google Maps API error: RefererNotAllowedMapError

原因：Google Map APIが仕様変更された

2016年6月22日からgoogle map apiの仕様が変更されて、apiキー無しでは表示できなくなりました。普段ローカルで問題なく表示できたサイトも、今後はエラーを吐いて表示できなくなるようです。

Building for Scale: Updates to Google Maps APIs Standard Plan
http://googlegeodevelopers.blogspot.jp/2016/06/building-for-scale-updates-to-google.html

そして、無料でAPIを叩ける範囲もプラットフォームに応じて一定数に制限されています。それ以上はGoogle APIsにクレジットカードを登録して、有料の範囲で使用することになります。

Google Maps API 価格とプラン
https://developers.google.com/maps/pricing-and-plans/?hl=ja

対策：APIキーの取得とリファラの設定

以下のようにGoogle APIs ManagerでAPIキーの生成と、呼び出し元のサイトをリファラとして設定していきます。

また冒頭でも触れましたが、ローカル開発中にgoogle mapを表示させたい場合には、リファラにlocalhost:xxxx/hoge/*と指定すれば開発環境でも表示できるようです。ただし、localhost:xxxx/のように指定するとAPIキーを知ってる人ならば何処でもAPIが実行できてしまうので、注意が必要です。

これって安全ではないような…。より安全な方法をご存知の方がいらっしゃいまいたら是非アドバイスをお願いします^^;

APIs Managerに入る

まずは、以下に従ってjavascript apiキーを取得します。
https://developers.google.com/maps/documentation/javascript/get-api-key

そして、以下からGoogle APIs Managerに入りましょう。
https://console.developers.google.com/

プロジェクトを作成していない場合は新規で作成します。

次にAPI Managerから認証情報を作成を選択し、APIを作成します。

次に、API実行を受け付けるリファラを指定し、作成を押します。ローカル環境で表示したい場合はlocalhost等もリファラとして追加指定します。

APIキーが生成されるので、Google map apiを呼び出す時に使用します。

Google map apiの呼び出し方

普段通り、google mapのjsファイルをサイトの中で読み込みます。これは従来と変わりません。

1
2

<script src="https://maps.googleapis.com/maps/api/js?key=(取得したAPIキー)"
  type="text/javascript"></script>

以上のような流れで上手くいきました！突然の出来事でバタバタしましたが、これで暫くは使えそうです。

Google Maps JavaScript API V3 入門マスター

  Amazonでレビューを見る