修正:このページはGoogleマップを正しく読み込めません



問題を排除するために楽器を試してください

Googleマップは、世界中のどこにでも地理的な地域と道路地図を提供するWebベースのマッピングサービスです。ただし、一部のWebサイト所有者は「 このページはGoogleマップを正しく読み込めません Googleマップをロードする代わりに」。このエラーは、「 このページはGoogleマップを正しくロードしませんでした。技術的な詳細については、JavaScriptコンソールを参照してください 」。



おっと!問題が発生しました–このページはGoogleマップを正しくロードしませんでした



注意: このソリューションは、従来のユーザーではなく、Webサイトの所有者を対象としています。



Googleマップが正しく読み込まれない原因は何ですか?

グーグルマップ プラグインはエラーなしでうまく機能しますが、Googleが地図が埋め込まれたウェブサイトのルールを変更したとき、過去数年間で状況が変わりました。ウェブサイトの所有者は、以前は埋め込みコードを使用するだけでこれを機能させることができましたが、現在はGoogleマップが正しく機能するためにAPIキーが必要です。すでにAPIキーを追加している場合は、Chromeの[要素の検査]-> [コンソール]タブを表示して、Googleがサイトでマップを許可していない正確な理由を確認できます。これは、キーが正しくない、キーが制限されているなどの原因である可能性があります。

GoogleAPIキーをサイト設定に追加します

プロジェクトまたはウェブサイトでGoogleマップを機能させるには、Google APIキーを作成し、サイトの設定に追加する必要があります。キーを作成し、その他のエラーのトラブルシューティングを行うには、GoogleDevelopersにサインインする必要があります。

マップのスクリプトを手動で挿入した場合は、YOUR_API_KEYの代わりにAPIキーを使用して次のようにする必要があります



  非同期 延期 src='https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback = initMap 'タイプ='text / javascript'>>

WordPressは世の中で最も人気のあるCMSであり、1億7200万を超えるウェブサイトがWordPressを使用しています。 WordPressのみの手順を示します。

  1. Googleマップに使用しているプラ​​グイン設定に移動すると、APIキーを追加するオプションが表示されます。ない場合は、古いバージョンのプラグインまたは古いプラグインを使用している可能性があります。

    WordPressのGoogleAPIプラグイン

  2. のAPIキーの設定を開いたままにします WordPressサイト
  3. に移動 Googleのクラウドリソースマネージャー
  4. まだログインしていない場合は、Googleにサインインします
  5. プロジェクトの作成 」、プロジェクトに名前を付け、「 作成する 「」

    プロジェクトの作成

  6. に移動 GoogleのEnablingAPI ウェブページ。
  7. プロジェクトを選択する 」を上に表示し、作成したばかりの新しいプロジェクトを選択して、 継続する
  8. 押す ' APIとサービスを有効にする 「」
  9. 検索する ' Maps JavaScript API 」と開きます
  10. 次に、「 有効にする 」ボタン

    プロジェクトのAPIを有効にする

  11. ナビゲーションメニューをクリックし、「 APIとサービス 」に移動し、「 資格情報 「」
  12. [資格情報の作成]ドロップダウンをクリックして、[ APIキー 「」
    注意 :必要に応じて、不正使用を防ぐための制限キーにすることができます
  13. 閉じる 」次に、作成したキーをクリックします
  14. 選択する ' HTTPリファラー 」のアプリケーション制限
  15. ウェブサイトのURLを追加し、[ 保存する 「」
  16. キーをコピーして、WordPressサイトに戻ります

    サイトのAPIキーの作成

  17. 左パネルの下にスクロールして、「 設定 「」
  18. 「」のオプションがあります GoogleAPIキー 」、それを開き、そこにキーを貼り付けます。
  19. 設定を保存し、ページに移動して更新します。

注意: グーグルは300ドル相当のクレジットまたは12ヶ月の無料使用のみを許可しているため、請求が有効になっていることを確認してください(どちらか速く減少します)。その後、請求を設定して実装する必要があります。

読んだ2分