プラグインを使用してGoogleMapsを簡単により場所を正確に読み込む

前回は複数のフォーマットのデザインの中で特定のカテゴリや固定ページ、またはTOPページなど場所によってグラフィク画像を適切に表示させる条件分岐のis_home()などをまとめました。今回は会社概要ページのアクセスなどにGoogleMapsを読み込む際に便利なプラグイン「Google Maps v3 Shortcode」を紹介したいと思います。

解説：（有）ムーニーワークス　ハヤシユタカ

GoogleMapsは普通に住所などを検索してそのまま埋め込みコードを貼り付けると表示することができますが、たまに隣のビルなどちょっとだけずれてしまうときなどがあります。また表示する際のサイズや拡大率を調整したいなどを考えると、今回のプラグイン「Google Maps v3 Shortcode」は便利です。ただ設定画面などがないため、パッと使おうとすると迷うかもしれませんが、設置方法をまとめていきます。

Google Mapsは使用変更によってverがあがると使えなくなる可能性があります。現在は「Google Maps v3」のverで使えます。以前制作している最中にV2からV3に変更があり、取得の仕方が変更になってしまったことがありました。この辺もプラグイン使用の際に気をつけましょう。

サンプルサイトはこちらからご覧になれます。
http://wordpress-book.webdesignmatome.com/company/access/

 

プラグインの「Google Maps v3 Shortcode」を検索、インストールして有効化します。

 

次に各パラメーターを設定していきます。
地図に任意のid名「map」と付けて表示する幅を600px、高さを320pxにします。

○地図のサイズの設定

[map id="map" w="600" h="320"]　

幅：「w="数値"」、高さ：「h="数値"」となります。続いて表示座標を入力します。こうすることで住所での微妙なズレをなくし、自由にマーカーを設定することが可能です。

表示座標を取得の方法は簡単でGoogleマップ使用中に特定の場所で地図を右クリックして[この場所について] を選択すると、座標が自動的に検索ボックスに入力されます。

サンプルとして六本木ヒルズ周辺の地図をみてみます。

Googleマップで「六本木ヒルズ」と検索すると下の図のような場所にマーカーがつきます。

しかし、六本木ヒルズ内は大きいので、特定のショップやイベント会場などにマーカーを付けたいという機会もあると思います。

そこで今回はサンプルとしてヒルズ内の池にマーカーを付けました。

特定の地図の場所にマーカーを置きたい場合は、置きたい箇所に右クリックして「この場所について」を選択します。

そうすると緑の矢印がついてここに座標が表示されますのでここの数値を使用します。

○今回取得した座標

35.660363,139.730548

最初の数値が「緯度（lat）」、後ろの数値が「経度（lon）」になります。

取得した座標を「lat="" lon=""」で設定します。

○座標を設定

[map id="map" lat="35.660363" lon="139.730548" w="600" h="320"]

ズームの設定は「z="数値"」、マーカーの表示は「marker="yes"」となります。

最後に表示する地図のズームを18に設定してマーカーを付けて完了です。


○ズームとマーカーを設定

[map id="map" lat="35.660363" lon="139.730548" w="600" h="320" z="18" marker="yes"]

このように設定することで簡単かつ詳細にマーカーを設定できるので便利です。

今回は以上になります。

今回とりあえたサンプルは、WordPressでビジネスサイトでよく使用する表現をすべてまとめた著書「WordPress 3.x 現場のワークフローで覚えるビジネスサイト制作」のサンプルを使用しています。本書ではサイト作りのすべてのソースコードを用意して迷うことなくWordPressでビジネスサイト作るの工程を学べる内容となっています。

どのようなページを作れるかなどは、こちらにサンプルサイトと本の内容をまとめてありますのでWordPressでのサイト作りに興味を持ちましたら是非こちらもご覧ください。

URL:http://www.html5-memo.com/other/wordpress-book/

---