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

7

新しい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)したり、既存のプロジェクトを選択し、 をクリックします。

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

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

グーグルマップ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プロジェクトを選択

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

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

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

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

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

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

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

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

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

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

ワードプレスのサイトには、GoogleマップAPIキーを追加する

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

Avada テーマ

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

ああ、海のテーマのGoogleマップAPIキーを入力

Enfold テーマ

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

円フォールドテーマのGoogleマップAPIキーを入力

Newspaper テーマ

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

ワードプレス伝言板> 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スクリプトのインキュ)を無効にしてください。

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

The7テーマ

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

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

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

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

グーグルでは、次のような形式でjavascriptのコードを追加することを推奨しています(Google開発者向けドキュメント "Web Maps> JavaScript API> Get API Key"参照)。

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
type="text/javascript"></script>

この形式で入れるときにエラーが発生した場合、次のような形式で入れて正常に動作していることをテストしてみてください(Google開発者向けドキュメント "Upgrading Your Maps JavaScript API Application from V2 to V3"参照)。

<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

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

注:

7のコメント

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

  2. 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サイトでアカウントを作成し接続してください。

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

      楽しい一日を過ごす。

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

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

コメントを残す

コメントを入力してください!
名前を入力してください