WordPress:Simple Mapでスマホ画面だけGoogle Mapが表示されない場合の対処方法

WordPress

2016.10.042022.11.08

Google Mapを簡単に記事に埋め込めるWordPressのプラグイン「Simple Map」で埋め込んだGoogle Mapがスマホで表示されない場合の回避策です。

「Simple Map」でWordPressの記事に地図を埋め込んだところ、PCではきちんと表示されるものの、なぜかスマホで同じ記事を見ると表示されていませんでした。

スマホでもきちんと表示させるための暫定対処について覚書しました。

Google Mapが表示されない原因

いつからかGoogle Mapを使用するのにAPIキーが必要となりました。

「Simple Map」にもAPIキーを入力するの設定が追加されましたが、設定したAPIキーをプログラム中できちんと処理できていないようです。

APIキーを設定してもスマホ画面を表示してデバッグモードで見ると以下のようなエラーが発生してました。

google_map_api_key is not defined

Google MapのAPIキーが定義されていませんよという内容です。

「Simple Map」の処理をしているsimple-map.min.jsに直接APIキーを埋め込むことで問題を回避できます。

simple-map.min.jsを修正するので必ずバックアップを取っておきましょう。

simple-map.min.jsは、wp-content/plugins/simple-map/js フォルダに保存されていますので、FTPでダンロードして修正後アップロードして差し替えるのでも構いませんし、WordPressの[プラグイン編集]から直接行っても構いません。

修正箇所は2箇所です。

jsファイルのサイズ最小化のため改行コードが削除されており非常にわかりづらいのですが、文字列検索などで該当箇所を見つけてください。

修正後のコード中の"XXXXXXXXXX"部分に自分のAPIキーを入力してください。

最初の修正箇所です。

maps.googleapis.com/maps/api/staticmap";a.url&&(e=a.url,delete a.url),e+="?";

maps.googleapis.com/maps/api/staticmap?;key=XXXXXXXXXX";a.url&&(e=a.url,delete a.url),e+="&";

2番めの修正箇所です。

a(n).attr("src",m+"&key="+google_map_api_key)

a(n).attr("src",m+"&key=XXXXXXXXXX")

修正内容を保存後、simple-map.min.jsを差し替えてください。

対処後に新たなバージョンの「Simple Map」が公開され、アップデートした場合 simple-map.min.js が差し替わって修正した箇所が元の状態に戻ってしまうかもしれません。

この問題が解決されたバージョンが出るまではバージョンアップは控えたほうが良いかと思います。

「Simple Map」でこの問題に気づいたときにいっそ別のプラグインに変えてしまおうかと思ったのですが、やっぱり簡単さとスマホのような小さい画面(一定サイズ以下の画面サイズ)の場合に埋め込んだGoogle Mapを自動でStatic Mapで表示してくれる機能を諦めきれませんでした。

他のプラグインでもそういった機能を持つものはあるとは思いますが、英語面倒だし、シンプルじゃないし。

日本語で簡単に使える「Simple Map」になれちゃうとちょっと他のプラグインに変えるっていうのはできないです。

次のバージョンアップあたりで修正されると助かるなー。