Google Map を使えばブログ記事に簡単に地図を埋め込むことができますが 、WordPress プラグイン「Simple Map」ならもっと手軽に利用することができます。
いちいち Google Map にアクセスして埋め込みコードを取得する手間が省けるので、地方のお店を紹介する記事なんかをよく書くなら重宝すること間違いなし。
スマホでは「指が乗ってもスクロールしない地図」を表示できるので、読者のイライラも軽減できるかもしれません。
Headline
Google Map をブログに埋め込むデメリット
プラグインを使用せず地図を載せる場合は、Google Map で目的地を決めて「埋め込みコード（iframe）」をコピペすれば OK です。
埋め込みコードは、「共有」ボタンから取得できます。
「地図を埋め込む」を選択するとこのようにコードが表示されるので、コピーして投稿画面に貼りつけます。
実際に表示するとこんな感じです。
地図掲載のたびに Google Map にアクセスするのが苦でなければ、とくにプラグインを使う必要はないかもしれません。
ただ、スマホ表示のスクロールに影響する、というのがネックなんですよね。
Google Map でスクロールできなくなる？
上のように小さい地図なら良いのですが、記事幅に合わせて大きな地図を表示するときは注意が必要です。
マウスホイールでスクロールしながら記事を読んでいるとき、カーソルが地図の上に載ってしまうと地図が拡大・縮小してしまうからです。
試しに、下の地図にカーソルを載せてマウスホイールをくるくるしてみてください。
スクロールしたいのに地図が動くと、ちょっとイラッとしますね。
パソコンならカーソルを動かせば良いのですが、画面幅の小さいスマホだとイライラ度が増してしまいます。
画面幅いっぱいで、高さも 1200px というちょっと極端な大きさの地図でシミュレーションしてみました。
頑張って画面の端を慎重にスクロールしないと、地図ばかり動いてしまいます……
スマホのみ地図の横幅を縮める方法
スマホ対応を考えるなら、CSS で地図の横幅を縮めてスクロール領域を確保したほうが良いかもしれません。
たとえばこんな指定をしておけば、スマホの画面横幅に対して 85 ％のサイズに縮小してくれます。
@media screen and (max-width : 480px){
iframe[src^="https://www.google.com/maps/"] { max-width: 85%; }
}
でも、ただでさえ小さい画面ですから、できれば横幅いっぱいに地図を表示して、なおかつスクロールにもスムーズに対応したいところですよね。
プラグイン「Simple Map」を使えば、この問題がすぐに解決できます！
Simple Map のインストールと使い方
インストールと有効化
他のプラグインと同様、管理画面の「プラグイン」から「Simple Map」で検索してインストールしましょう。
インストール終了後、有効化すれば OK です。
このプラグインには設定画面がなく、ショートコードで地図を表示します。
ショートコードで指定できるものをご紹介していきますので、よく使うものは AddQuicktag に登録しておきましょう。
ショートコードの基本的な使い方
地図を表示する基本形は 2 つあります。
ひとつめは、ショートコード内に「addr」をつけて住所または地名を入れる方法。
[map addr="札幌駅"][/map]
ふたつめは、住所または地名をそのままショートコードで囲む方法です。
[map]札幌駅[/map]
どちらか覚えやすいほうを使ってください。
このように表示されます（サンプル画像です）。
緯度と経度で目的地を指定する方法
目的地の住所がアバウトだったり、より正確に場所を指定したいときは、緯度と経度でも指定できます。
「lat」に緯度、「lng」に経度を入れます。
[map lat="43.055667" lng="141.353302"][/map]
サンプルは札幌の歓楽街「すすきの」です（とくに意味はないです…）。
幅と高さを指定する方法
Simple Map の初期サイズは、幅 100 ％・高さ 200px となっています。
任意の大きさに変更するときは、width と height を指定しましょう。
[map addr="札幌駅" width="300px" height="250px"][/map]
レスポンシブデザインなら、％ で横幅を指定したほうが柔軟に対応できると思います。
目的地に吹きだし（メッセージ）を表示する方法
目的地にメッセージを表示するときは、ショートコード内に「infowindow=”open”」を追加しましょう。
ショートコードで囲んだところがメッセージ本文になります。
[map addr="渡島大野駅" width="500px" height="400px" infowindow="open"]2016年3月26日・北海道新幹線開業！[/map]
このように吹きだしが表示されます。
地図の縮尺（倍率）を変更する方法
地図の倍率は初期値で「16」に設定されています。変更したいときは「zoom」で指定しましょう。
[map addr="渡島大野駅" width="500px" height="400px" infowindow="open" zoom="1"]2016年3月26日・北海道新幹線開業！[/map]
「zoom=”1″」にすると、世界地図が表示されます！
倍率の上限は表示する場所によって変わるようですが、だいたい「21」ぐらいまでのようですね。
スマホでは地図が画像になる
冒頭でスクロールについて触れましたが、Simple Map で表示している地図はマウスホイールでクルクルしても縮尺が変更されず、通常どおりスクロールすることができます。
また、画面幅が 480 px 以下になると地図を画像で表示してくれます（Google Static Maps）。
地図をタップすると Google Map に移動するかアプリが起動する仕組みですね。
Google Static Maps に切り替わる画面幅サイズを任意に変更するときは、「breakpoint」を指定しましょう。
[map addr="札幌駅" breakpoint="768px"][/map]
デフォルト設定でもとくに問題ないと思います。
マーカーが表示されないときの対処法
レスポンシブ Web デザインのテーマで、div が親要素からはみ出ないように max-width が指定されていることがあります。
div { max-width: 100% }
この指定が入っているとマーカーや縮尺ボタンが表示されません。
もし表示されていないときは、Simple Map のみ max-width を解除しましょう。
.simplemap,
.simplemap div {
max-width: none;
}
これで表示されるようになります。
Google Map はルートを表示できるメリットがある
オリジナルの Google Map にはデメリットがある！ と述べましたが、「出発地から目的地へのルートを表示できる」というメリットがあるんですよね。
ブログの目的によってはこちらの機能が便利かもしれません。
ルート付きマップ作成方法
Google Map 左上のツールバーから「ルートボタン」を選択。
上の段に「出発地」、下の段に「目的地」を入力します（地図をクリックしても OK ）。
ためしに、出発地を札幌駅、目的地を六花亭札幌本店にしてみます。
地図上にもルートが表示されていますね。
この状態で、左上の「メニューボタン」をクリック。
メニューが出てきたら、「共有または埋め込む」を選択して埋め込みコードをコピペします。
すると、以下のようにルート付きの地図が表示されます。
もちろん、自動車や飛行機で移動するような広範囲なマップも指定可能です。
ELLORA にだって行けちゃう！？
まとめ
目的地のみを表示するなら「Simple Map」、ルートも表示したいなら「Google Map」と使いわけるのが良いかもしれませんね。
ただ住所を表示するよりは地図もあったほうが親切ですから、目的に合わせて使いこなしてみましょう。
それでは、また。