Google Mapsに複数のエントリー情報をマッピングする

複数のエントリーのカスタムフィールドで用意した緯度・経度の情報を元に Google Maps にマッピングする方法を説明します。（v1.3.0より）

この機能を使用するには、あらかじめ「カスタムフィールドでGoogle Mapsの入力インターフェースを実装する」を実装し、エントリー内に緯度・経度のカスタムフィールドが必要になります。

---

テンプレート上のコード

以下のコードについては読みやすいように改行を入れていますが、改行はいれないようにして下さい。

<img class="js-s2d-ready" src="http://maps.google.com/staticmap?
key=%{GOOGLE_API_KEY}&center=35.155705,137.09281&zoom=13
&size=600x300&maptype=roadmap&markers=
<!-- BEGIN_MODULE Entry_Headline -->
<!-- BEGIN entry:loop -->{mapLat},{mapLng},smallred%7C<!-- END entry:loop -->
<!-- END_MODULE Entry_Headline -->"
 alt="<!-- BEGIN_MODULE Entry_Headline -->
<!-- BEGIN entry:loop -->&lt;div style=&quot;height:100px;&quot;&gt;&lt;a href=&quot;{url}&quot;&gt;
<!-- BEGIN img:veil -->&lt;img src=&quot;/{path}&quot; height=&quot;80&quot; /&gt;<!-- END img:veil -->
&lt;br /&gt;&lt;strong&gt;{title}&lt;/strong&gt;&lt;/div&gt;[[:split:]]<!-- END entry:loop -->
<!-- END_MODULE Entry_Headline -->" width="600" height="300" style="display:block;" />

概要

基本的には Google Static Maps API を利用し、ドラッグできない画像が生成されます。これを元データとして、Google Maps JavaScript API に変換する JavaScript を a-blog cms のシステムとして準備しています。

データはエントリーリストモジュール（Entrt_List）を利用し、モジュールIDを設定し特定のカテゴリーのみを表示させるようにしています。サンプルコードでは、緯度・経度が 35.155705,137.09281 と記述していますので、実際に表示させたい実際のデータに変更頂く必要があります。

マーカーではなく地図自身の中心の緯度・経度については固定になっていますが、実際の運用ではブログやカテゴリーのカスタムフィールドを利用し設定できるようにした方がいいと思われます。

実装方法

img の class

class="js-s2d-ready" を書く事によって、Google Maps JavaScript API の地図に切り替わります。画像のままにする際には、class の設定をする必要はありません。

src 内の設定

Google Static Maps の設定につきましては、Static Maps API V2 デベロッパー ガイド をご覧下さい。

alt 内の設定

マーカーをクリックした際に表示されるHTMLをエントリーの件数だけ記述します。その際にエントリーの区切りには [[:split:]] という文字列を利用し、＜＞ " については実体参照で記述します。 件数が多い場合には、このalt部分が長くなる事に注意下さい。

ピンが表示されない場合の対処方法について（2011/11/25追記）

http://labs.google.com が Not Found になった事から、上記の小さいピンが表示できなくなりました。

/js/dispatch/_static2dynamic.js に書かれている http://labs.google.com.... の記述をご利用のドメインやパスに書き換えて、必要なファイルをご用意下さい。標準の設定で使われていたファイルは mm_20_red.png という名前のファイルになります。

"http://labs.google.com/ridefinder/images/mm_20_"+RegExp.$1+".png"

と

"http://labs.google.com/ridefinder/images/mm_20_shadow.png",

を修正する事で表示ができるようになります。この次にリリースされるバージョン(1.5)では、この部分について対策を行い config.js 側で設定ができるような事を検討しております。

参考： mm_20_red.png / mm_20_shadow.png

---