ホーム > サポート・マニュアル > チュートリアル > 外部サービスとの連携 > Google Mapsに複数のエントリー情報をマッピングする

チュートリアル

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

ドキュメント最終更新日時:2013/01/23 12:10

タグ:カスタムフィールド GoogleMaps 

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

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

複数のエントリー情報をマップに表示

複数のエントリー情報をマップに表示

バージョンによって記述方法が変わるので、ご注意ください。

  • a-blog cms バージョン1.5.2以上(Google Maps JavaScript API V3の記述)
  • a-blog cms バージョン1.5.0、1.5.1(Google Maps JavaScript API V3の記述)
  • a-blog cms バージョン1.3.0〜1.4.2(Google Maps JavaScript API V2の記述)

a-blog cms バージョン1.5.2以上の場合(Google Maps JavaScript API V3の記述)

テンプレート上のコード
Entry_Summaryのglueブロックを使用するため a-blog cms バージョン1.5.1以降でご利用できます。

<img class="js-s2d-ready" width="640" height="300" style="display:block;" src="http://maps.google.com/maps/api/staticmap?center=36.204824,138.252924&zoom=5&size=640x300&maptype=roadmap&markers=<!-- BEGIN_MODULE Entry_Summary id="maplist" --><!-- BEGIN unit:loop --><!-- BEGIN entry:loop -->{mapLat},{mapLng},smallred<!-- BEGIN glue -->|<!-- END glue --><!-- END entry:loop --><!-- END unit:loop -->&sensor=false<!-- END_MODULE Entry_Summary -->" alt="<!-- BEGIN_MODULE Entry_Summary id="maplist" --><!-- BEGIN unit:loop --><!-- BEGIN entry:loop -->&lt;table&gt;&lt;tr&gt;&lt;td&gt;&lt;!-- BEGIN image:veil --&gt;&lt;img src=&quot;%{ROOT_DIR}{path}&quot; width=&quot;80&quot; alt=&quot;&quot; /&gt;&lt;br/&gt;&lt;!-- END image:veil --&gt;&lt;a href=&quot;{url}&quot;&gt;{title}&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;[[:split:]]<!-- END entry:loop --><!-- END unit:loop --><!-- END_MODULE Entry_Summary -->" />

a-blog cms バージョン1.5.0、1.5.1の場合(Google Maps JavaScript API V3の記述)

テンプレート上のコード

<img class="js-s2d-ready" src="http://maps.google.com/maps/api/staticmap?&center=36.204824,138.252924&zoom=5&size=640x300&maptype=roadmap&markers=<!-- BEGIN_MODULE Entry_Summary id="maplist" --><!-- BEGIN unit:loop --><!-- BEGIN entry:loop -->{mapLat},{mapLng},smallred%7C<!-- END entry:loop --><!-- END unit:loop -->&sensor=false<!-- END_MODULE Entry_Summary -->" alt="<!-- BEGIN_MODULE Entry_Summary --><!-- BEGIN unit:loop --><!-- BEGIN entry:loop -->&lt;div style=&quot;height:100px;&quot;&gt;&lt;!-- BEGIN image:veil --&gt;&lt;img src=&quot;%{ROOT_DIR}{path}&quot; width=&quot;80&quot; alt=&quot;&quot; /&gt;&lt;br/&gt;&lt;!-- END image:veil --&gt;&lt;a href=&quot;{url}&quot;&gt;{title}&lt;/a&gt;&lt;/div&gt;[[:split:]]<!-- END entry:loop --><!-- END unit:loop --><!-- END_MODULE Entry_Summary -->" width="640" height="300" style="display:block;" />

a-blog cms バージョン1.3.0〜1.4.2の場合(Google Maps JavaScript API V2の記述)

テンプレート上のコード

※Google Maps JavaScript API バージョン 2 は、2010 年 5 月 19 日に正式にサポートが終了しています。可能であれば、a-blog cmsを最新バージョンにアップデートすることをお勧めします。
a-blog cmsバージョン1.4.0から内部的にはGoogle Maps JavaScript API V3を使用しています。

<img class="js-s2d-ready" src="http://maps.google.com/staticmap?&center=36.204824,138.252924&zoom=5&size=640x300&maptype=roadmap&markers=<!-- BEGIN_MODULE Entry_Summary id="maplist" --><!-- BEGIN unit:loop --><!-- BEGIN entry:loop -->{mapLat},{mapLng},smallred%7C<!-- END entry:loop --><!-- END unit:loop -->&sensor=false<!-- END_MODULE Entry_Summary -->" alt="<!-- BEGIN_MODULE Entry_Summary id="maplist" --><!-- BEGIN unit:loop --><!-- BEGIN entry:loop -->&lt;div style=&quot;height:100px;&quot;&gt;&lt;!-- BEGIN image:veil --&gt;&lt;img src=&quot;%{ROOT_DIR}{path}&quot; width=&quot;80&quot; alt=&quot;&quot; /&gt;&lt;br/&gt;&lt;!-- END image:veil --&gt;&lt;a href=&quot;{url}&quot;&gt;{title}&lt;/a&gt;&lt;/div&gt;[[:split:]]<!-- END entry:loop --><!-- END unit:loop --><!-- END_MODULE Entry_Summary -->" width="640" height="300" style="display:block;" />

サンプルコードについて

緯度の変数 {mapLat}
経度の変数 {mapLng}

Entry_Summaryはid="maplist"というIDを指定しています。モジュールIDを作成して任意のカテゴリーなど指定してください。

マップサイズは 640x300 にしています。

概要

基本的には 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



携帯アクセス解析