WordPressのプラグインsimple mapでAPIキーを設定しているのに地図が表示されない。

2016年の夏ごろにGoogleが新規にGoogleMapをGoogleAPIを使って利用するにつき、APIキーの取得を義務付けたようです。Google APIを使っての地図表示の話ですので、iFrameでGoogleMapを自サイトに埋め込んでいる人には関係がありません。

数年前のGoogleMapのapi3か2かの時に、APIキーが必要で、取得した記憶がありますが、そういえばワードプレスではキーなど取得せずプラグインだけで使っていましたね。Wordpressの「SimpleMap」というプラグインでグーグルマップ表示を使っています。

夏を過ぎても普通に地図が表示されていたので、正直この問題はあまり深く考えていませんでした。

ところが、使用しているWordpress(以下WP)のプラグイン管理画面で、このSimpleMapからAPIキーの取得の警告が出るようになったので、そのままも何だな、とAPIキーを取得し設定することに。

APIキーの取得は、グーグルのdevelopers consoleという開発者向けの管理画面で行います。最初はわかりにくいですが、プロジェクトを作成し、キーの取得と制限・サイトの登録などを行います。

そして、取得したAPIキーをWPのプラグインSimpleMapの設定画面で入力保存。これでよしよし、と思っていたのですが、ある時スマホの画面ではGogoleMapが表示されていないことに気付きました。PCの画面では表示されますが、PCでもレスポンシブルで画面の幅を縮めて再読み込みするとGoogleMapが表示さず地図のエリアが空白です。エラーのテキスト表示は無し。

キーの制限の設定が間違っているのかといろいろ調べてみたのですが、間違ってはいないと思います。ちなみに、キー制限のリファラ―は設定アドレスは、

ドメイン名/*

という記載にしています。※先頭の「*」は不要とどこかに書いてありました。

サブドメインを有効にする場合に「*.ドメイン名/*」でしょうか。

で、検証のため別のWPサイトでもSimpleMapを使ってのGoogleMap表示を試してみたのですが(APIキーを取得・入力しての)、今度はこちらではPCでもモバイルでもエラーと表示される始末。

エラー内容
「このページでは Google マップが正しく読み込まれませんでした。JavaScript コンソールで技術情報をご確認ください。」

エラーの回避方法は検索するとひっかかりますが、コンソールでエラー内容を確認するとAPIキーとは関係ないようでした。検索ででてくる解決方法はキーが無い云々なのでそもそも原因が違うのかな!?と。

 

htmlを見ると、SimpleMapがGoogleMapAPIを読み込む際のアドレスは、「googlapi.com」ではない「maps.google.com」の古いURLバージョンですよね。これは原因ではないの?とか勝手に考えたり・・。でもSimpleMapのプラグイン修正更新もないようなので、これはエラー原因ではないということなのかな!?

で、どうするか?あきらめるか?ですが・・・。

 

とりあえずの解決策で・・・

APIキーの設定を外しました!

解決策でもなんでもないですが、これでとりあえずは、モバイルでもPCでもちゃんとGoogleMapが表示されます。

そもそもGoogleのアナウンスした制限は新規サイトでのGoogleMapの利用についてのAPIキー制限なので、とりあえず既存のサイトはAPIキー入れなくでも大丈夫と言うことなんでしょう。(Google様のさじ加減次第ですが(^^;)

もちろん新しく何か判明したらまたメモします。※その後の解決策を下の方に追記しました。

 

しっかし、GoogleはWEBのあらゆる分野でシェアを確保しているので、WEB関連業者はもはやお上には逆らえない状況になってきましたね。今は無料で利用できているサービスが突然有料サービスに切り替わることも十分に有りうるわけです。検索、地図、解析、広告・・etc、これからもGoogleのWEB界の絶対的覇権は着実に進んで行くのでしょうね・・・。

インターホン:「ピンポーン!」

あれ、こんな時間に誰か来たみたいです、ちょっと出てきま・・・!・・・うわ、誰だお前、何をすrfgjhjadga;k……。

 

*****

※その後、ちゃんと解決しました![追記翌日]

エラーが出いていたGooglMap。simplemapにAPIキーを設定してちゃんとGoogleMapの表示ができましたのその解決メモを。

修正した点は2点。

1. まずAPIの制限リファラーの設定ですが。

Google公式の記入例になっている「*.ドメイン/*」。

これはドメインの下位とドメイン手前(サブドメイン)にワイルドカードを適用した記入例になると思います。サブドメインが関係ない人は「ドメイン名/*」という記入で問題ありません。私はその記載でいけました。

2.次に、SimpleMapのプラグインの修正です。

この修正が必要がどうかは検証してないのですが、先に修正してしまってから、その後うまくマップ表示ができましたので、一応載せておきます。(※プラグイン作者が修正していないので、たぶん修正しなくていいのかな!?あくまで自己責任で。)

WPのプラグイン画面でSimpleMapの【プラグインの編集】を選びます。

simple-map.phpのソース記述内の3/5程のあたりに(行数えていません)、

public function get_api_url() {

という、APIurlの記述箇所があり、その少し下に

$url = esc_url( ‘///maps.google.com/maps/api/js’ . $apikey );

というGoogleAPIへのリンク記述があります。

このアドレスを新しいGoogleのAPIのアドレス↓↓↓に変更してみました。

$url = esc_url( ‘//maps.googleapis.com/maps/api/js’ . $apikey );

 

このあと、WPの記事で表示を確認しましたら、エラー表示が消えてちゃんとGoogleMapが表示されていました。

何度も言いますが、2は不要かもしれません。きちんとAPIキーの制限設定をしていたらちゃんと動くと。この問題は、夏以降に新規ドメインでWP作って、しかもGoogleMapを多用するサイトで問題になるので、実際にトラブってる人は少ないのかもしれません。

リファラーの制限も面倒だし大丈夫だろうとしない人もいるでしょうしね。

以上、何かのご参考までに。[追記記載:2016.9.30]

 

 


Adv.

 

6 comments

  1. はじめまして。
    Simple Mapの設定について調べていて、こちらにたどり着きました。

    https://wp-exp.com/blog/simple-map/

    こちらの記事にて紹介されているAPIキーを踏まえたsimple mapの反映についてですが、どうやら最近ほかの設定もしないといけないようで、この記事で紹介されている内容だけではうまく表示されないようです。

    詳しい復旧方法は私も調査中です。
    既存ページで使用していたsimple mapのコードについては問題なく動いてますが、新しいページでsimple mapのコードを埋め込むと、問題が発生するようです。
    以下、私のサイトのURLですが、例として。

    過去に作成した表示されるページ
    http://italia-mania.jp/roma/roma-hotel/royalsantina/#RomaLoyalSantina_Detail_Place

    最近作成した表示されないページ
    http://italia-mania.jp/roma/roma-ristorante/retrobottega/#Retrobottega_Detail_Place

    私も調査中ですが、この修正方法、ご存知でしたら記事にして頂けると大変助かります。

    1. イタリアまにあさん、こんにちわ。

      もう解決済みかもしれませんが・・・。

      simpleMapで私がこれまでトラッブった時の要点は、
      ・APIキーの取得とリファラー設定
      ・プラグインのjs読み込みアドレス
      ・Google API「Static Maps API」の有効化
      の3点でした。
      「Static Maps API」は、たしか、simpleMapがスマホの時の表示で使ってたのだったかな。

      イタリアまにあさんの状況の解決策にならないかもしれませんが、記事は下記です(ご参考までに)。

      https://web-proworks.net/api%e3%82%ad%e3%83%bc%e3%82%92%e8%a8%ad%e5%ae%9a%e3%81%97%e3%81%a6%e3%81%84%e3%82%8b%e3%81%ae%e3%81%ab%e3%82%b9%e3%83%9e%e3%83%9b%e3%81%a7google-map%e3%81%8c%e8%a1%a8%e7%a4%ba%e3%81%95%e3%82%8c/

      1. 管理人様、

        ご丁寧にありがとうございます。
        改めてコードを見ていて発覚したのですが、私のサイトのsimple mapについては、スマホでは表示されるもののPCでは表示されないという、全く逆の事象でした。
        ググって見ても、スマホでは出ないという記事はあってもPCで出ないというもの見つからず、いよいよ八方塞がりです。
        こちらについて、何か心当たりがあれば、アドバイスくださると非常にありがたいです。

        1. イタリアまにあさんが記載された「過去に作成した表示されるページ」を見てみましたが、地図は出ませんね。
          で、jsでは、simplemapに
          「Uncaught TypeError: Cannot read property ‘length’ of null」
          のエラーが出ています。

          出力されているソースを見ると480px以下でwidth:100%切り替えになっているようですが、480px以上のサイズ(PCなど)で幅の設定はされていますか?
          GoogleMapの表示枠の幅設定を念のためごご確認ください。

          表示されない原因とは関係無いようでしたら、すいません。

          ※追記

          もう少しサイトを見てみましたが、マップエリアが表示されない原因はcssでdisplay:none;がかかっています。で、私が使っているsimleMapの表示サイトを見てみましたが、同じくdisplay:none;がインラインでかかっていますが、さらにインラインのcssでdisplay:block;で上書きされているため、エリアが表示されています(プラウザ機能の要素を検証で見たらわかります)。

          イタリアまにあさんのSimpleMap地図エリアはテーブル構成のthタグ内に入っていますが、テーブルタグ終わりに地図の表示位置を変更(地図タグをテーブル内から出す)してみても変わりませんか?スマホでは、display:blockが効いて表示されているようなので、それがPCで表示されない原因だと思われます。なぜPCでそうなっているかはこちらではわかりませんが。、

          1. 管理人様、

            そういうことでしたか!!!
            全く気づきませんでしたし、思いつきもしませんでした。
            ありがとうございます。
            前表示されていた時から何もいじっていないのですが、何か変わったんですかね。

            というわけで、修正のため、simple mapプラグインのphpファイルの中の一部を

            変更前
            echo “.simplemap img{max-width:none !important;padding:0 !important;margin:0 !important;}.staticmap,.staticmap img{max-width:100% !important;height:auto !important;}.simplemap .simplemap-content{display:none;}\n”;

            変更後
            echo “.simplemap img{max-width:none !important;padding:0 !important;margin:0 !important;}.staticmap,.staticmap img{max-width:100% !important;height:auto !important;}.simplemap .simplemap-content{display:block;}\n”;

            として見ましたところ、今まで全く表示されなかった地図の枠の表示はされるのですが、PC版では灰色で囲まれているだけで、地図が表示されず…
            http://italia-mania.jp/verona/verona-ristorante/cangrande/

            スマホだと表示されていますので、ブラウザの幅を変えてみたらどうなるか試したところ、PCからではやはり表示されません。

            これはさすがにお手上げです。

          2. うーん、ちょっとわかりませんね。
            私の場合は、プラグインのPHPはいじってないと思います。

            地図が読み込めている私のCSS状態とイタリアまにあさんのCSSの比較をアップしましたのでご参考までに(関係ないかもですが)。

            https://web-proworks.net/wp-content/uploads/2018/06/ss_000078.jpg
            ※display:none;を直接書き換えなくて、も他の仕組みでdisplay:block;が入るようにプラグインはなっているはずです。

            Simple Map バージョン 4.9.0

            記事html 挿入コード
            [map lat=”XXXXX” lng=”XXXXXX” zoom=”14″ height=”300px”][/map]

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA