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キーを入力してください。
修正箇所1
最初の修正箇所です。
修正前
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
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」になれちゃうとちょっと他のプラグインに変えるっていうのはできないです。
次のバージョンアップあたりで修正されると助かるなー。
コメント
執筆日時を載せてください。そうしないと情報の新旧の判断ができません。
古い情報は今では使えないこともありますので読者には日付も大切な情報です。
うーん、まぁ確かに言ってることはわかるのですが…もう少し文面を考慮してほしいなぁ。
別にお金もらって書いてるわけでもないしなー。
「情報の新旧の判断ができないので、できれば執筆日時を載せていただけないでしょうか」とかさ。
そういうつもりはないんだろうけど、なんか上から命令されてるみたいで何様?と思ってしまいます。
言ってることは正しいのでとりあえず投稿日が表示されるようにテンプレートは改修しましたよ。
広告があるブログで日付を載せない理由の多くは
更新頻度の誤魔化しと古い日付を見て読まずに離脱する人を減らすことによる増収ですから
その憶測にとらわれて不躾な言い方になってしまったのかもしれません。
大変申し訳ありませんでした。
言葉だけのコミュニケーションは難しいですね。
とりあえず投稿日付(更新してても最初の投稿日のままです)を表示するようにしましたし、この件は終了ということで!
この記事が役に立ってたらいいなぁ。