Google Maps v3 Shortcodeを使ってWordPressに地図を埋め込む

WordPressの記事にGoogle Mapを埋め込むプラグインはいくつかありますが、その中でも特にお勧めなのがGoogle Maps v3 Shortcodeです。

このプラグインは、「Google Maps v3 API」を利用してマップを表示してくれるプラグインなのですが、様々なパラメータが用意されており、中でもマップに挿入されるアイコンをオリジナルのモノに変更できる機能が便利です。

WordPress Plugin: Google Maps v3 Shortcode

上記は海外のサイト(このプラグインの製作者様のブログ)ですが、詳細に各種パラメータが詳しく解説されています。今回は、上記の解説サイトを元に、各種パラメーターの動きを解説したいと思います。

スポンサーリンク

Google Maps v3 Shortcodeのインストール

まずはGoogle Maps v3 Shortcodeをインストールします。公式サイトからダウンロードしてくるか、管理画面→プラグインから「Google Maps v3 Shortcode」を検索して、直接インストールしてください。

以下、プラグインを有効化した前提で解説を進めていきます。

Google Maps v3 Shortcodeの使い方

まずは最も基本となる、GoogleMapを表示させるためのパラメータです。このタグの記述は、ビジュアルモードでもテキストモードでもどちらでもかまいません。

[ map ]

このタグをエントリーの中に記述すると、Google Mapがとりあえずデフォルトの状態で表示されます。この状態から、自分の好みの状態にカスタマイズしていくことになります。

タグを記述する注意点として、上記で表示しているタグでは[]←この括弧と「map」の間に半角スペースを入れていますが、実際にはスペースはなしで、連続した文字列で記述してください。

Google Maps v3 Shortcodを有効にして、タグを入れたのに表示がされない・・・という方は、その原因はおそらく、解説サイトで表示されているタグをそのままコピペして貼り付けているために、余分な半角スペースが記入されて表示されないという場合がほとんどです。

[map id=”map1″]

デフォルトの状態だと、この様に表示されます。ここから一つずつ、実際の表示を出しながらタグを紹介していきます。※上記のサンプルのように、マップが正しく表示されたことを確認して以下のサンプルを確認してください。

住所を設定する

とりあえず利用するだけであれば、以下のタグを記述すればOKです。

[ map address="住所を入力" z=14"]

[map id=”map0″ address=”東京都” z=”14″]

z=”14″は後述しますが、拡大と縮小の度合いをコントロールすることができます。

横幅と高さの設定

デフォルトの状態では、横幅が400ピクセル、高さが300ピクセルとなっています。

  • w=”400(pixels)
  • h=”300(pixels)

しつこい様ですが、実際にタグを入力する際は[]の前後にある半角スペースは無い状態で打ち込んでください。そのままコピペしても正しく表示されません。

[ map w="500" h="200" ]

[map id=”map2″ w=”500″ h=”200″]

実際の表示はこちら。

縮尺の初期設定

初期設定はz=”1″に設定されており、0から20の間で数字を設定できます。0がマイナス方向で、20がプラス方向です。

[ map z="0" ]

[map id=”map3″ z=”0″]

設定値を0にした状態。通常は14や15あたりのズームレベルを設定することになります。

マップを複数表示する

デフォルトのままだと、1画面に一つのマップ(1記事に一つではない)しか表示できませんが、idを指定することで、複数のマップ表示が可能となります。id=”map1″、id=”map2″といった感じでID名を変更して、複数表示に対応させます。

[ map h="200" id="map1" ]
[ map h="200" id="map2" ]

[map h=”200″ id=”map4″]
[map h=”200″ id=”map5″]

実際の表示です。確認していませんが、複数表示の上限はなさそうです。サンプルではid=”map1″と数字の連番にしていますが、もちろんid=”hogehoge”といった様に、自由に名前をふることができます。全角文字でも動作しましたが、念のためid名には半角英数字のみを使うようにしましょう。

ちなみに、数字から始まるid名だと正しく動作しませんでした。(id=”123″等)

マップのタイプ

表示のタイプをロードマップのタイプにするか、衛星写真モードにするか、地名を表示させるか等の設定を行なえます。デフォルトではロードマップモード(通常の地図表示:ROADMAP)になっていますが、衛星写真(航空写真)モードで表示すれば、少しだけ特別(?)な気分を味わえます。

[ map z="1" h="150" maptype="ROADMAP" ]
[ map z="1" h="150" maptype="SATELLITE" ]
[ map z="1" h="150" maptype="HYBRID" ]
[ map z="1" h="150" maptype="TERRAIN" ]

[map id=”map6″ z=”1″ h=”150″ maptype=”ROADMAP”]
[map id=”map7″ z=”1″ h=”150″ maptype=”SATELLITE”]
[map id=”map8″ z=”1″ h=”150″ maptype=”HYBRID”]
[map id=”map9″ z=”1″ h=”150″ maptype=”TERRAIN”]

実際の表示。通常は一番上のロードマップ(地図)モードを利用する事になるでしょう。

Google Maps v3 Shortcodeのオプション

基本的な使い方の他にも、様々なオプションが用意されています。以下はそれらの説明となります。

マウスのホイール操作によるズーミング許可と禁止

デフォルトはtrueに設定されています。マウスのホイールによる拡大と縮小を禁止にしたい場合は、以下の用に設定します。

[ map scrollwheel="false" ]

[map id=”map10″ scrollwheel=”false”]

マップの上でホイール操作をしてみてください。上記のマップでは禁止にしているので、拡大縮小は行なわれないはずです。

マウスのホイール操作で拡大縮小を行なっているユーザーは多いと思うので、通常は初期設定のtrueにしておいた方が無難ですね。

縮尺(しゅくしゃく)の表示・非表示

地図の左下付近に表示される「縮尺(しゅくしゃく)」の表示・非表示を設定します。初期では非表示(false)となっています。

[ map scale="false" ]

[map id=”map11″ scale=”false”]
[map id=”map12″ scale=”true”]

縮尺を表示、非表示にした例。

マップコントローラーの表示・非表示

マップの左上にある、ストリートビューへの切り替えやズーミングを行なうボタン(+と-)の表示をコントロールできます。初期設定ではfalse(表示する)となっています。非表示としたい場合は、以下の様にタグを記述します。

[ map hidecontrols="true" ]

[map id=”map13″  hidecontrols=”false”]
[map id=”map14″ hidecontrols=”true”]

実際の表示です。ちょっとややこしいのが、コントローラーを消したいのなら「true」を、表示したいのなら「false」を設定するところです。表示したいからtrueにしたら表示されなくなるわけですね。「hide」は隠すという意味なので、trueにすると「hide」をONにしてしまうわけです。

軽度と緯度で地図を表示する

表示したい箇所の指定は「address=”東京都”」といった具合に、直接住所を打ち込んで指定の箇所を表示させますが、経度と緯度を入力して表示を行なうことも可能です。latはlatitudeの略で緯度を、lonはlongitudeの略で経度を表します。

  • lat=”-90から90の値を入力)”
  • lon=”-180から180の値を入力)”
 [ map z="5" lat="35" lon="139" ]

[map id=”map15″ z=”14″ lat=”35.689488″ lon=”139.691706″]

上記は経度と緯度を入力して東京都を表示した例です。タグのサンプル表記では整数が入っていますが、実際にはlat=”35.689488″、lon=”139.691706″といった感じで数字を入力しています。東京都であれば、「緯度 35度41分22.157秒(35.689488), 経度 139度41分30.142秒(139.691706)」となります。

経度と緯度の取得には、Geocodingが便利です。

地図にマーク(目印)を表示させる

私が良く利用するのが、このマーカーの機能です。marker=”yes”とすることで、地図にアイコンを立てることが出来ます。デフォルトではmarker=”no”となっています。

[ map marker="yes" ]

[map id=”map16″ marker=”yes”]

目印を付けると、見慣れた赤い矢印がマップに表示されますが、次の項目で紹介するオプションで、オリジナルのアイコンを立てることが可能です。

オリジナルのアイコン(画像)を表示させる

地図に立てる矢印アイコンを変更することができます。markerimage=”画像へのパス(http://から)”を設定して、オリジナルのアイコンを設定する事が可能です。

[ map z="5" address="Tokyo, Japan" marker="yes" markerimage="http://code.google.com/apis/maps/documentation/javascript/examples/images/beachflag.png" ]

[map id=”map17″ z=”5″ address=”Tokyo, Japan” marker=”yes” markerimage=”http://code.google.com/apis/maps/documentation/javascript/examples/images/beachflag.png”]

Googleで用意されているアイコンを設定した例です。google-maps-iconsで用意されているアイコンの一覧を見ることができます。素材をダウンロードしてきて、自分のサイトにアップロードして使用します。

[map id=”map18″ z=”5″ address=”Tokyo, Japan” marker=”yes” markerimage=”https://www.barnetshenkinbridge.com/common/abduction.png”]

自分のサイトに画像をアップロードし、その画像を呼び出した例。

情報用の窓を表示する

表示したアイコンに情報を付加したフキダシを表示させます。

[ map z="15" address="東京都" marker="yes" infowindow="ここに情報を記述します。<br />改行もできます。" ]

[map id=”map19″ z=”15″ address=”東京都” marker=”yes” infowindow=”ここに情報を記述します。<br />改行もできます。”]

情報を記述した例です。改行等を行ないたい場合は<br />とHTMLのタグを書くだけでOKですが、タグを挿入する場合はHTMLモードで記述するようにしてください。

このフキダシ表示に関連するオプションとして、フキダシ表示の初期状態を設定する項目があります。

  • infowindowdefault = “yes”
  • infowindowdefault = “no”

infowindowdefaultをyesに設定すると、最初からフキダシが出た状態となります。noにすれば、フキダシは表示されませんが、目印のアイコンをクリックすることで、フキダシを表示させることができます。

[ map z="15" address="東京都" marker="no" infowindowdefault = "no" infowindow="ここに情報を記述します。<br />改行もできます。" ]

[map id=”map20″ z=”15″ address=”東京都” marker=”no” infowindowdefault = “no” infowindow=”ここに情報を記述します。<br />改行もできます。”]

表示例。地図に立てたピンをクリックしてみてください。非表示に設定した情報が表示されます。

Google MapのKMLファイルを読み込む

このページでは詳細な説明は省きますが、GooglemapのKMLファイルを読み込ませて、目的地までの経路を詳しく説明したり、Google Earthとの連携機能を強化することができます。

[ map z="5" kml="http://gmaps-samples.googlecode.com/svn/trunk/ggeoxml/cta.kml" ]

[map id=”map21″ z=”5″ kml=”http://gmaps-samples.googlecode.com/svn/trunk/ggeoxml/cta.kml”]

関係するオプション項目として、「kmlautofit=”no”」がありますが、これはよくわかりません・・。たぶん、noに設定するとkmlファイルの読み込みをOFFにする感じの設定だと思います。このプラグインの作者様のサイトに書かれている説明を見る限りは、kmlファイルの振る舞いを決定することができるとかなんとか・・・。

Fusion Table Layer

マップの装飾に関係するオプションだと思いますが、ここも詳細はよくわかりませんでした。初期設定と思われる825831の数字を変更すると、グラフィカルな表示が無くなってしまったので、予めレイヤーとして被せるための画像を準備する必要があるのかもしれません。

[ map z="9" address="Los Angeles" fusion="825831" ]

[map id=”map22″ z=”9″ address=”Los Angeles” fusion=”825831″]

表示例。詳しくは分かりません・・・。

Traffic

交通情報を表示させるオプションのようです。渋滞や事故等の情報を出せるのかな?ちょっとこれも調査できていません。また追記という形で解説を加えて行きたいと思います。

[ map z="5" address="tokyo, japan" traffic="yes" ]

[map id=”map23″ z=”5″ address=”tokyo, japan” traffic=”yes”]

表示例。時間によって緑色で引かれた箇所に様々な色が出てきます。

Bike

これまた用途がわからないのですが、バイクと書いてあるので、オートバイに関係する情報を表示するのかもしれません。ちなみに日本では特に表示の変化は無かったのですが、アメリカではトラフィックオプションの様に、道に色線が引かれて表示されていました。

[ map z="10" address="tokyo, japan" bike="yes" ]

[map id=”map24″ z=”10″ address=”tokyo, japan” bike=”yes”]

表示例。東京付近を表示してみても、特に変化は認められず。

設定できる項目の紹介は以上です。ちなみに、紹介する順番やタグは、全て作者様のサイトに合わせて作成しました。

WordPress Plugin: Google Maps v3 Shortcode

他にも設定できる項目があるのかもしれませんが、一応今回の記事で紹介したものが、公式ブログの記事の中でも紹介されていましたので、現状で全てということにしておきます。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

コメント

  1. […] ①Google Maps v3 Shortcodeを使ってWordPressに地図を埋め込む②WordPressで地図表示するなら「Simple Map」が断然おすすめ! […]

  2. […] 参考:Google Maps v3 Shortcodeを使ってWordPressに地図を埋め込む […]

  3. […] Google Maps v3 Shortcodeを使ってWordpressに地図を埋め込む | WEB備忘録(仮) […]