Googleマップが正しくロードされない問題が発生した場合、[総合]

新しいGoogleのマップAPIの標準プランに基づいて、2016年6月22日以降に作成されたすべての新規アプリケーションにはGoogle Maps APIキーを入力する必要がグーグルマップが正しく表示されます。

そして最近では、GoogleのAPIキーを発行を受けるために、クレジットカード情報を入力するように、Googleのポリシーが変更されました。

Google Maps APIキーを入力しない場合、または適切に設定しないとGoogleマップをロードするときに 「Googleマップを正しく読み込めませんでした」 또는 「The Google Maps API server rejected your request」 などのエラーが発生したり、地図がしばらくの間、ロードされたが表示されないことがあります。

Googleマップのエラー

このブログでは、Googleマップに関連する問題を断片的にいくつかの記事で説明しました。 総合的にまとめなければならない時が来たと思っていたが、なかなか時間を出さなかったが、今日の心を食べまとめました。 不十分な点は、今後の補強するようにします。

グーグルマップにエラーが発生した場合、以下の点をチェックして、問題の解決を試みてみることができます。

  1. Google Maps APIキーを正しく発行されたか
  2. HTTPリファラを設定したか
  3. APIキーを適切にサイトに追加したか

GoogleのAPIキーの発行

最近Google Maps APIキーを発給を受けるクレジットカード情報を入力して、課金アカウントを接続する必要があります。

新規ユーザー:

GoogleのAPIキーを発行受けていない場合、次の方法を使用して新たに申請します。

昔は https://developers.google.com/mapsで口をAPIキーを発行受けたが、今は、このリンクをクリックすると、Google Maps Platform(https://cloud.google.com/maps-platform/)に自動的に移動しながら、すぐにGoogle Maps APIキーを取得する必要がある画面が表示されます。

グーグルマップのプラットフォーム

上記のように「Google Maps Platformへようこそ」画面が表示されたら、開始する「」をクリックします。

GoogleマップAPIキー

Mapsをチェックして、一番下ずっとそばのアイコン(四角箱状のアイコン)をクリックすると、新しいプロジェクトを作成するか、既存のプロジェクトを選択する画面が表示されます。

グーグルマップ - 新規プロジェクトの作成

新しいプロジェクトを作成(Create a new project)したり、既存のプロジェクトを選択し、 Nextをクリックします。

グーグルマップ決済アカウントを作成

その後、支払いアカウントを作成することを選択する画面が表示されます。 취소をクリックすると、最初の画面に戻りますので課金アカウントを作成していない場合 支払いアカウントを作成をクリックして正常に行われます。

グーグルマップAPI作成

上記のような画面が表示されます。 支払いアカウントを作成し、接続するとFirebase、Google Maps APIなどを含むアプリ、ウェブサイト、サービスを構築して実行するために必要なすべての機能を利用することができると説明しています。

登録する際にクレジットカード情報を入力する必要があります。 私は支払いアカウントを作ったが、既存のプロジェクトを作成している場合課金アカウントを接続する必要がないことを知ってキャンセルしました。

既存のユーザー:

既存のGoogle Maps APIキーを生成したことがある場合は、クレジットカード情報を入力しなくても、新しいサイトを追加して、既存のキーを利用することができます。

既存のユーザーは、以下のHTTPリファラ設定に移動し、Googleマップが挿入されているウェブサイトを指定して与えるようにします。

一定量を超える地図を読み込む場合は、お支払いアカウントをリンクする必要があります。 価格設定の詳細については、下記の「Googleマップの使用量制限」を参照してください。

Googleマップの使用制限

2018年6月16日以降から適用される価格設定と使用制限については、次の記事を参照してください。

既存の価格政策は「Pricing and Plans「で確認できます。 Google Maps Platformの 価格ページも参照みてください。 毎月200ドルの無料のクレジットを使用することができ、 APIの使用上限設定が可能です。

HTTPリファラ設定

グーグルマップAPIキーを特定のサイトで使用できるようにHTTPリファラを設定ヘジュオヤます。 HTTPリファラを設定しなかった場合、次の方法に応じて設定するようにします。

Googleのクロムのグーグル(Gメール)アカウントにログインして Google Cloud Platformコンソールに接続します。

次のような画面が表示されたら上部のプロジェクト名の部分をクリックして表示されるドロップダウンリストから適切なプロジェクトを選択します。

GoogleのAPIプロジェクトを選択

その後、左上のXNUMX行の形のアイコンをクリックして、 APIとサービス>ユーザー認証情報を選択します。

グーグルマップユーザー認証

これにより、次のような画面が表示されます。 APIキーの名前をクリックします。

グーグルマップAPIキーを設定

APIキーの制限を設定することができるページが表示されます。

グーグルマップHTTPリファラ設定

APIキーをコピーして保管するようにするようにします。

下から アプリケーション制限事項> HTTPリファラ(ウェブサイト)を選択し、一番下にサイトを追加するようにします。 サイトは https://*.example.com/* 形式で追加します。

SSLセキュリティサーバー証明書がインストールされていない場合は、http://*.example.com/*形式で追加してテストしてみてください。 もし適切に指導がロードされない場合、http://またはhttps://プロトコルを除いて、アドレスを入れてテストしてください。

サイトの追加後に下部の 저장 ボタンを押して設定を保存します。

WordPress サイトには、GoogleマップAPIキーを追加する

もう最後に、Google APIキーを WordPressに追加する必要があります。 幸いなことに、多くのテーマでは、Googleのキーを追加するためのオプションを提供しています。

Avada テーマ

Avadaの場合 WordPress 伝言板> Avada >テーマオプション>コンタクトフォーム> Google Map 下にGoogle Maps API Keyを入力するためのフィールドがあります。

Avada ThemeにGoogle Maps APIキーを入力する方法

Enfold テーマ

Enfold テーマの場合 伝言板> Enfold > Google Services 下の Googleマップ セクションには、GoogleマップAPIキーを入力することができます。

Enfold テーマのGoogleマップAPIキーを入力

Newspaper テーマ

Newspaper テーマには、GoogleのAPIキーを入力するための専用のフィールドがないようです。 (もしかしたら場合は、次のコメントを介してお知らせいただければ文を修正します。)

WordPress 伝言板> Theme panel > Analytics/Js Codes 下の
FOOTER SCRIPT CODE セクションの下の "手動でのGoogle APIキーを入れる方法「で提示するスクリプトを入力すればいいと思います。

時間になると、 Newspaper テーマには、Google APIキーを入れるフィールドがあるか探してみて、もしある場合は、この内容を訂正します。

Diviテーマ

Diviテーマ伝言板> Divi>テーマオプション> General タブの下にGoogle APIキーを入れたテキストボックスを提供しています。

DiviテーマのGoogleマップAPIキー

Google Mapsを使用しない場合のすぐ下の設定(Google Mapsスクリプトのインキュ)を無効にしてください。

Googleマップが正しくロードされない問題が発生した場合、[総合] 2

The7テーマ

よりセブン(The7)テーマでテーマオプションをいくら探してみても、GoogleのAPIを追加するためのオプションを見つけることができません。

The7で、Googleマップのキーを追加するには、 伝言板> The7 Ultimate> Google Mapsをクリックします。

The7テーマのGoogleマップAPIキー

Jupiter テーマ

Jupiter テーマの場合 伝言板(ダッシュボード)> Jupiter > Theme Options > Global Settings > API Integrations 下では、Google APIキーを追加することができます。

Jupiter テーマのGoogleマップAPIキーを追加

Other Integrations(その他の統合) セクションの下にGoogle Maps APIキーは、GoogleアナリティクスIDなどを追加することができるフィールドがあります。

手動でのGoogle APIキーを入れる方法

テーマでGoogle Maps APIキーを入れたオプションを提供していない場合は、直接のテーマのソースファイルに追加することができます。

Googleでは、次の形式でjavascriptコードを追加することをお勧めします(Google開発者ドキュメントWeb Maps> JavaScript API> Get API Key"参照)。





この形式で入れる際にエラーが発生した場合は、次の形式で入れてうまく動作するかテストしてみてください(Google開発者文書」Upgrading Your Maps JavaScript API Application from V2 to V3"参照)。





上記のスクリプトコードを通常のfooter.phpファイルに追加すると、なりそうです。 すぐ上に入力するようにします。 (もちろん チャイルドテーマを利用するようにします。 それ以外の場合、テーマを更新する場合に変更が失われます。)

メモ:


21のコメント

  1. こんにちは。 私も数年間 WordPress サイトを個人用途作った課金アカウント接続し、APIを発行、関連ライブラリだ追加完了、HTTP、リファラの追加、テーマ四APIキー挿入は、多完了したにもかかわらず、開発者のウィンドウで、エラーを見ると、NoApiKeysが示現されもしかしたら原因を知ることができますか?
    BRIDGE, SALIENT どちらのテーマもそうですね…

    1. こんにちは、yujeong様。 これに関連し、1)キャッシュを削除して見て、2)IPアドレスをブロックするように設定されていないことを確認してみましょ?

      In the keys section in the cloud console、go to credentials and check the restrictions portion。

      クラウドコンソールのKeysセクションでCredentialsに移動してRestrictions部分をチェックしてみてください。

      次のStackoverflowのドキュメントを参照ください: https://stackoverflow.com/questions/63098815/google-maps-javascript-api-warning-noapikeys-only-in-safari

      上記の措置にも解決ができない場合 Bridge テーマSalient テーマ 販売者に支援要請をしてみてください?

      ちなみに、Googleマップのロードがそれほど多くない場合は、 Elementorでは、APIキーを入力しなくてもGoogleマップが機能するようです。 次の記事を参照してください。

      https://avada.tistory.com/2236

  2. こんにちは
    これもしかして一般マップ利用者にも対応するのですか?
    旅行が好きで、Googleマップに3000を超える場所を保存ておい正しくトゥジルないけいれんね

    1.ピーシーでお気に入りが地図上に最初からロードされません。 リストもない呼んできた。 新たに保存もしない
    2.ところで部アカウントはまた、何の問題もなし
    2.どの携帯電話でお気に入りの保存フォルダつ他のすべて消える
    3.主力フォンではまだ正常に動作中なのにこれも消えるかと思ってカカオ、Naverに移す中です

    ひょっとご存知の情報があるか文を残してみました

    1. こんにちは、ヌーノ様。 この問題を少し検索してみると保存できる数が制限されているようです。
      評価がある場所を最大500個まで保存が可能なようです。 この数を超えると、古いもの消えるね。

      Fun fact:if you have already over 500 starred items and some of the old ones disappeared、there may be a way to get your「lost」starred items back。 When I moved items from starred to a separate list、I noticed that the number of starred items stayed steady at around 500 I think the item limit of 500 per list is only a limit for how many items are displayed。 All your starred places may still be saved by Google and could show up again if you move items from starred to a separate list with places。

    1. OceanWPを見ると、デフォルトのGoogleマップ(Google Maps)ウィジェットを使用している場合は、Google Maps API keyを入力せずに使用できますが、高度なGoogleマップウィジェット(有料版)を使用する場合には、GoogleのマップAPIキーを配置する必要がすることです。

  3. こんにちは。 Avada 利用者です。
    GoogleのAPIキーを取得してもらうために、クレジットカードの接続手順があるとハショトヌンデヨ。
    グーグルマップをホームページに入れると料金が出て行くゴトインジヨ?

    1. こんにちは、パク・ゴンウク様。

      Google Maps Platformの価格のページを参照してみてください。

      https://cloud.google.com/maps-platform/pricing/?hl=ko

      現在、毎月200ドルの無料使用が提供されるとします。

      月に$ 200のクレジットは、ほとんどのユーザーが必要とする機能を利用するには十分です。 毎日のクォータを設定すると、予期せぬ使用量の増加を防ぐことができます。

      ポリシーは、頻繁に変更されることがありますので、常に、Googleドキュメントを参考にしてた方がいいようです。

      単に会社紹介ページや持ち帰るページにGoogleマップを挿入しようとしている場合は、方向を作って挿入したり、Googleマップをキャプチャして入れるのはどうだろうかと思われます。

  4. Avadaテーマにホームページ制作中なのに上に詳しく教えてくださったスタッフのとおり、Google APIキーを発行されている入力をした指導が読み込まれません。 既存のホームページがあって、現在、一時的ページで作業しているとリファラに(元のアドレスも入れてみ)一時アドレスも入れてきたんねㅠㅠ

    1. こんにちは、エレイン様。

      Googleでクレジットカードを接続して、Google Maps APIキーを生成し、HTTPリファラを適切に設定してくれれば問題なく表示されます。
      AvadaAvada >テーマオプション> Contact Form> Google Map(グーグルマップ) ページのGoogle Maps APIキーを入力する必要があります。

      次の記事を参照してください。

      https://www.thewordcracker.com/basic/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-%EC%95%84%EB%B0%94%EB%8B%A4-%ED%85%8C%EB%A7%88%EC%97%90%EC%84%9C-%EA%B5%AC%EA%B8%80-%EC%A7%80%EB%8F%84-%EC%82%BD%EC%9E%85%ED%95%98%EA%B8%B0/

      よくないと、HTTPリファラにサイトのアドレスをhttp://またはhttps://を付けて完全なアドレスを入力しましょう。

      1. クレジットカード接続し、APIキーを生成するまでよくなった。もしかしたら、一時的サイトでの作業中だこんなことがあるでしょうか? java script console確認たところ、

        js:55 Google Maps JavaScript API error: RefererNotAllowedMapError....
        Your site URL to be authorized:

        このようなメッセージが表示されます〓〓
        私は本当に初心者なのに、ここで情報得勇気を出してホームページ制作中なのに、やはり簡単ではないですね。

      2. こんにちは、エレイン様。

        このエラーに関連してstackoverflowの記事を見てみると、次のような回答があります。

        I know this is an old question that already has several answers, but I had this same problem and for me the issue was that I followed the example provided on console.developers.google.com and entered my domains in the format *.domain. tld/*。 This didn't work at all, and I tried adding all kinds of variations to this like domain.tld, domain.tld/*, *.domain.tld etc.

        What solved it for me was adding the actual protocol too。 http://domain.tld/* is the only one I need for it to work on my site. I guess I'll need to add https://domain.tld/* if I were to switch to HTTPS。

        Update:Google have finally updated the placeholder to include http now:

        基本的には、この記事で説明するようにHTTPリファラーを設定して、地図を表示するドメインを登録する必要があります。

        グーグルでは、 https://*.example.com/* 또는 http://*.example.com/* 形式的に追加することを推奨しています。
        SSL証明書がインストールされている場合には、 https://...、そうでない場合 http://...へ...

        しかし、このようにエラーが発生した場合 http://www.example.com/* 또는 https://www.exampl.com/* のような形式で追加してください。 (wwwを使用しない場合には、 http://example.com/* OR https://example.com/*)(参考記事: https://stackoverflow.com/questions/35288250/google-maps-javascript-api-referernotallowedmaperror )

  5. Google map apiを介して位置情報ホームページを一つ作るのに、当該ホームページで地図の位置を移しコトダガ再びホームページをいれると移した位置に変更がされています。
    もしかしたらgoogle map apiを登録しなくて、このような現象が発生したのか気になります。

  6. enfold テーマを使用しているテーマの設定にgoogle serviceというメニューがありませんㅠㅠ同じテーマであっても、メニューの構成が異なる場合がありますか?ㅜㅜㅜ

    1. Enfold テーマのバージョンがどうなりますか?

      私はチェックしてみると、現在4.6.3.1ですね。

      https://www.screencast.com/t/ZuYU11cA

      WordPress、テーマ、プラグインは、常に最新のバージョンに更新することが、セキュリティ上、機能上、性能上重要です。

      バックアップをした後、最新のバージョンに更新してください。

      バックアップ方法を知らない場合、次の記事を参照してみてください。

      https://www.thewordcracker.com/basic/db%EC%99%80-%EB%8D%B0%EC%9D%B4%ED%84%B0%EB%A5%BC-%EB%AA%A8%EB%91%90-%EB%B0%B1%EC%97%85%ED%95%98%EB%8A%94-%EB%B0%B1%EC%97%85-%EB%B3%B5%EC%9B%90-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-updraftplus/

    1. こんにちは?

      Googleマップが正しくロードされない問題は、 WordPress 問題というよりは、Googleのポリシーを変更のためです。
      少し煩わしく見えてもGoogle Maps Platformサイトでアカウントを作成し接続してください。

      そして冷たい風を吹かくるとイライラが逃げることもできます。

      楽しい一日を過ごす。

  7. ありがとうございます。^^
    今日のブログ見てびっくりしました。
    セキュリティ証明書の更新をしました金曜日と受付がないなったのかですね。ㅜㅜ
    早く更新がされた場合です

    1. あいにく昨日のSSL証明書の期限が切れましですね。
      このような事案は、週末にも処理してくれればいいのに、惜しいですね。

コメントを残す

*メールアドレスは公開されません。