CMS Designerユーザーズフォーラム

http://cms.al-design.jp/newsentry.php?eid=00068
上記の機能を利用してgoogleマップを導入したいのですがうまくいきません…。

サンプルのjavascriptを利用して、マップが表示されるところまでは出来たのですが、
コンテンツ管理画面から新規エントリで指定した緯度・経度・縮尺が反映されず、
どのエントリも同じ地図が表示されてしまいます。

読み込み側のphpには、下記javascriptを貼り付けています。
サンプルからほぼそのまま抜いたものです。

----------------------------------------------------------------------

// CMSDからのデータを格納する変数
var cmsdVars = {};
cmsdVars.mapdata = {}; // 地図情報
cmsdVars.d = function(id){return cmsdVars.d[id]||(cmsdVars.d[id]=(document.getElementById(id)||id))}; // getElementById用ユーティリティ

function load()
{
if ( ! GBrowserIsCompatible() ) { return false; }

// gmap生成
var map = new GMap2( cmsdVars.d( "map" ) );
map.addControl( new GLargeMapControl() );
map.addControl( new GMapTypeControl() );
// 初期表示位置
map.setCenter( new GLatLng( 35.681391, 139.766103 ), 15 );

// 各エントリのマーカーを生成
for ( var index in cmsdVars.mapdata )
{
makeMarker( map, cmsdVars.mapdata[index] );
}
}

// マーカーを生成して地図に表示する
function makeMarker( map, mapdata )
{
// マーカー生成
var marker = new GMarker( new GLatLng( mapdata.lat, mapdata.lng ) );
map.addOverlay( marker );

// マーカー表示イベントハンドラ
var showMarker = function(){
// マーカーを地図の中央に持ってきて、情報ウィンドウを表示する。
marker.openInfoWindowHtml( cmsdVars.d( 'title' + mapdata.eid ).innerHTML
+ cmsdVars.d( 'description' + mapdata.eid ).innerHTML );
};

// clickイベントハンドラを設定
GEvent.addListener( marker, "click", showMarker );

// エントリ見出しをクリックした際のイベントハンドラを定義・設定
cmsdVars.d( "title" + mapdata.eid ).onclick = function(){
// zoomを設定
map.setCenter( new GLatLng( mapdata.lat, mapdata.lng ), mapdata.zoom );
// マーカー表示
showMarker();
return false;
}

}

----------------------------------------------------------------------

この中の

// 初期表示位置
map.setCenter( new GLatLng( 35.681391, 139.766103 ), 15 );

の箇所の緯度・経度・縮尺が、すべてのエントリの地図に反映されてしまうようです。
ちなみにデザインファイルの読み込み箇所は、下記のようにしています。

----------------------------------------------------------------------

<div id="map" style="padding: 5px; width: 485px; height: 400px;">
<script type="text/javascript">
cmsdVars.mapdata['<xsl:value-of select="@id" />'] = { 'eid':'<xsl:value-of select="@id" />', 'lat':<xsl:value-of select="location/@lat" />, 'lng':<xsl:value-of select="location/@lng" />, 'zoom':<xsl:value-of select="location/@zoom" /> };
</script>
----------------------------------------------------------------------

色々と試しているのですが、解決できません…。
お手数ですがアドバイスいただければと思います。

よろしくお願い致します。

　mazさん、ご質問ありがとうございます。
　また、お世辞にも分かり易いとは言えないgoogle maps利用サンプルを元に
google mapsの導入をお試し頂き、頭の下がる思いです。m(__)m

　拝見したところ、mazさんがコピー元としたサンプルは、こちらのページで言う
ところの２つめのサンプルのようです。
　http://cms.al-design.jp/sample/maplog/
　http://cms.al-design.jp/sample/maplog/maplog_map.php

　このサンプルは、地図が１つしかありませんが、実はエントリ一覧のデザイン
になっています。
　一つの地図上に、全エントリの位置情報を表示するというサンプルです。

　もう一つのサンプルは、エントリ一覧をそのまま複数の地図として表示する
ものです。

　mazさんが今回試したい機能はおそらく、「エントリ詳細ページに１つの地図を
表示する」というものかと思います。
　これは完全にサンプルの片手落ちなのですが、サンプルにはそれに該当するもの
が現在ございません。m(__)m

　ただ、改造する元とするならば、後者のサンプルの方がまだ近いと思います。
　http://cms.al-design.jp/sample/maplog/maplog_list.php

　ほとんど改変なしに、一覧デザインを詳細デザインにコピーし、maplog_list.php
の埋め込みタグを cmsd:entrylistからcmsd:entryに変えれば、おそらくうまく
動作すると思います。

　またご不明な点がございましたら何なりとご質問下さい。

いただいたサンプルをもとにやってみましたが、javascriptエラーが出て表示されません。

読み込み用PHPファイル内 JS部
---------------------------------------------------
<script src="http://maps.google.com/maps?file=api&v= ... 7Q4O0SW_Qg"
type="text/javascript"></script>
<script type="text/javascript">

// CMSDからのデータを格納する変数
var cmsdVars = {};
cmsdVars.mapdata = {}; // 地図情報
cmsdVars.d = function(id){return cmsdVars.d[id]||(cmsdVars.d[id]=(document.getElementById(id)||id))}; // getElementById用ユーティリティ

function load()
{
if ( ! GBrowserIsCompatible() ) { return false; }

// 各エントリーの地図を生成
for ( var index in cmsdVars.mapdata )
{
makeGMap( cmsdVars.mapdata[index] );
}
}

// 地図を生成して表示する
function makeGMap( mapdata )
{
var map = new GMap2( cmsdVars.d( "map" + mapdata.eid ) );
map.addControl( new GLargeMapControl() );
map.addControl( new GMapTypeControl() );
map.setCenter( new GLatLng( mapdata.lat, mapdata.lng ), mapdata.zoom );

var marker = new GMarker( map.getCenter() );
map.addOverlay( marker );

// マーカーのclickイベント時に、情報ウィンドウを表示する。
GEvent.addListener( marker, "click",
function() {
marker.openInfoWindowHtml( cmsdVars.d( 'title' + mapdata.eid ).innerHTML
+ cmsdVars.d( 'description' + mapdata.eid ).innerHTML );
}
);

// 「地図を戻す」リンクclick時に、マーカーを中央に戻す。
cmsdVars.d( "recoveryButton" + mapdata.eid ).onclick = function(){
map.setCenter( new GLatLng( mapdata.lat, mapdata.lng ), mapdata.zoom );
return false;
}

}

</script>

<!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->
</head>

<body onload="load()" onunload="GUnload()">
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
---------------------------------------------------------

読み込み用PHPファイル内 CMSD読み込み部
---------------------------------------------------
<cmsd:entry name="ｘｘｘｘｘ" design="ｘｘｘｘｘｘ" />
---------------------------------------------------

デザインファイル内
---------------------------------------------------------
<div id="map" style="padding: 5px; width: 485px; height: 400px;">
<script type="text/javascript">
cmsdVars.mapdata['<xsl:value-of select="@id" />'] = { 'eid':'<xsl:value-of select="@id" />', 'lat':<xsl:value-of select="location/@lat" />, 'lng':<xsl:value-of select="location/@lng" />, 'zoom':<xsl:value-of select="location/@zoom" /> };
</script>
</div>
----------------------------------------------------------


フォルダ名をgmap1でなく、独自のものに変更しているのですが影響があるのでしょうか？
<cmsd:entry name="ｘｘｘｘｘ" design="ｘｘｘｘｘｘ" />


javascriptに詳しくないものでお手数おかけしますが、
ご教授いただければと思います。

よろしくお願い致します。

　mazさん、いろいろとお試し頂いており、恐縮です。

　一度、ブラウザへ出力されるソースを貼り付けて頂いてもよろしいでしょうか。
　もしくは、javascriptエラーの内容の引用をお願いしてもよろしいでしょうか。

　ベストなのは、該当のサイトのURLを教えて頂くことですが、何かと問題があると
思いますので、よろしければcms(アットマーク)al-design.jpまでメールにて
ご連絡頂ければ幸いです。

　ただ、Google Mapsの組み込みは、基本的にはJavascriptにある程度慣れて
いる方を対象としております。
　この為、サンプルもそのまま使いまわしができるような形にはなっておりません。
　将来的にはもう少し汎用的で使いまわしの聞くサンプルを用意したいと思って
おります。

webmaster様

ご返答ありがとうございます。
先ほど、メールでURLを送信させていただきました。

たぶん初歩的なミスのような気もしますが…、なかなか解決できません。
お手数ですがご確認宜しくお願い致します。