18 Shares

スマホ対応のGoogle Mapを簡単に埋め込みできる「Simple Map」の使い方

地球儀

Google Map を使えばブログ記事に簡単に地図を埋め込むことができますが 、WordPress プラグイン「Simple Map」ならもっと手軽に利用することができます。

いちいち Google Map にアクセスして埋め込みコードを取得する手間が省けるので、地方のお店を紹介する記事なんかをよく書くなら重宝すること間違いなし。

スマホでは「指が乗ってもスクロールしない地図」を表示できるので、読者のイライラも軽減できるかもしれません。

Google Map をブログに埋め込むデメリット

プラグインを使用せず地図を載せる場合は、Google Map で目的地を決めて「埋め込みコード(iframe)」をコピペすれば OK です。

埋め込みコードは、「共有」ボタンから取得できます。

Google Map 共有ボタン

「地図を埋め込む」を選択するとこのようにコードが表示されるので、コピーして投稿画面に貼りつけます。

Google Map 埋め込みコード

実際に表示するとこんな感じです。

地図掲載のたびに Google Map にアクセスするのが苦でなければ、とくにプラグインを使う必要はないかもしれません。

ただ、スマホ表示のスクロールに影響する、というのがネックなんですよね。

Google Map でスクロールできなくなる?

上のように小さい地図なら良いのですが、記事幅に合わせて大きな地図を表示するときは注意が必要です。

マウスホイールでスクロールしながら記事を読んでいるとき、カーソルが地図の上に載ってしまうと地図が拡大・縮小してしまうからです。

試しに、下の地図にカーソルを載せてマウスホイールをくるくるしてみてください。

スクロールしたいのに地図が動くと、ちょっとイラッとしますね。

パソコンならカーソルを動かせば良いのですが、画面幅の小さいスマホだとイライラ度が増してしまいます。

画面幅いっぱいで、高さも 1200px というちょっと極端な大きさの地図でシミュレーションしてみました。

スマホでGoogle Mapを見るとスクロールしづらい

頑張って画面の端を慎重にスクロールしないと、地図ばかり動いてしまいます……

スマホのみ地図の横幅を縮める方法

スマホ対応を考えるなら、CSS で地図の横幅を縮めてスクロール領域を確保したほうが良いかもしれません。

たとえばこんな指定をしておけば、スマホの画面横幅に対して 85 %のサイズに縮小してくれます。

でも、ただでさえ小さい画面ですから、できれば横幅いっぱいに地図を表示して、なおかつスクロールにもスムーズに対応したいところですよね。

プラグイン「Simple Map」を使えば、この問題がすぐに解決できます!

Simple Map のインストールと使い方

インストールと有効化

他のプラグインと同様、管理画面の「プラグイン」から「Simple Map」で検索してインストールしましょう。

Simple Map インストール

インストール終了後、有効化すれば OK です。

Simple Map 有効化

このプラグインには設定画面がなく、ショートコードで地図を表示します。

ショートコードで指定できるものをご紹介していきますので、よく使うものは AddQuicktag に登録しておきましょう。

ショートコードの基本的な使い方

地図を表示する基本形は 2 つあります。

ひとつめは、ショートコード内に「addr」をつけて住所または地名を入れる方法。

ふたつめは、住所または地名をそのままショートコードで囲む方法です。

どちらか覚えやすいほうを使ってください。

このように表示されます(サンプル画像です)。

Simple Map 基本形

緯度と経度で目的地を指定する方法

目的地の住所がアバウトだったり、より正確に場所を指定したいときは、緯度と経度でも指定できます。

「lat」に緯度、「lng」に経度を入れます。

サンプルは札幌の歓楽街「すすきの」です(とくに意味はないです…)。

Simple Map 緯度経度

幅と高さを指定する方法

Simple Map の初期サイズは、幅 100 %・高さ 200px となっています。

任意の大きさに変更するときは、width と height を指定しましょう。

レスポンシブデザインなら、% で横幅を指定したほうが柔軟に対応できると思います。

Simple Map 大きさ指定

目的地に吹きだし(メッセージ)を表示する方法

目的地にメッセージを表示するときは、ショートコード内に「infowindow=”open”」を追加しましょう。

ショートコードで囲んだところがメッセージ本文になります。

このように吹きだしが表示されます。

Simple Map メッセージ表示

地図の縮尺(倍率)を変更する方法

地図の倍率は初期値で「16」に設定されています。変更したいときは「zoom」で指定しましょう。

「zoom=”1″」にすると、世界地図が表示されます!

Simple Map Zoom 1

倍率の上限は表示する場所によって変わるようですが、だいたい「21」ぐらいまでのようですね。

スマホでは地図が画像になる

冒頭でスクロールについて触れましたが、Simple Map で表示している地図はマウスホイールでクルクルしても縮尺が変更されず、通常どおりスクロールすることができます。

また、画面幅が 480 px 以下になると地図を画像で表示してくれます(Google Static Maps)。

Simple Mapはスマホだと画像で表示される

スマホ表示では地図が画像になっている

地図をタップすると Google Map に移動するかアプリが起動する仕組みですね。

Google Static Maps に切り替わる画面幅サイズを任意に変更するときは、「breakpoint」を指定しましょう。

デフォルト設定でもとくに問題ないと思います。

マーカーが表示されないときの対処法

レスポンシブ Web デザインのテーマで、div が親要素からはみ出ないように max-width が指定されていることがあります。

この指定が入っているとマーカーや縮尺ボタンが表示されません。

Simple Map マーカーが表示されない

もし表示されていないときは、Simple Map のみ max-width を解除しましょう。

これで表示されるようになります。

Simple Map のマーカーと縮尺ボタン表示

Google Map はルートを表示できるメリットがある

オリジナルの Google Map にはデメリットがある! と述べましたが、「出発地から目的地へのルートを表示できる」というメリットがあるんですよね。

ブログの目的によってはこちらの機能が便利かもしれません。

ルート付きマップ作成方法

Google Map 左上のツールバーから「ルートボタン」を選択。

Google Map ルート

上の段に「出発地」、下の段に「目的地」を入力します(地図をクリックしても OK )。

Google Map ルート選択

ためしに、出発地を札幌駅、目的地を六花亭札幌本店にしてみます。

Google map 出発地・目的地設定

地図上にもルートが表示されていますね。

Google Map ルート

この状態で、左上の「メニューボタン」をクリック。

Google Map メニューボタン

メニューが出てきたら、「共有または埋め込む」を選択して埋め込みコードをコピペします。

Google Map埋め込み

すると、以下のようにルート付きの地図が表示されます。

もちろん、自動車や飛行機で移動するような広範囲なマップも指定可能です。

ELLORA にだって行けちゃう!?

まとめ

目的地のみを表示するなら「Simple Map」、ルートも表示したいなら「Google Map」と使いわけるのが良いかもしれませんね。

ただ住所を表示するよりは地図もあったほうが親切ですから、目的に合わせて使いこなしてみましょう。

それでは、また。