and More

今更ですがGoogle Map APIキー取得方法

April 9, 2017
Google Map APIキー

Google MapのAPIが必須になってもう直ぐ一年が経とうとしています。今更になるのですが、Google Map APIキーの取得方法を備忘録も兼ねてご紹介致します。

Google Maps APIキー取得方法


Googleアカウントが必要になるので、ログインしておきます。
ウェブ向け Google Maps API  |  Google Developersから上部にあるキーを取得をクリックします。


Select or create projectをクリックします。


APIを作成したことがあると以前作ったAPIが表示されます。最下部にある+Create a new projectをクリックします。

My Projectという名前の新しいプロジェクトが作成されます。


わかりやすいように名前をTESTに変更。名前は任意で変更してください。
CREATE AND ENABLE APIをクリックします。

しばらくすると上記のような画面になるので、API隣のアイコンをクリックして使用できますが、セキュリティー設定の為にもAPI Consoleをクリックします。


新しいタブで上記のような画面に移ります。
APIキーの不正使用や割り当ての盗用防止にキーの制限をしておきます。


HTTP リファラー(ウェブサイト)を選択すると上記のようになります。設置したいウェブサイトのURLを入力します。voyager-jp.com/*

Example:

www.example.com/* www.example.comまたはexample.comで始まるすべてのURLと一致するもの。www.example.com,www.example.com/stamps,example.com/stampsなど

URL パターンより引用


URL登録ができたら保存します。

APIキーやプロジェクトの確認はGoogle API Consoleで調べることができます。

Google Maps JavaScript APIをロード

<script src="//maps.googleapis.com/maps/api/js?key=◯◯◯◯◯"></script>

Google Maps JavaScript APIを使用する際に使用します。◯◯◯◯◯にAPIキーを追加します。