ソロツーリングと気ままな旅

ある特定の地域で細かくポイントを示したい場合、1つのだけのポイントではなかなか説明が難しい場合があります。そこで、GNAVIモジュールの詳細記事に掲載されている地図の中にマーカーを設置し、マーカーをクリックすると簡単な説明が表示されるようにしてみました。備忘録として掲載しておきます。
掲載ページ:キリスト苦難の道--ヴィア・ドロローサ(イスラエル)

まず、GNAVIモジュール内のimagesフォルダの中にmarkerというフォルダを作成し独自のマーカーアイコンを収納します。今回は数字付きのマーカー（norange_Marker1.png?norange_Marker12.png）を用意しました。A?Z表示であればGoogleMap オリジナルマーカーを利用することも可能です。（GoogleMap オリジナルマーカーについて）
→html/modules/(GNAVIモジュール名)/images/markerフォルダ


次に、GNAVIモジュールでマーカー設置の為の本文記事を掲載する際には、管理画面のモジュールの一般設定にて一時的にHTMLが使えるように「本文編集エディタ」という項目で「Pure HTML」を設定してからHTMLで記事を掲載する必要があります。勿論GNAVIモジュールでHTMLが使えるエディタを利用しているのであればそのままで問題ないでしょう。記事を記入した後、最終に以下のスクリプトを追加します。


----記事本文を記入----
その後、続けて以下のスクリプトを追加します

------------------------------------
<script type="text/javascript">

var myinfowindow;
myMarker = new Array();
myMarkPosition = new Array();
myInfo = new Array();


function initialize2() {

// 各マーカーの位置を設定します。
myMarkPosition[0] = new google.maps.LatLng(31.780128639621356,35.23389279853291);
myMarkPosition[1] = new google.maps.LatLng(31.780363639521095,35.233684815469815);
myMarkPosition[2] = new google.maps.LatLng(31.779995976840006,35.23202117533856);
myMarkPosition[3] = new google.maps.LatLng(31.779899643275698,35.232111699851885);
myMarkPosition[4] = new google.maps.LatLng(31.77956447009251,35.23240473122769);
myMarkPosition[5] = new google.maps.LatLng(31.779365531693315,35.23150485014412);
myMarkPosition[6] = new google.maps.LatLng(31.77931392544054,35.230753161067696);
myMarkPosition[7] = new google.maps.LatLng(31.779188519864743,35.2306009457061);
myMarkPosition[8] = new google.maps.LatLng(31.778683779663837,35.230284444878635);
myMarkPosition[9] = new google.maps.LatLng(31.778279894323095,35.229975990964704);
myMarkPosition[10] = new google.maps.LatLng(31.778330627101184,35.23003097620858);
myMarkPosition[11] = new google.maps.LatLng(31.77849308581007,35.22986736145867);


// 各情報ウィンドウの内容を設定します。
myInfo[0] = 'ピラトに裁かれる';
myInfo[1] = '有罪に定められ、鞭で打たれる';
myInfo[2] = '最初に倒れた場所';
myInfo[3] = '悲しむ母マリアと出会う';
myInfo[4] = 'キレネ人シモンがイエスを助ける';
myInfo[5] = 'ベロニカがイエスの顔を拭く';
myInfo[6] = '二度目に倒れた場所';
myInfo[7] = 'イエスがエルサレムの婦人たちに語りかける';
myInfo[8] = '三度目に倒れた場所';
myInfo[9] = '衣服を剥ぎ取られる';
myInfo[10] = '十字架が立てられる';
myInfo[11] = 'イエスの死';



// 情報ウィンドウの設定をします。
myinfowindow = new google.maps.InfoWindow();

// String.fromCharCode("A".charCodeAt(0) + index)
// var letter = String.fromCharCode("A".charCodeAt(0) + index)


//マーカーの設定を行います。
Mkimage = new Array(); //番号順マーカーを設定(norange_Marker)
var Mkshadow; //マーカーの影を設定

for(index=0 ; index < myMarkPosition.length ; index++ ){
Mkimage[index] = new google.maps.MarkerImage('./images/marker/norange_Marker' + (index+1) +'.png',
// This marker is 20 pixels wide by 34 pixels tall.
new google.maps.Size(20, 34),
// The origin for this Mkimage is 0,0.
new google.maps.Point(0,0),
// The anchor for this Mkimage is the base of the flagpole at 0,27.
new google.maps.Point(10, 34));
}
//マーカー影を設定します。
var Mkshadow = new google.maps.MarkerImage('http://maps.google.co.jp/mapfiles/ms/icons/msmarker.shadow.png',
// The shadow image is larger in the horizontal dimension
// while the position and offset are the same as for the main image.
// This marker is 31 pixels wide by 27 pixels tall.
new google.maps.Size(59, 32),
// The origin for this Mkimage is 0,0.
new google.maps.Point(0,0),
// The anchor for this Mkimage is the base of the flagpole at 0,27.
new google.maps.Point(16, 32));


// 各マーカーを地図に設定します。
for(i=0; i < myMarkPosition.length ; i++){
myMarker = new google.maps.Marker({
position:myMarkPosition,
icon: Mkimage,
shadow : Mkshadow,
map: gn_map
});
showInfo(i);
};


// マーカーごとに情報ウィンドウを表示させます。
function showInfo(num){
var hyoji = function()
{
myinfowindow.setContent(myInfo[num]);
myinfowindow.open(gn_map,myMarker[num]);
};

google.maps.event.addListener(myMarker[num], 'click', hyoji);


var mark_link = document.getElementById("mark_" + num );
if(mark_link){mark_link.onclick = hyoji;};

}


// 地図をクリックすると情報ウィンドウを閉じます。
google.maps.event.addListener(gn_map, 'click', function(){
myinfowindow.close(gn_map);
});
}

document.body.onload=initialize2;
</script>
---------------------------------

記事の掲載が終了すれば管理画面で「本文編集エディタ」を元に戻しても問題ありません。
なぜか、マーカーに対して影の設定を行っているのですが、残念ながら反映されていません。[/i]