2016年6月22日以降、新しいドメインで Google マップを表示するには API キーが必須になります

↓この記事が気に入ったら、ぜひシェアをお願いします!

2016年6月22日以降に立ち上げるサイトで、Google マップを表示するには API キーが必須になりました。

ちなみに、2016年6月22日より前に作った地図は API キー無しでも表示されるようです。

スポンサーリンク

エラーの内容

Google マップを貼り付けているページを見てみると、Google マップを貼り付けている部分に次のようなエラー文言が表示され、地図が表示されません。

01

エラーが発生しました。
このページでは Google マップが正しく読み込まれませんでした。JavaScript コンソールで技術情報をご確認ください。

さっそく、JavaScript コンソールを見てみると、Google Maps API error: MissingKeyMapError というエラーが発生しています。

Google マップ API キーの取得方法

02

ウェブ向け Google Maps API | Google Developers にアクセス。右上の「キーを取得」をクリックします。

03

▲ 新規プロジェクトを作成後、作ったプロジェクトを選んで「続行」をクリック。

04

▲ ブラウザ API キーの名前を入力して「作成」をクリック。

05

▲ API キーが作成されます。

Google マップ API キーを設置する

次のように Google マップの JavaScript を読み込む部分の末尾に ?key=****** を加えます。

<script src="https://maps.googleapis.com/maps/api/js?key=******"></script>

language=ja とかが入っていた場合は下のように&で繋いで記述します。

<script src="https://maps.googleapis.com/maps/api/js?language=ja&key=******"></script>

以上です。

スポンサーリンク

↓この記事が気に入ったら、ぜひシェアをお願いします!

↓ブログをフォローすると更新情報が届きます。

スポンサーリンク