Google Mapsを利用するためのGoogle APIキー取得方法まとめ

Google

2016.06.26

2016年6月22日からGoogle Mapsの表示にGoogle APIキーが必要になりました。

今まではAPIキーなしでもGoogle Mapsを表示できていたのですが、2016年6月22日以降に新規に作成したサイト（URL）は、APIキーがないとエラーになって地図が表示されなくなります。

6月22日より前に作成したGoogle Mapsは現在の所、APIキーなしでも利用できるようですが、今後いつ必要になるか分かりませんので、今回はGoogle APIキーを新たに取得する方法をまとめました。

Google APIキーを取得するにはGoogle アカウントでログインしておく必要があります。

Google Maps APIの地図でエラーが発生する場合
Google APIキーの取得
Google API コンソールでプロジェクト作成
Google API Managerでキーの作成
1. ワイルドカードについて
2. Google APIキーの発行
Google APIキーの利用方法

Google Maps APIの地図でエラーが発生する場合

2016年6月22日以降、Google Maps APIを利用した地図で「エラーが発生しました。このページではGoogle マップが正しく読み込まれませんでした。JavaScriptコンソールで技術情報をご確認ください」というエラーが表示される場合は、Google APIキーの利用が必要になります。

Google APIキーの取得

まずは以下のGoogle Maps APIs for WebからAPIキーを取得します。
Google Maps APIs for Web

Google Maps APIs for Webページで「キーを取得」をクリックし、

Google Maps Web APIをアクティベートする手順が紹介されますので「続ける」リンクをクリックすると

Google API コンソールページへ移動します。

Google API コンソールでプロジェクト作成

Google API コンソールページで「Google Maps JavaScript API Google Maps Geocoding API Google Maps Directions API Google Maps Distance Matrix API Google Maps Elevation API Google Places API Web Service Google Maps Embed API Google Static Maps API Google Street View Image API を有効にするアプリケーションの登録」と表示されますので、

「アプリケーションを登録するプロジェクトの選択」の項目で「プロジェクトを作成」を選択してから「続行」ボタンをクリックすると、

今度はGoogle API Managerページに移動します。

Google API Managerでキーの作成

Google API Managerページで「認証情報」が選択されていることを確認して、Create browser API keyの「名前」覧にAPIキー名を入力します。
※名前は分かりやすいもので良いです。

続いて、「この HTTP リファラー（ウェブサイト）からのリクエストを受け入れる (省略可)」覧に、Google Map APIを使いたいサイトのドメイン（URL）を入力します。

HTTPリファラーからのリクエスト受け入れについては「ワイルドカードにはアスタリスクを使用します。ここを空欄にすると、どのリファラーからのリクエストも受け付けることになります。このキーを本稼働環境で使用する前に、必ずリファラーを指定してください。」とありますので、ワイルドカード(＊)を使う場合は以下のように指定します。

*.webantena.net/*

1	.webantena.net/

ワイルドカードについて

例えば*.example.com/*のように、ご利用のドメインにアスタリスク（＊）を付けることで、example.comとexample.comのサブドメイン及び、下層ページURLを対象にすることができます。

demo.example.com

www.example.com/about

blog.example.com/sample

example.com/test.html

Google APIキーの発行

URLの設定が終われば最後に「作成」ボタンをクリックします。

しばらくするとAPIキーが表示されますのでコピーしておきます。

Google APIキーの利用方法

ご利用のWEBサイトのHTMLファイルを開いて<head>内などに以下のように指定します。

<script src="https://maps.googleapis.com/maps/api/js?key=APIキー"></script>

1	<script src="https://maps.googleapis.com/maps/api/js?key=APIキー"></script>

「APIキー」の部分がGoogle API Managerで発行されたキーになります。