【2018年度版】Google Maps の APIキー を簡単に取得する

もうかれこれ Google Mapsを使用する場合でのAPIキー必須 になってから1年半くらい経ちました。当時「Google Maps の APIキー を簡単に取得する」の記事を書きましたが 取得するサイトの構成・デザインや、一度に取得できるAPIも変わりましたので2018年度版として再投稿いたします。

Google Mapsは ほとんどの webサイトでは無料で使えますが、大量のトラフィックがあるサイトでは 使用量の制限がされ課金される場合があります。
1日あたり地図の生成回数が 25,000回以上で90日連続以上の連続した場合に Googleから課金の連絡が行われるそうです。
Google Developers JavaScript API Usage Limits

APIキーを登録して利用すると地図の利用状況(リクエスト数)を確認できるようになります。
しかしAPIキーといっても APIの種類がたくさんあって とてもわかりにくいです。
そこで Google Maps に必要な APIキー を一度に簡単に取得する方法をご紹介します。

【2018/05/07追記】
6/11よりAPIキーを設定していても「Google Cloud Platform」で 請求先アカウントとプロジェクト(APIキー)を紐づけていないと GoogleMaps が表示しなくなると思われます。
また、現在(暫定処置だと思いますが)古いサイトでは APIキーが無くてもGoogleMapsは表示されていますがこれらも表示しなくなる可能性がありますので今後のアナウンスを注視してください。

「Google Maps Platform の提供を開始 : Google マップのビジネス利用がさらに進化 」
https://developers-jp.googleblog.com/2018/05/google-maps-platform-google.html

「Google Maps Platform」
https://cloud.google.com/maps-platform/

「既存ユーザー用ガイド | Google Maps Platform」
https://cloud.google.com/maps-platform/user-guide/

「既存ユーザー用ガイド | Google Maps Platform アカウントの変更 」
https://cloud.google.com/maps-platform/user-guide/account-changes/

 

Google Maps APIキー取得方法

ウェブ向け Google Maps API Google Developers」 へアクセスします。
※Googleのアカウントでログインしてください。

「キーの取得」ボタンを押します。

「Maps Web API の有効化」画面の「Select or create project」をクリックします。

「Create a new project」をクリックします。

「My Project」と出てきます。これはAPIのプロジェクト名ですので後でわかるように自由に変更してください。(日本語は使えません)

この例では「My Project Test」として「NEXT」をクリックします。

しばらく待つと

GoogleMaps APIキーが発行されました。(39文字)

これをコピーしてテキストエディタ等に保存しといてください。
最後に「DONE」をクリックして APIキー取得は終了です。

このAPIキーでは以下のサービスが有効になっています。
Google Maps Directions API
Google Maps Distance Matrix API
Google Maps Elevation API
Google Maps Embed API
Google Maps Geocoding API
Google Maps JavaScript API
Google Places API Web Service
Google Static Maps API
Google Street View Image API
※Google Mapsを使う分ではこれで十分です。

次に認証情報の設定を行ってください。

 

 

認証情報の設定方法

上記で取得したAPIキーは、まだ制限がかかっていません。
この状態では誰でもこのAPIキーを利用する事ができてしまうので以下の方法で制限をかけます。
キーの利用を制限する事で、このキーを使用できるウェブサイトを指定できます。

Google Developers Console」へアクセスします。

先ほど作った「My Project Test」をクリックします。

「Google APIs」のロゴをクリックします。

「認証情報」をクリックします。

※今はAPIが新規なので何もでませんが このページでAPIの利用状況が確認できます。後日見てみてください。

先ほど作ったAPIの設定画面になります。

「API Key」の横のが警告マークですのでこれをクリックします。

ここで「APIキーの利用制限」をします。

ラジオボタンの「HTTPリファラー(ウェブサイト)」をクリックします。

「このHTTPリファラー(ウェブサイト)からのリクエストを受け入れる」の欄で GoogleMapsを設置するURLを登録します。

※ワイルドカード( * )が使えますので * を使ってURLを設定します。
  例 *.example.com/*  www等のサブドメインがついた example.com と下位のURL
  例 example.com/*  example.com と下位のURL
  例 localhost/*  ローカルのテスト環境で使う場合。
複数設定できますので、ローカル開発環境用、WEBテスト用、本番用とか設定しておくといいかもしれません。

URLを入力したら「保存」ボタンを押してください。

APIの設定画面に戻りました。

「API Key」の横のが無くなっている事を確認してください。

以上で認証情報の設定は終了です。

 

 

APIキーの使い方

Google Mapsを表示する場合、ページのヘッダー(又はフッター 又はbody内)に Google Maps用のScriptを読み込むコードを記入してます。
そのコードに key={APIキー}を追加するだけです。

静的ページの場合

APIキー無し(従来の書き方)

<script src="https://maps.googleapis.com/maps/api/js"></script>

APIキー有り

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

WordPressの場合

WordPressの場合は以下のコードを my-plugin.php に張り付けてください。

/**
 * GoogleMaps jsを追加 footer
 *
 * License: GPLv2 or later
 */
function add_footer_enqueue_scripts_googlemaps_js() {
	wp_enqueue_script( 'googlemapapi', 'https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX', array(), '', true );
}
add_action( 'wp_enqueue_scripts', 'add_footer_enqueue_scripts_googlemaps_js', 99 );

※XXXXXXX・・のところにAPIキーを入れてください。

または、こちら

/**
 * GoogleMaps jsを追加 footer
 *
 * License: GPLv2 or later
 */
function add_footer_enqueue_scripts_googlemaps_js() {
	echo '<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"></script>';
}
add_action( 'wp_footer', 'add_footer_enqueue_scripts_googlemaps_js', 99 );

※XXXXXXX・・のところにAPIキーを入れてください。
※wp_footerフィルターの方が下側になります。

HTMLソースの一番下側にこれを出力させる事が ミソです。
もしかしたら何かのプラグインでキー無しでGoogle Maps用のScriptを書き込まれていても これが最終読込でマップが表示されるようになります。
※内部的には2重読込してますよとエラーはでますが、、

不動産プラグインの場合

管理画面の「設定」→「不動産プラグイン設定」で
kihon_10b
こちらにAPIキー を入力してください。