Google Maps の APIキー を簡単に取得する

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

Google Developers JavaScript API Usage Limits

Google Maps は 現在はAPIキー無しでも表示されますが、現在の地図の利用状況(リクエスト数)がわからないので APIキー は登録してた方がいいでしょう。
APIキーを登録して利用すると地図の利用状況(リクエスト数)を確認できるようになります。

【追記 2016/06/27】 「Google Mapsを利用する場合はAPIキーが必須になったもようです

しかしAPIキーといっても Google API のサイトは英語ですし、APIの種類がたくさんあって とてもわかりにくいです。
そこで Google Maps に必要な APIキー を一度に簡単に取得する方法をご紹介します。

 
 

Google Maps APIキー取得方法

Google Maps APIs for Web」 へアクセスします。

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

 

これからの手順を説明する画面がでてきますので、ここの「続ける」ボタンを押します。
googlemap_api_31

 

必要ならばログインしてください。
googlemap_api_01a

 

アプリケーションを登録するプロジェクトの選択 で「新しいプロジェクトを作成」に変更して「続行」ボタンを押します
googlemap_api_03

 

ブラウザ API の作成 画面になります。
googlemap_api_101
下の「作成」ボタンを押してください。

 

APIキー て出てきますがそのまま「OK」ボタンを押してください。
googlemap_api_102

 

認証情報 の画面になりました。
googlemap_api_103
APIキーの 「ブラウザーキー1」のリンクをクリックしてください。

 

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

 ワイルドカード( * )が使えますので * を使ってURLを設定します。
  例 *.example.com/*  www等のサブドメインがついた example.com と下位のURL
  例 example.com/*  example.com と下位のURL

 入力後、「保存」を押してください。
 ※ここでURLを登録しないと他人のサイトでもAPIキーが使えてしまうので必ず登録してください。

googlemap_api_105
これで Google Maps で必要な APIキー が、取得できました。

 



 

APIキーの確認方法

利用状況を知りたい場合や HTTPリファラーのURLを修正したい場合、APIキーを忘れた場合はこちらからプロジェクトを選んでください。
Google Developers Console
表のリクエスト数が 「過去 24 時間以内に Google がプロジェクトから受信したリクエストの総数です。 すべての App Engine トラフィックとすべての API 使用が含まれます。」となっています。

プロジェクトを選択してください。
googlemap_api_9

 

右の「認証情報」をクリックしてください。
googlemap_api_10
名前をクリックしてください。

 

googlemap_api_11
ここで GoogleMapsを設置するURLを再設定できます。

 
 

使えるAPIを追加する

今までの手順で有効になっているAPIは以下の4つです。

Google Maps Embed API
Google Maps JavaScript API
Google Static Maps API
Google Street View Image API
※他にもある場合があります。

不動産プラグインでは「標高」や「駅からのルート」も使えるようになっていますので「Google Maps Elevation API」と「Google Maps Directions API」と「Google Maps Geocoding API」を追加します。
これらのAPIが無い場合は以下の手順で API を追加してください。

Google Developers Console Enabled APIs list.」 へアクセスします。
googlemap_api_20
「プロジェクトを選択してください」の所で先ほど作った「My Project」を選択して「続行」を押します。

 

ここで有効になっているAPIの一覧が表示されます。
googlemap_api_21
次に「Google API」のタブをクリックします。

 

APIの一覧がでますので「Google Maps Elevation API」を探してクリックします。
googlemap_api_22

 

「有効にする」をクリックしてください。
googlemap_api_23

 

これで「Google Maps Elevation API」が追加されました。
googlemap_api_24

 

この手順で続いて「Google Maps Directions API」「Google Maps Geocoding API」も同様に行ってください。

※他のマップ表示プラグインやご自身で実装している等で APIが足りない場合は以下を参考にしてください。
 Google Maps API – 必要な API はどれですか?

 
 

APIキーの使い方

Google Mapsを表示する場合、ページのヘッダー(又はフッター又はbody内)に Google Maps用のScriptを読み込むコードを記入してます。
そのコードに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>

※ローカル( http://localhost/ )で使用する場合は「APIキー無し」の方で利用してください。
※「APIキー無し」で だめな場合は 別に(テスト専用として) 新規で APIキーを取得して「このHTTPリファラー(ウェブサイト)からのリクエストを受け入れる」の所で 「localhost/*」だけで登録して「APIキー有り」の方を利用してください。