bcacsatoさん、いつもお世話になっております。
ご希望の動作は問題なく可能かと思いますが、JavaScriptに多少慣れている
必要がございます。また、現状のサンプルからの変更となりますと、割と大掛かり
な変更となります。
まず、マーカー側から説明させて頂きます。
(1-1) マーカーの上にマウスを持ってきた時点で吹き出しを表示。
現状では、head要素の中のscript要素の中で、吹き出し表示処理（showMaker）
を実行しています。
コード: 全て選択
// マーカー表示イベントハンドラ
var showMarker = function(){
// マーカーを地図の中央に持ってきて、情報ウィンドウを表示する。
marker.openInfoWindowHtml( '<div class="marker_data_html"><h2>' + cmsdVars.d( 'title' + mapdata.eid ).innerHTML + '</h2>'
+ '<p>' + cmsdVars.d( 'description' + mapdata.eid ).innerHTML + '</p></div>' );
};
// clickイベントハンドラを設定
GEvent.addListener( marker, "click", showMarker );
ここを、clickイベントではなく、makerのmouseoverイベントでshowMaker
を実行するように修正します。
これは、
コード: 全て選択
// clickイベントハンドラを設定
GEvent.addListener( marker, "click", showMarker );
を、
コード: 全て選択
// mouseoverイベントハンドラを設定
GEvent.addListener( marker, "mouseover", showMarker );
に変更すればOKです。
(1-2) マーカークリック時にエントリページへジャンプする。
現状、この処理は存在しませんので、新しく作る必要があります。
コード: 全て選択
// マーカー表示イベントハンドラ
var showMarker = function(){
上記のマーカー表示イベントハンドラの定義部分と並列に、エントリページ
表示処理を記述します。エントリページのファイル名を「entrydetail.php」と
仮定します。
コード: 全て選択
// エントリ詳細ページへジャンプ
var jumpToEntry = function(){
window.location = 'entrydetail.php?eid=' + mapdata.eid;
}
この処理を、makerのmouseoverイベントに割り当てます。
コード: 全て選択
// clickイベントハンドラを設定
GEvent.addListener( marker, "click", jumpToEntry );
(1-3) マーカーからマウスアウトすると、吹き出しが消える。
同様に、mouseout時のイベントハンドラを作り、それをGEvent.addListner
を使ってmouseoutイベントに割当てます。
コード: 全て選択
// 吹き出しを消す
var closeInfoWindow = function(){
marker.closeInfoWindow();
}
// mouseoutイベントハンドラを設定
GEvent.addListener( marker, "mouseout", closeInfoWindow );
マーカーについてはこれでOKです。
次に、左側に並んでいる各リンクに対する処理を記述します。
現状では、リンクのクリック時に吹き出しを表示しています。
この部分です。
コード: 全て選択
// エントリ見出しをクリックした際のイベントハンドラを定義・設定
cmsdVars.d( "title" + mapdata.eid ).onclick = function(){
// zoomを設定
map.setCenter( new GLatLng( mapdata.lat, mapdata.lng ), mapdata.zoom );
// マーカー表示
showMarker();
return false;
}
onclickイベントではjumpToEnterを、onmouseoverにはshowMakerを、
onmouseoutにはcloseInfoWindowを実行します。
(2-1) 見出しの上にマウスカーソルを持ってきた時に吹き出しを表示する。
コード: 全て選択
// 見出しの上にカーソルを持ってきた時に吹き出し表示
cmsdVars.d( "title" + mapdata.eid ).onmouseover = function(){
// zoomを設定
map.setCenter( new GLatLng( mapdata.lat, mapdata.lng ), mapdata.zoom );
// マーカー表示
showMarker();
return false;
}
(2-2) 見出しをクリックした時にエントリ詳細ページへジャンプする。
コード: 全て選択
// 見出しクリック時にエントリ詳細ページへジャンプ
cmsdVars.d( "title" + mapdata.eid ).onclick = function(){
jumpToEntry();
return false;
}
(2-3) 見出しからマウスカーソルが外れた時に情報ウィンドウを閉じる。
コード: 全て選択
// 見出しからマウスカーソルが外れた時に情報ウィンドウを閉じる
cmsdVars.d( "title" + mapdata.eid ).onmouseout = function(){
closeInfoWindow();
return false;
}
以上です。
まとめると、makeMaker関数は次のようになります。
コード: 全て選択
// マーカーを生成して地図に表示する
function makeMarker( map, mapdata )
{
// マーカー生成
var marker = new GMarker( new GLatLng( mapdata.lat, mapdata.lng ) );
map.addOverlay( marker );
// マーカー表示イベントハンドラ
var showMarker = function(){
// マーカーを地図の中央に持ってきて、情報ウィンドウを表示する。
marker.openInfoWindowHtml( '<div class="marker_data_html"><h2>' + cmsdVars.d( 'title' + mapdata.eid ).innerHTML + '</h2>'
+ '<p>' + cmsdVars.d( 'description' + mapdata.eid ).innerHTML + '</p></div>' );
};
// mouseoverイベントハンドラを設定
GEvent.addListener( marker, "mouseover", showMarker );
// エントリ詳細ページへジャンプ
var jumpToEntry = function(){
window.location = 'entrydetail.php?eid=' + mapdata.eid;
}
// clickイベントハンドラを設定
GEvent.addListener( marker, "click", jumpToEntry );
// 吹き出しを消す
var closeInfoWindow = function(){
marker.closeInfoWindow();
}
// mouseoutイベントハンドラを設定
GEvent.addListener( marker, "mouseout", closeInfoWindow );
// エントリ見出しをクリックした際のイベントハンドラを定義・設定
cmsdVars.d( "title" + mapdata.eid ).onclick = function(){
// zoomを設定
map.setCenter( new GLatLng( mapdata.lat, mapdata.lng ), mapdata.zoom );
// マーカー表示
showMarker();
return false;
}
// 見出しの上にカーソルを持ってきた時に吹き出し表示
cmsdVars.d( "title" + mapdata.eid ).onmouseover = function(){
// zoomを設定
map.setCenter( new GLatLng( mapdata.lat, mapdata.lng ), mapdata.zoom );
// マーカー表示
showMarker();
return false;
}
// 見出しクリック時にエントリ詳細ページへジャンプ
cmsdVars.d( "title" + mapdata.eid ).onclick = function(){
jumpToEntry();
return false;
}
// 見出しからマウスカーソルが外れた時に情報ウィンドウを閉じる
cmsdVars.d( "title" + mapdata.eid ).onmouseout = function(){
closeInfoWindow();
return false;
}
}
ちょっと、実際に実行して確認する時間が取れなかったのですが、おおむねこの
ような手順で動くと思います。
うまく動かなかった場合はご連絡頂ければ幸いです。
同様にNot Foundとなってしまいます。
