Google Mapで「正しく読み込まれませんでした。」という表示が出るときの対処法

ホームページ上にグーグルマップで地図を表示させるようにしたつもりが、「Googleマップが正しく読み込まれませんでした。」という表示が出てしまうことがあります。

原因：APIキーの設定をしていない

2016年から、新規のWebサイトでGoogleマップを使用するときには「APIキー」を設定しないと地図が正しく表示されなくなりました。

「Google Maps API」のページで、「APIキー」というもの（文字列）を取得してサイトに貼り付ける必要があります。

クレジットカード情報の入力が必要に

ただし、2018年から、Google Maps APIキーを取得するにはクレジットカード情報等の請求先の入力が必要となりました。

Googleマップの表示回数によっては、課金される可能性があります。

ここまで便利な地図が無料で使えること自体が不思議なので、クレジットカードを情報を入力して、アクセスが多ければ費用を払うのも当然と言えばそうなのですが、無料で使いたい場合は下記の方法があります。

回避法：iframeで埋め込む

マップ埋め込み用のHTMLを取得してifameで埋め込む方法であれば、APIキーの取得は必要ありません。

埋め込みタグの生成手順

1. Google Mapsのサイトを開き、地図を表示させます。

2. 「共有」をクリックします

3. 「地図を埋め込む」タブをクリック

4. サイズを選択

5. 「HTMLをコピー」をクリックし、タブをコピーしてホームページの表示させたい場所にペーストします

Google Maps API でAPIキーを取得する手順

APIキーを取得する場合の方法は以下です。

1.　まずブラウザ（Chromeなど）でGoogleアカウントにログインします。

2.　Google Cloud Platform にアクセスします。

Google Cloud Platform

3.　左メニューの「APIとサービス」＞認証情報＞＋認証情報を作成＞APIキー　と選択します。

APIキー作成されます。コピーして必要な場所へ貼り付けてください。

Googleのサービスの画面は頻繁に変わるので、上記は現時点での情報です。