スマホでスクロールさせないGoogleマップが簡単に貼れるWordPressプラグイン「Simple Map」

スマホなどのタッチスクリーンでスクロールしているとGoogleマップ に引っ掛かってしまってストレスを感じた経験はないですか？
解決策としてGoogleマップには「Google Static Maps」というマップを画像として読み込むAPIがあるようです。この機能を簡単に使えるプラグインがあったので紹介します。

プラグインをインストールする

プラグインは有効化するだけでOK。特に設定するところはありません。

簡単にこのプラグインの特徴を紹介すると

• ショートコードと住所を入力してマップを表示する
• 横幅によってGoogle Static Mapsに切り換えることができる
• ウィンドウ幅に合わせて可変するレスポンシブ対応
• スマホでタップするとGoogleマップ（Chromeの場合はアプリ）を開く

といった感じ。難しい設定や書き方をする必要もありません。

Simple Mapの使い方

使い方はごくシンプル。3パターンあるショートコード内に住所を入力するだけです。

※角括弧[]は全角にしてますが半角に変更して使ってください

緯度経度は住所よりも精度が高いですが調べる手間があるので正しい位置に表示されない場合に使用するといいと思います。

Googleマップで緯度経度を調べるには副クリックから[この場所について]を選択します。

画面左に緯度と経度が表示されるのでコピーして使いましょう。

その他にオプションがあります。（改行してます）

デフォルトでは上記のように設定されています。変更する場合は半角スペースを付けて変更したいところだけ追加していきます。例えばheightを300px、zoomを10にといった具合です。

[breakpoint]はGoogle Static Mapsの切り替えをする横幅を指定します。デフォルトでは480px以下に適応されます。

個別に指定するとあとあと面倒くさそうなのでプラグインの[編集]から[simple-map/simple-map.php]を選択して全体の設定を変更してしまうのがいいと思います。

RSSフィードには表示されないので気をつけてください。

---

あとはsimplemapというdivに囲まれるのでここにmargin-bottomを追加するくらいです。その他詳細は開発者さんのサイトをご覧下さい。

ショートコードで簡単に貼り付けることができるのでiPhoneなどで記事を書く時にも使えそうですね。