SOY CMSのブログで地図アプリを作ろう１でSOY CMSのブログページを活用して、投稿型の簡単な地図アプリを作成しました。
ただ、これだと地図にマーカーを設置しただけで、
このマーカーが何と言う店を指していて、どのような情報があるかわからない。
せっかくブログページを使っているのにそれではつまらない。
というわけで今回は、
マーカーをクリックしたら店名とリンクを表示して、
詳細(紹介)ページに遷移できる様にしてみます。
前回の設定状況の確認ということで、
カスタムフィールドの設定は下記のキャプチャの通り、
サムネイル用と緯度経度のフィールドを用意しています。
※サムネイルは一行テキストにしていますが、画像でも良いです。
続いてテンプレートを修正します。
前回の<!-- b_block:id="entry_list"の中を下記のように修正します。
var str;
<!-- b_block:id="entry_list" -->
str = '<div style="text-align:center;">' +
'<p><img src="/site/im.php?src=<!-- cms:id="thumbnail_path" /-->&width=100"></p>' +
'<p><a cms:id="entry_link"><!-- cms:id="title_plain" /--></a></p>' +
'</div>';
var infowindow_<!-- cms:id="entry_id*" /--> = new google.maps.InfoWindow({
content: str
});
var marker_<!-- cms:id="entry_id*" /--> = new google.maps.Marker({
position: {lat: <!-- cms:id="lat" /-->, lng: <!-- cms:id="lng" /-->},
map: map,
title: '<!-- cms:id="title_plain*" /-->'
});
marker_<!-- cms:id="entry_id*" /-->.addListener('click', function() {
infowindow_<!-- cms:id="entry_id*" /-->.open(map, marker_<!-- cms:id="entry_id*" /-->);
});
<!-- /b_block:id="entry_list" -->
cms:idばかりでよくわからなくなってきましたが、この状態で保存します。
ちなみに画像の指定の際、<img src="/site/im.php?src="<!-- cms:id="thumbnail_path" /-->"&width=100">は表示の際に画像のサイズを100pxにした画像のキャッシュファイルを生成し、以後の表示の際はそのキャッシュファイルを参照するという処理で、表示がはやくなります。
これで諸々の設定は終了です。
地図の表示を確認すると、
マーカーをクリックした際、インフォウィンドウが表示されるようになりました。
今回の対応をSOY Shop側でカテゴリを店舗名にして、カテゴリでマッピングを行い、
店舗ごとの詳細で商品一覧を用意するということで、
地図の上に店舗を並べたショップページを運用することができるようになります。
これはまた後日
次の記事
