WordPress

【2018年版】Google mapsがAPI登録しても表示されないときの対策

私が運営しているWordPressでGoogle Mapsを表示するのにTCD Google Mapsプラグインを使ってみた際に全然うまくいかなかったので、備忘録的な意味合いも含めて情報提供します。TCD以外のSimple Map等で上手く地図が表示できないような事象でもAPIを使う場合は同じ原因のケースが多いので参考にしてみてください。

Google Maps APIの登録

まずAPIの登録先はhttps://developers.google.com/maps/web/のサイトになります。

「キーの取得」をクリックしてください。

googlemaps-api

Maps WEB APIの有効化という画面がポップアップしてくるので、あなたのGoogleMapに関するプロジェクトを作成します。初めての場合は、「Create a Project」を選択して任意の名前を付けてください。ここはどんな名前でも大丈夫です。入力後、「NEXT」をクリックしてください。

googlemaps-api

「YOUR API KEY」欄にAPIが表示されます。このAPIキーをプラグイン等の設定に使います。後で使うのでコピーしてテキストエディタ等に貼っておきましょう。ここで「DONE」をクリックするとポップアップが閉じてしまうので、「API Console」をクリックしてください。

Googlemaps-api

「API Console」をクリックすると、APIキーのパラメータを設定する画面が表示されます。「APIキー」は先程保存しておいたものと同じです。「名前」は好きな任意の名前を付けてください。

恐らくここがキモなのですが、「キーの制限」として「HTTPリファラー」を選択します。ちょっと下のところに「リファラーが登録されていません。」と表示されています。ここにGoogleMapsを使用するサイトのURLを登録する必要があります。ここの登録がおかしいとGoogle Mapsはいつまで経っても表示できません。

googlemaps-api

ここの登録の仕方はインターネットで調べてみると色んなサイトで解説されています。しかし、そのとおりにやっても全然表示できませんでした。プラグインが悪いのかWordPressが悪いのか色々確認しましたが、プラグインが悪いということはおそらく無いと思います。

大半がここのリファラーの設定が間違っているというか適切じゃないために地図が表示できない状態になっていると思われます。

入力例としては「*.example.com/*」とありますが、「*(アスタリスク)」を入れると表示されませんでした。アスタリスクはワイルドカード指定なので、入力例で合ってるハズなのですが入れると表示されません。

なので、例えばこのサイトでGoogle Mapsを使う場合は、「.a-cherry-blossom.com/*」となります。

最後に保存をクリックして設定完了です。

googlemaps-api

 

既にプラグイン等に設定が入っている場合は、地図が表示できているか確認してみてください。私が今回使おうとしてうまくいかなかったのがTCD Google Mapsというプラグインなのですが、以下のように表示できるようになりました。

しかしAPI関係はもう少しわかりやすいようにしてくれると助かりますね。。

関連記事

  1. wordpress

    WordPressの画像をポップアップするLightboxプラグイン【…

  2. wordpress

    直接CSSを編集せずにカスタマイズできるSimple Custom C…

  3. wordpress

    AddQuicktagプラグインのJSONファイルのエクスポート、イン…

  4. wordpress

    WordPressプラグイン【Crayon Syntax Highli…

  5. エックスサーバーの独自SSLを設定してWordPressを無料でHTT…

  6. wordpress

    WordPressテンプレートの買い過ぎはノウハウコレクターへの第一歩…

コメント

  • コメント (4)

  • トラックバックは利用できません。

    • ザジエ
    • 2018年 7月 28日

    こんにちは。
    当方、Google Map Easy と言うプラグインを使用していますが、API Keyを設定してもmapが表示されません。
    いろいろ試して、こちらのサイトに行き着いて、リファラーの設定がまさにおかしかったので直したのですが、ダメです。
    他に表示されない原因はございませんでしょうか。

    • こんにちは。コメントありがとうございます。
      よくある原因ですとキャッシュクリアしていなかったためにうまく動作しないとかは考えられるかもしれません。
      ただ、GoogleMapの問題の大半はこのリファラー関連だと思いますので、設定内容をいろいろ試してみるのもいいかと思います。
      (フルパスにしてみる等)

        • ザジエ
        • 2018年 8月 04日

        すみません。私のミスが判明しました。
        mapを配置してるsectionのdiv全てに、overflow:hidden を掛けていたのが原因でした。
        こんなことで数日ムダにしていた自分が恥ずかしいです。
        ご回答ありがとうございました。

        この返信を、新コメントでも書き込みしてしまいました。そちらは削除していただければ幸いです。ご迷惑おかけします。

        • こんばんは。
          最終的に無事動くようになったようで良かったです。
          また何かあれば遠慮なくコメントくださいね。

  1. この記事へのトラックバックはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

最強のWordPressテンプレート「賢威」

wordpress-keni

WordPressのSEO対策が気になるならWordPressテンプレートの最高峰「賢威」で間違いありません。

SAKU限定特典&レビュー

究極のサイト作成ツール「シリウス」

sirius

サイトアフィリエイトをより効率的に効果的に進めるサイト作成ツールならシリウス一択です。サイトアフィリエイトの神器みたいなものですよ!

SAKU限定特典&レビュー

アフィリエイトのバイブル「LUREA plus」

LUREA-plus

本気で稼ぐために必要なノウハウがギュッと詰め込まれた、全てのアフィリエイターのバイブルとなる教材です。 アフィリエイトの基礎からしっかりと取り組めます。 再現性も抜群です!

SAKU限定特典&レビュー

LUREA Plus関連記事
PAGE TOP