プラグインを使用してGoogleMapsを簡単に、より場所を正確に読み込む｜WordPressでビジネスサイトをつくろう【第15回】

前回は複数のフォーマットのデザインの中で特定のカテゴリや固定ページ、またはTOPページなど場所によってグラフィク画像を適切に表示させる条件分岐のis_home()などをめました。

今回は会社概要ページのアクセスなどにGoogleMapsを読み込む際に便利なプラグイン「Google Maps v3 Shortcode」を紹介したいと思います。

簡単に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」を検索、インストールして有効化します。

プラグインを有効化することで個別記事やページの投稿画面で「Google Maps v3 Shortcode」のショートコードが利用できるようになります。

まずはデフォルトの表示を確認してみます。

たとえば固定ページや投稿記事に挿入したい場合には投稿本文の入力欄に「[map] 」と記述します。

地図の呼び出し

[map]

ここで「公開」ボタンを押して記事の表示を確認してみます。

世界地図がアクセスページに表示されているのが確認できます。

地図のサイズと場所を設定

.次に各パラメーターを設定していきます。

地図に任意の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″]　

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

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

ズームとマーカーを設定

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

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

今回は以上になります。

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

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

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