新しい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 Maps APIキーを正しく発行されたか
- HTTPリファラを設定したか
- 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へようこそ」画面が表示されたら、開始する「」をクリックします。
Mapsをチェックして、一番下ずっとそばのアイコン(四角箱状のアイコン)をクリックすると、新しいプロジェクトを作成するか、既存のプロジェクトを選択する画面が表示されます。
新しいプロジェクトを作成(Create a new project)したり、既存のプロジェクトを選択し、 次へをクリックします。
その後、支払いアカウントを作成することを選択する画面が表示されます。 취소をクリックすると、最初の画面に戻りますので課金アカウントを作成していない場合 支払いアカウントを作成をクリックして正常に行われます。
上記のような画面が表示されます。 支払いアカウントを作成し、接続すると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コンソールに接続します。
次のような画面が表示されたら上部のプロジェクト名の部分をクリックして表示されるドロップダウンリストから適切なプロジェクトを選択します。
その後、左上のXNUMX行の形のアイコンをクリックして、 APIとサービス>ユーザー認証情報を選択します。
これにより、次のような画面が表示されます。 APIキーの名前をクリックします。
APIキーの制限を設定することができるページが表示されます。
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を入力するためのフィールドがあります。
Enfold テーマ
Enfold テーマの場合 伝言板> Enfold > Google Services 下の Googleマップ セクションには、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キーを入れたテキストボックスを提供しています。
Google Mapsを使用しない場合のすぐ下の設定(Google Mapsスクリプトのインキュ)を無効にしてください。
The7テーマ
よりセブン(The7)テーマでテーマオプションをいくら探してみても、GoogleのAPIを追加するためのオプションを見つけることができません。
The7で、Googleマップのキーを追加するには、 伝言板> The7 Ultimate> Google Mapsをクリックします。
Jupiter テーマ
Jupiter テーマの場合 伝言板(ダッシュボード)> Jupiter > Theme Options > Global Settings > API Integrations 下では、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ファイルに追加すると、なりそうです。 すぐ上に入力するようにします。 (もちろん チャイルドテーマを利用するようにします。 それ以外の場合、テーマを更新する場合に変更が失われます。)
サイトにGoogle api登録をすると自動的にGoogleマップ検索に場所露出になりますか?
Googleにビジネスアドレスを登録しなければGoogleマップで検索されそうです。 Googleドキュメントを参照してください。
https://support.google.com/business/answer/2853879?hl=ko
こんにちは。 私も数年間 WordPress サイトを個人用途作った課金アカウント接続し、APIを発行、関連ライブラリだ追加完了、HTTP、リファラの追加、テーマ四APIキー挿入は、多完了したにもかかわらず、開発者のウィンドウで、エラーを見ると、NoApiKeysが示現されもしかしたら原因を知ることができますか?
BRIDGE, SALIENT どちらのテーマもそうですね…
こんにちは、yujeong様。 これに関連し、1)キャッシュを削除して見て、2)IPアドレスをブロックするように設定されていないことを確認してみましょ?
クラウドコンソールの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
こんにちは
これもしかして一般マップ利用者にも対応するのですか?
旅行が好きで、Googleマップに3000を超える場所を保存ておい正しくトゥジルないけいれんね
1.ピーシーでお気に入りが地図上に最初からロードされません。 リストもない呼んできた。 新たに保存もしない
2.ところで部アカウントはまた、何の問題もなし
2.どの携帯電話でお気に入りの保存フォルダつ他のすべて消える
3.主力フォンではまだ正常に動作中なのにこれも消えるかと思ってカカオ、Naverに移す中です
ひょっとご存知の情報があるか文を残してみました
こんにちは、ヌーノ様。 この問題を少し検索してみると保存できる数が制限されているようです。
評価がある場所を最大500個まで保存が可能なようです。 この数を超えると、古いもの消えるね。
オーシャンwpテーマはapi登録するページがありますか?
OceanWPを見ると、デフォルトのGoogleマップ(Google Maps)ウィジェットを使用している場合は、Google Maps API keyを入力せずに使用できますが、高度なGoogleマップウィジェット(有料版)を使用する場合には、GoogleのマップAPIキーを配置する必要がすることです。
こんにちは。 Avada 利用者です。
GoogleのAPIキーを取得してもらうために、クレジットカードの接続手順があるとハショトヌンデヨ。
グーグルマップをホームページに入れると料金が出て行くゴトインジヨ?
こんにちは、パク・ゴンウク様。
Google Maps Platformの価格のページを参照してみてください。
https://cloud.google.com/maps-platform/pricing/?hl=ko
現在、毎月200ドルの無料使用が提供されるとします。
ポリシーは、頻繁に変更されることがありますので、常に、Googleドキュメントを参考にしてた方がいいようです。
単に会社紹介ページや持ち帰るページにGoogleマップを挿入しようとしている場合は、方向を作って挿入したり、Googleマップをキャプチャして入れるのはどうだろうかと思われます。
Avadaテーマにホームページ制作中なのに上に詳しく教えてくださったスタッフのとおり、Google APIキーを発行されている入力をした指導が読み込まれません。 既存のホームページがあって、現在、一時的ページで作業しているとリファラに(元のアドレスも入れてみ)一時アドレスも入れてきたんねㅠㅠ
こんにちは、エレイン様。
Googleでクレジットカードを接続して、Google Maps APIキーを生成し、HTTPリファラを適切に設定してくれれば問題なく表示されます。
Avadaは Avada >テーマオプション> 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://を付けて完全なアドレスを入力しましょう。
クレジットカード接続し、APIキーを生成するまでよくなった。もしかしたら、一時的サイトでの作業中だこんなことがあるでしょうか? java script console確認たところ、
js:55 Google Maps JavaScript API error: RefererNotAllowedMapError....
Your site URL to be authorized:
このようなメッセージが表示されます〓〓
私は本当に初心者なのに、ここで情報得勇気を出してホームページ制作中なのに、やはり簡単ではないですね。
こんにちは、エレイン様。
このエラーに関連してstackoverflowの記事を見てみると、次のような回答があります。
基本的には、この記事で説明するように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 )
Google map apiを介して位置情報ホームページを一つ作るのに、当該ホームページで地図の位置を移しコトダガ再びホームページをいれると移した位置に変更がされています。
もしかしたらgoogle map apiを登録しなくて、このような現象が発生したのか気になります。
enfold テーマを使用しているテーマの設定にgoogle serviceというメニューがありませんㅠㅠ同じテーマであっても、メニューの構成が異なる場合がありますか?ㅜㅜㅜ
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/
チャンナ
こんにちは?
Googleマップが正しくロードされない問題は、 WordPress 問題というよりは、Googleのポリシーを変更のためです。
少し煩わしく見えてもGoogle Maps Platformサイトでアカウントを作成し接続してください。
そして冷たい風を吹かくるとイライラが逃げることもできます。
楽しい一日を過ごす。
ありがとうございます。^^
今日のブログ見てびっくりしました。
セキュリティ証明書の更新をしました金曜日と受付がないなったのかですね。ㅜㅜ
早く更新がされた場合です
あいにく昨日のSSL証明書の期限が切れましですね。
このような事案は、週末にも処理してくれればいいのに、惜しいですね。