GoogleマップのAPIキーが必須でエラーが発生する

2016年6月22日以降でGoogleマップのAPIを利用してホームページ上に地図を表示する場合にはAPIキーが必須になりました。そのため、エラー画面が表示されるようになりました。

 

GooglemapAPIキーエラー

上記のようなエラーが発生したときは「Google Maps API」サイトに行き、APIキーを取得します。

 

(1)下記のURLにジャンプします。

https://developers.google.com/maps/web/

 

(2)キーの取得をクリックします。(Googleアカウントが必要)

GooglemapAPIキー

 

(3)プロジェクト名などを入れて「CREATE AND ENABLE API」をクリックします。

GooglemapAPIキー2

(4)キー発行が完了すると表示されます。

GooglemapAPIキー3

(5)取得したキーをGoogleMap読み込み時に設定します。

key=取得したAPIキーを読み込み時追加することで利用できるようになります。

<script src="https://maps.googleapis.com/maps/api/js?key=取得したAPIキー"