途中別のことをやっていて時間が空いてしまいましたが、GoogleMapsAPIです。
前回までは以下の通り。
- 地図の表示と緯度経度の取得[GoogleMapsAPIVersion3]
- マーカーと情報ウィンドウの表示と削除[GoogleMapsAPIVersion3]
- XMLを読み込んでマーカーを表示する[jQuery]+[GoogleMapsAPIVersion3]
- 表示されているマーカーのリストを表示する[jQuery]+[GoogleMapsAPIVersion3]
残る仕様はひとつ。
- リストに表示された名前をクリックしたら、該当地点のマーカーのふきだしが表示されます
これ少しハマりました。
ｊQueryのところで。
わかってしまえばなんともないんですけどね。
いろいろ調べてみると、考え方としては、リストがクリックされたら、マーカーがクリックされたイベントを呼ぶように書けばいいようです。
イベントを呼ぶのはGoogleMapsAPIにあります。
http://sites.google.com/site/gmapsapi3/Home/mapsapi-v3
http://sites.google.com/site/gmapsapi3/Home/v3_reference
このあたりのページを参考にしました。
後もうひとつ、実際の動作に近い動きをしているサイトのコードを参考にしましたが…。
サイト名、URLともにわからなくなりました。わかったら追記します。
リストをとりあえずaタグでくくってクリックできるようにします。とりあえず、hrefにはjavascript:void(0)を入れておきます。
こうしておくと、ページが動いたりリロードされたり、ヒストリーバックがおかしなことになりません。
おまじないみたいなものですね。
前回のリスト表示のところを少し改造します。
//リスト表示
//liとaタグをセット
loc = $('<li>').append($('<a href="javascript:void(0)"/>').text(LocateName));
//リスト表示
$('#pointlist > ul').append(loc);
まずはこんな感じに。
前回はulに直接放り込むイメージでしたが、今回はloc変数内にセットしてから、ulに放り込むという形式に変更しています。
次に、マーカークリックイベントを仕込みます。
//リスト表示
//リストに対応するマーカー配列キーをセット
var marker_num = marker_ary.length - 1;
//liとaタグをセット
loc = $('<li>').append($('<a href="javascript:void(0)"/>').text(LocateName));
//セットしたタグにイベント「マーカーがクリックされた」をセット
loc.bind('click', function(){
google.maps.event.trigger(marker_ary[marker_num], 'click');
});
//リスト表示
$('#pointlist > ul').append(loc);
3行目で、イベント対象のマーカーのキーを算出します。一番新しいマーカーなので、配列数-1のはずですね。
7行目で、locにセットしたタグセットにイベントを仕込んでいます。
今回のイベントは google.maps.event.trigger を使ってます。
google.maps.event.addListener（）でもいけそうな気がしますが…参考にしたサイトのコードがtriggerを使ってたのでこうしました。
あとで google.maps.event.addListener（） でも試してみたいですが、今は放置します。
ハマったのがこのあたりでした。
イベントを仕込むのはいいんですが、最初はlocにセットせずになんとかイベントをぶち込もうとあがきました。
javascript。
もっと勉強しないとだめだな…。
で、今回完成したコードは以下のようになっております。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var marker_ary = new Array();
var currentInfoWindow
function initialize() {
var latlng = new google.maps.LatLng(34.985458, 135.757755);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
//地図中央の緯度経度を表示
function getMapcenter() {
//地図中央の緯度経度を取得
var mapcenter = map.getCenter();
//テキストフィールドにセット
document.getElementById("keido").value = mapcenter.lng();
document.getElementById("ido").value = mapcenter.lat();
}
//地図の中央にマーカー
function setMarker() {
var mapCenter = map.getCenter();
//マーカー削除
MarkerClear();
//マーカー表示
MarkerSet(mapCenter.lat(),mapCenter.lng(),'test');
}
//マーカー削除
function MarkerClear() {
//表示中のマーカーがあれば削除
if(marker_ary.length > 0){
//マーカー削除
for (i = 0; i < marker_ary.length; i++) {
marker_ary[i].setMap();
}
//配列削除
for (i = 0; i <= marker_ary.length; i++) {
marker_ary.shift();
}
}
}
function MarkerSet(lat,lng,text){
var marker_num = marker_ary.length;
var marker_position = new google.maps.LatLng(lat,lng);
var markerOpts = {
map: map,
position: marker_position
};
marker_ary[marker_num] = new google.maps.Marker(markerOpts);
//textが渡されていたらふきだしをセット
if(text.length>0){
var infoWndOpts = {
content : text
};
var infoWnd = new google.maps.InfoWindow(infoWndOpts);
google.maps.event.addListener(marker_ary[marker_num], "click", function(){
//先に開いた情報ウィンドウがあれば、closeする
if (currentInfoWindow) {
currentInfoWindow.close();
}
//情報ウィンドウを開く
infoWnd.open(map, marker_ary[marker_num]);
//開いた情報ウィンドウを記録しておく
currentInfoWindow = infoWnd;
});
}
}
//XMLで取得した地点を地図上でマーカーに表示
function setPointMarker(){
//リストの内容を削除
$('#pointlist > ul').empty();
//XML取得
$.ajax({
url: 'sample.xml',
type: 'GET',
dataType: 'xml',
timeout: 1000,
error: function(){
alert("情報の読み込みに失敗しました");
},
success: function(xml){
//帰ってきた地点の数だけループ
$(xml).find("Locate").each(function(){
var LocateLat = $("lat",this).text();
var LocateLng = $("lng",this).text();
var LocateName = $("name",this).text();
//マーカーをセット
MarkerSet(LocateLat,LocateLng,LocateName);
//リスト表示
//リストに対応するマーカー配列キーをセット
var marker_num = marker_ary.length - 1;
//liとaタグをセット
loc = $('<li>').append($('<a href="javascript:void(0)"/>').text(LocateName));
//セットしたタグにイベント「マーカーがクリックされた」をセット
loc.bind('click', function(){
google.maps.event.trigger(marker_ary[marker_num], 'click');
});
//リスト表示
$('#pointlist > ul').append(loc);
});
}
});
}
</script>
</head>
<body onload="initialize()">
<div id="pointlist" style="width:20em;float:left;">
<ul>
<li>地点リスト</li>
</ul>
</div>
<div style="float:left;">
<div id="map_canvas" style="width:600px; height:600px"></div>
<div>
経度<input type="text" size="20" id="ido" value="" />
緯度<input type="text" size="20" id="keido" value="" />
<input type="button" value="地図中央の緯度経度" onclick="getMapcenter()" onkeypress="getMapcenter()" />
<div>
<div><input type="button" value="地図中央にマーカー" onclick="setMarker()" onkeypress="setMarker()" /></div>
<div><input type="button" value="地点データを読み込む" onclick="setPointMarker()" onkeypress="setPointMarker()" /></div>
</div>
</body>
</html>
左側に表示されたリストの地名をクリックすると、該当するマーカーが表示されます。
ちょっと苦戦しましたがうまくいきました。
記憶の新しいうちにと深夜に大慌てで書いたエントリなので、ちょっとまとまってませんね。
また後で追記などすることにします。