WordPressユーザーのbaserCMS覚え書き


任意の場所をGoogleマップで表示するには

コーポレートサイトの定番コンテンツともいえる、Googleマップを使ったアクセスマップ。「コーポレートサイトにちょうどいい」をうたうだけあって、baserCMSではその実装法もかなりお手軽なものとなっています。

最初にすることは、管理画面の[サイト基本設定]にある「GoogleMaps住所」の設定(「オプション」欄にあるので通常は隠れています)。ここに会社や店舗の所在地を記述し[保存]をクリックしましょう。

あとは、「会社案内」や「交通アクセス」など、地図を組みこみたいページの編集画面で編集モードを[ソース]にして

<?php $this->BcBaser->element('googlemaps') ?>

と書くだけ。これだけで

googlemap.pngという具合に吹き出し付きのマーカーが地図上に表示されます。地図表示に使われるテンプレート(エレメント)は /lib/Baser/View/Elements/googlemaps.php がデフォルト。また、吹き出しには管理画面の「WEBサイトタイトル」と「GoogleMaps住所」の文字列が流用されます。

ところが、企業の営業拠点ごとにページをつくり、それぞれに地図を貼り付けようとするとこうはいきません。

そこで、エレメント googlemaps.php を呼び出す際にちょっとしたパラメータを与えます。福岡つながりということで博多駅にマーカーを落とし込んでみましょうか。

<?php $this->BcBaser->element('googlemaps', array('address' => '福岡市博多区博多駅中央街1-1')) ?>

googlemap02.pngということで[サイト基本設定]の記述に関係なく、任意の場所をGoogleマップで表すことが可能になります。

エレメント googlemaps.php は他にも下記のパラメータを受け付けます(カッコ内はデフォルト値)。

  • width……地図の幅(600)
  • height……地図の高さ(400)
  • zoom……地図の拡大率(16)
  • mapId……地図を表示する div 要素の id(map)
  • markerText……吹き出し内のテキスト(WEBサイトタイトル および GoogleMaps住所)
  • longitude……経度
  • latitude……緯度

markerText はHTMLタグ使用可能。また address と longitude/latitude を同時に指定した場合 address の値が無効となります。

Googleマップの表示方法、公式リファレンスにも載ってないようなのでまとめてみました。

[2014.8.15追記]
baserCMS 3.0.3より $this->BcBaser->element('googlemaps') を使う方法が非推奨となり、代わりに

<?php $this->BcBaser->googleMaps() ?>

という関数が実装されました。この関数で任意の場所を表示するには

<?php $this->BcBaser->googleMaps(array('address' => '福岡市博多区博多駅中央街1-1')) ?>

とします。以前のものから若干書式が変わりますが、同様のパラメータを受け付けるので上記の書き方に沿って記述すればオッケイです。

おまけ

WordPressの記事内にGoogleマップを埋め込むにはプラグイン活用がお手軽でしょう。埋め込みを実現するプラグインはいろいろありますが、日本語環境ならリファレンスも整っている『Simple Map』がよいのではないでしょうか(感想には個人差がありますのでご了承を)。