Googleマップをシンプルに表示させるSimple Mapが便利すぎた。【地図挿入プラグイン】

昨日タチウオ釣りのポイントガイド的記事を書いたのですが。ポイントガイドだけあって、もちろん地図をボンボン貼り付けたわけです。ところが、この地図を貼り付けるという作業自体、実はけっこうメンドクサイwということで、WordPressにGoogleマップを貼り付けられるプラグイン、Simple Mapを導入してみました。

コードは自分で書く必要がある。

プラグイン自体はダッシュボードから検索すればすぐに出てきます。有効化すれば、あとは記事作成時にコードを記述するだけ。住所か緯度・経度を指示してやればOK。基本のコード構成は

map parameter="value"

となります。(なかなかうまく表示させられなかったのですが、このコードは[]でくくる必要があります)
頭にmapをつけて、あとは細かい指示を出していくわけです。

例として「大阪市北区梅田1-1-1(大阪駅前第三ビル)」を表示させた地図を書きたい場合は

map addr="大阪市北区梅田1-1-1"

と記述します。(しつこいですがこのコードは[]でくくる必要があります)表示例は以下のとおり。

大阪市北区梅田1-1-1

緯度・経度で表示させるときは、別タブでGoogleマップを開き、ピンを立てたいところにポインタを置いてそこで右クリック。「この場所について」をクリックすれば、検索窓に緯度・経度が表示されます。latが緯度、lngが経度を表しますので、先ほどの大阪駅前第三ビルを緯度・経度で指示すると、

map lat="34.698755" lng"135.499416"

となり、(何度もしつこいですがこのコードは[]でくくる必要があります)実際の表示は


です。住所を打ち込んだときとほとんど変わりませんね。ですが、広場のこの辺、とか、公園のこの辺などと指定したい場合は緯度・経度じゃないと表現できません。釣り場案内もまたしかり、です。

そのほかのコード

width:横幅。pxでも%でもOK。デフォルトは100%
height:高さ。pxでも%でもOK。デフォルトは200px
zoom:地図のズーム。1にすれば世界地図が表示されます。デフォルトは16
breakpoint:Google Static Mapsに切り替えるpxを指定。デフォルトは480px

widthとheightは、%にしておけばレスポンシブデザインのサイトでも対応しやすいですね。
zoomは、前の記事では釣り場の紹介のため、ある程度広域を表示したかったので14で使いました。
breakpointですが、これはGoogle Static Mapsに切り替えるpxを指定します。Google Static Mapsとは、地図を画像として表示してくれるものです。普通のGoogleマップのままだと、例えばスマホで触ったときに地図がスクロールしてしまって場所がわからなくなったりしますよね。それを防ぐためにサイズを指定しておき、それよりサイズがちいさくなったらGoogle Static Mapsに切り替えるようにするものです。私は320pxで設定しました。(iPadは普通のGoogleマップ、iPhoneはGoogle Static Mapsを表示させる)

便利に使うテクニック

なんだかんだでつどつどコードを打ち込む必要があるプラグインですので、ある程度フォーマットを決めて単語登録しておくなり、AddQuicktagに設定しておくなりすると便利です。

わたしの場合は

map lat="" lng="" height="320px" zoom="14" breakpoint="320"
map addr="" height="320px" zoom="14" breakpoint="320"

を登録してあります。住所を打ち込むか緯度・経度を打ち込めば決まった大きさの地図が出てくるわけですね。あ、繰り返しますがこのコードは[]で(ry

表示例としてはこんな感じの地図になります。

大阪市北区梅田1-1-1

最初に何度か表示テストする⇒いい塩梅のコードを定型文化しておく。そうすれば非常に便利な地図挿入プラグインになります。地図を記事に入れるのに苦労していた方はぜひお使いください。

スポンサーリンク
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。