• RSS

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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の地図でエラーが発生する場合

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

Google APIキーの取得

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

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


Google Maps APIs for Webページで「キーを取得」をクリックし、
Google Mapsを利用するためのGoogle APIキー取得方法まとめ

Google Maps Web APIをアクティベートする手順が紹介されますので「続ける」リンクをクリックすると
Google Mapsを利用するためのGoogle APIキー取得方法まとめ

Google API コンソールページへ移動します。
Google Mapsを利用するための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 Mapsを利用するためのGoogle APIキー取得方法まとめ

今度はGoogle API Managerページに移動します。
Google Mapsを利用するためのGoogle APIキー取得方法まとめ

Google API Managerでキーの作成

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

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

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

ワイルドカードについて

例えば*.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の設定が終われば最後に「作成」ボタンをクリックします。
Google Mapsを利用するためのGoogle APIキー取得方法まとめ

しばらくするとAPIキーが表示されますのでコピーしておきます。
Google Mapsを利用するためのGoogle APIキー取得方法まとめ

Google APIキーの利用方法

ご利用のWEBサイトのHTMLファイルを開いて<head>内などに以下のように指定します。
<script src="https://maps.googleapis.com/maps/api/js?key=APIキー"></script>
APIキー」の部分がGoogle API Managerで発行されたキーになります。



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す