店舗ページをGoogleMapへ掲載したい
Posted: 2012年9月19日(水) 18:28
すみません、CMSデザイナーを触り始めたばかりの
初心者です。一つ質問させてください。
内容ができるかできないかさえ良く分かっておらず
へんな質問でしたら申し訳ないです。
例えばファミレスなどのように店舗がどんどん増えていく
店舗のグループサイトを作りたいと思っています。
各店舗の詳細ページをCMSデザイナーで自動的に
作成できるようにし、スキーマ項目の中に緯度・経度枠も
作成してエリア毎にグーグルマップでそのお店の位置を
表示させたいです。
GoogleMapへの表示も自動的にされるようにできたら
いいなと思っています。
http://www.careco.jp/stationsearch/area/
↑こんな感じ
そうするには各店舗の緯度と経度をxmlで出す必要があるように
思うのですが、そもそもこのようなことはできるのでしょうか?
マニュアルにxml形式での出力ができるとあったので
…そもそもxmlとFlashやAjaxとの連携をよくわかっていないので
ものすごい勘違いをしているかもしれませんが。
CMSデザイナーを使わない場合は以下のようなソースで
いつもは上記内容を実現させています。
■地図を表示させるhtmlに入れるGoogleMapを読みだすソース
------------------------------------------------------------------------------------------------------------------------------------------------------
<script src="http://maps.google.com/maps?file=api&v= ... E5UbJXAqFw" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[.
//マップの中央座標を設定
//map.setCenter(new GLatLng(lat=緯度, lng=経度), 表示領域);
//map.setCenter(new GLatLng(32.565333, 130.924072), 11);
//GDownloadUrlを使って、xmlファイルをダウンロードする
function addMarker(map1) {
GDownloadUrl("./map.xml",function(data, responseCode) {
var xmlDoc = GXml.parse(data);
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var mpoint = new GLatLng(
markers.getAttribute("lat"),
markers.getAttribute("lng")
);
var marker = createMarker(mpoint, markers.getAttribute("html"));
map1.addOverlay(marker);
}
});
}
//マーカーを作る
function createMarker(mpoint, txt) {
var icon = new GIcon();
icon.image = "./map/map_icon.png";
icon.iconSize = new GSize(41, 39);
icon.iconAnchor = new GPoint(10, 34);
icon.infoWindowAnchor = new GPoint(45, 15);
var marker = new GMarker(mpoint,icon);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindow(txt);
});
return marker;
}
function load(){
var map1 = new GMap2( document.getElementById("google_map"));
map1.setCenter( new GLatLng(34.340424,134.01166), 15 );
//小さいコントロ?ルを表示
ctrlObj = new GSmallMapControl();
map1.addControl(ctrlObj);
addMarker(map1); //マーカーをマッピング
}
//ページがロードされたら、load 関数を実行して、地図を表示する
window.onload = load;
//ページを抜けるとき、メモリ開放
window.onunload = GUnload;
//]]>
//]]>
</script>
<div>
<div id="google_map" class="txaL" style="width:870px; height:350px;"></div>
------------------------------------------------------------------------------------------------------------------------------------------------------
読み込んでいるmap.xmlのソース
<?xml version="1.0" encoding="utf-8"?>
<markers>
<marker lat="34.339843" lng="134.012506" html="<a href='http://?'>店舗名店</a><br>高松市鶴市町などの住所" />
<marker lat="36.339843" lng="137.012506" html="<a href='http://?'>店舗名店</a><br>高松市鶴市町などの住所" />
・
・
・
</markers>
------------------------------------------------------------------------------------------------------------------------------------------------------
そこで、今回は読み込むmap.xmlをmap.phpにして
中身を
<?php require_once( "cmsdesigner/include/view.php.inc" ); // encoding="euc-jp" ?>
<cmsd:entrylist name="diary" design="idokeido" output="xml" />
<?php cmsd_end_template(); ?>
デザインの方を
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" encoding="EUC-JP" omit-xml-declaration="yes" />
<markers>
<xsl:template match="/entrylist">
<xsl:for-each select="entry">
<marker lat="<xsl:value-of select="ido" disable-output-escaping="yes" />" lng="<xsl:value-of select="keido" disable-output-escaping="yes" />" html="<a href='nikki.php?eid={@id}' target='_blank'>店舗名</a><br>住所をここにいれる" />
</xsl:for-each>
</markers>
</xsl:template>
</xsl:stylesheet>
のような感じに書いてみたのですが、
うまくいきませんでした。
そもそもこのような感じでのxmlの出力はできないのでしょうか?
お手数をおかけいたしますがお返事おまちしております。
初心者です。一つ質問させてください。
内容ができるかできないかさえ良く分かっておらず
へんな質問でしたら申し訳ないです。
例えばファミレスなどのように店舗がどんどん増えていく
店舗のグループサイトを作りたいと思っています。
各店舗の詳細ページをCMSデザイナーで自動的に
作成できるようにし、スキーマ項目の中に緯度・経度枠も
作成してエリア毎にグーグルマップでそのお店の位置を
表示させたいです。
GoogleMapへの表示も自動的にされるようにできたら
いいなと思っています。
http://www.careco.jp/stationsearch/area/
↑こんな感じ
そうするには各店舗の緯度と経度をxmlで出す必要があるように
思うのですが、そもそもこのようなことはできるのでしょうか?
マニュアルにxml形式での出力ができるとあったので
…そもそもxmlとFlashやAjaxとの連携をよくわかっていないので
ものすごい勘違いをしているかもしれませんが。
CMSデザイナーを使わない場合は以下のようなソースで
いつもは上記内容を実現させています。
■地図を表示させるhtmlに入れるGoogleMapを読みだすソース
------------------------------------------------------------------------------------------------------------------------------------------------------
<script src="http://maps.google.com/maps?file=api&v= ... E5UbJXAqFw" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[.
//マップの中央座標を設定
//map.setCenter(new GLatLng(lat=緯度, lng=経度), 表示領域);
//map.setCenter(new GLatLng(32.565333, 130.924072), 11);
//GDownloadUrlを使って、xmlファイルをダウンロードする
function addMarker(map1) {
GDownloadUrl("./map.xml",function(data, responseCode) {
var xmlDoc = GXml.parse(data);
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var mpoint = new GLatLng(
markers.getAttribute("lat"),
markers.getAttribute("lng")
);
var marker = createMarker(mpoint, markers.getAttribute("html"));
map1.addOverlay(marker);
}
});
}
//マーカーを作る
function createMarker(mpoint, txt) {
var icon = new GIcon();
icon.image = "./map/map_icon.png";
icon.iconSize = new GSize(41, 39);
icon.iconAnchor = new GPoint(10, 34);
icon.infoWindowAnchor = new GPoint(45, 15);
var marker = new GMarker(mpoint,icon);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindow(txt);
});
return marker;
}
function load(){
var map1 = new GMap2( document.getElementById("google_map"));
map1.setCenter( new GLatLng(34.340424,134.01166), 15 );
//小さいコントロ?ルを表示
ctrlObj = new GSmallMapControl();
map1.addControl(ctrlObj);
addMarker(map1); //マーカーをマッピング
}
//ページがロードされたら、load 関数を実行して、地図を表示する
window.onload = load;
//ページを抜けるとき、メモリ開放
window.onunload = GUnload;
//]]>
//]]>
</script>
<div>
<div id="google_map" class="txaL" style="width:870px; height:350px;"></div>
------------------------------------------------------------------------------------------------------------------------------------------------------
読み込んでいるmap.xmlのソース
<?xml version="1.0" encoding="utf-8"?>
<markers>
<marker lat="34.339843" lng="134.012506" html="<a href='http://?'>店舗名店</a><br>高松市鶴市町などの住所" />
<marker lat="36.339843" lng="137.012506" html="<a href='http://?'>店舗名店</a><br>高松市鶴市町などの住所" />
・
・
・
</markers>
------------------------------------------------------------------------------------------------------------------------------------------------------
そこで、今回は読み込むmap.xmlをmap.phpにして
中身を
<?php require_once( "cmsdesigner/include/view.php.inc" ); // encoding="euc-jp" ?>
<cmsd:entrylist name="diary" design="idokeido" output="xml" />
<?php cmsd_end_template(); ?>
デザインの方を
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" encoding="EUC-JP" omit-xml-declaration="yes" />
<markers>
<xsl:template match="/entrylist">
<xsl:for-each select="entry">
<marker lat="<xsl:value-of select="ido" disable-output-escaping="yes" />" lng="<xsl:value-of select="keido" disable-output-escaping="yes" />" html="<a href='nikki.php?eid={@id}' target='_blank'>店舗名</a><br>住所をここにいれる" />
</xsl:for-each>
</markers>
</xsl:template>
</xsl:stylesheet>
のような感じに書いてみたのですが、
うまくいきませんでした。
そもそもこのような感じでのxmlの出力はできないのでしょうか?
お手数をおかけいたしますがお返事おまちしております。