2016年6月から新規サイトでGoogle Mapsを使用する場合にはAPIキーが必須になったそうです。APIキーは簡単に発行できるのでその方法を書きたいと思います。
APIキーの取得方法
まずは、Google Maps APIs for Webへアクセスします。
「キーの取得」を押します。
googleにログインしていなければ、ログイン画面が出ると思うので、ログインしてください。
ログインすると、また同じ画面が出てくると思うので、再度「キーの取得」を押してください。
MY Projectのところを押して「create a new project」を選択し「ENABIE API」を押して次に進んでください。
たぶん出ないと思いますが、下記のような画面が出ましたら「YES」を押して「CREATE AND ENABLE API」を押してください。
くるくるしながら有効化となると思います。しばらく待ちましょう。
そうすると下記画面が出て「キー」が発行されます。
でもまだここで終わりではありません。もう少し設定をします。
「API console」というボタンを押しましょう。
「認証情報」という画面が出ると思います。
こちらで使用するWebサイトを登録します。
万が一下記のようなリストが出てきたら、「名前」のところをクリックします。
「認証情報」という画面が出ると思います。
順番にみていきましょう。名前はデフォルトで「API Key」となっています。
そのままでもよいですし、自分のサイトを入れてもよいと思います。
キーの制限のところで
ラジオボタンがデフォルトで「なし」になっているので、「HTTPリファラー（ウェブサイト）」にチェックを変えます。
そうすると下記のようなWebサイトのURLを登録できるフィールドが出てくると思うので、入力します。
*.example.com/*（サブドメインありの場合）
example.com/*（サブドメインなしの場合）
とりあえず両方とも登録しておきましょう。サブドメインは使っていない人も多いと思いますが。
１つ入れれば下にまた入力できる枠が出てくると思います。
知りたいネットの場合ですと、下記のようになります。
*.shiritai.net/* shiritai.net/*
保存を押してOKです。
もしもアドレス間違えたという場合は、入力の枠のいちばん右に「×」があると思うので、そこを押せば消えますので、もう一度入れ直しましょう。
※ここでURLを登録しないと他サイトでもAPIキーが使えてしまいますので必ず登録しておきましょう！
その後は適用されるまでしばらく時間がかかります。一瞬の場合もありますが、5分以上のこともありますね。
すぐキーをコピペして設定してもまだエラーのままだとしても慌てずに待ちましょう。
万が一、１日以上経ってもエラーのままで変化なしの場合は、再度このリファラのアドレス設定が間違っていないか確認しましょう。
ちなみにアクセス数の多いサイトになりますと、有料になるので注意が必要です。一日25,000回の表示を上限とし、それ以上は有料となるようです。
あとから上記で設定した「認証情報」を確認したい場合は下記にアクセスすれば見れます。
APIキーの使い方
Google Mapsを表示させたい場合、ページのヘッダー(又はフッター又はbody内)に Google Maps用のScriptを読み込むコードを記入してます。
そのコードにAPIキーを追加します。
もし現状設置していてエラーの場合、このように設定していることもあると思います。
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
こちらを下記に変更します。
key=XXXXXXXXXXXXXのところにさきほど取得したkeyを入れます。
<script src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXX"></script>
こちらをコピペで入れればOKです。
エラーが出る場合
設定をしたのに、やっぱりエラーが出る場合、慌てずに設定をもう一度確認しましょう！
こちらにアクセスして、設定したKeyをもう一度確認してみましょう！
設定したKeyはほんとに正しいですか？
「キーの制限」に設定したURLは正しいでしょうか？スペルミスはないですか？
http://から書いていませんか？？
APIは有効になっていますか？
［ダッシュボード］を開いて、右下の部分を見てください。
APIの設定があると思います。
Google Maps Directions API
Google Maps Distance Matrix API
・
・
有効の場合は「無効にする」という表示になっています。
ちゃんと有効になっていますか？
もしも「有効にする」という表示になっていたら、「無効」ということになりますので、
「有効にする」を押して、表示を変えましょう。
すべてを確認して再度設定しましょう。
慌てずに落ち着いて確認しましょう。
一覧が見れない場合
上記のサイトにアクセスして、チェックしてみようと思っても、こんな表示になり見れない場合もあると思います。
その場合は、ブルーのボタンの「選択」か、左上のプロジェクトを選択を押してください。
下記のような画面になりましたら、nameの下にある名前を押せば、認証情報やダッシュボード、ライブラリのページが見れると思います。
万が一、プロジェクトがないようでしたら、新規で「作成」を押し、適当なプロジェクト名を入れもう一度APIキーを取得しましょう。
認証情報のページを開きますと、ブルーのボタンで「認証情報を作成」というのが表示されますので押します。
一番上に「APIキー」というのが出てくると思うので、そちらを押します。
APIキーを作成しましたという画面が出てくると思います。
あとはキーの制限を押して、認証情報のページを開き、「キーの制限」の部分のURLを入力して保存します。
「キーの制限」という項目でHTTPリファラー（ウェブサイト）にチェックを入れ
その下に
「この HTTP リファラー（ウェブサイト）からのリクエストを受け入れる」のところにURLを入力する部分が出てくるの思うので、URLを入力します。上のほうでで説明した通りの手順を再度行うということになります。
最後は、保存を押して、完了です。
コメントをどうぞ