前回までは以下の通り。
- 地図の表示と緯度経度の取得[GoogleMapsAPIVersion3]
- マーカーと情報ウィンドウの表示と削除[GoogleMapsAPIVersion3]
- XMLを読み込んでマーカーを表示する[jQuery]+[GoogleMapsAPIVersion3]
Googleさんと先人のおかげで、マーカーと情報ウィンドウまでサクサクと出来ました。
残る仕様は二つ。
- 現在表示されている地点データの名前を、地図の外にリストとして表示します
- リストに表示された名前をクリックしたら、該当地点のマーカーのふきだしが表示されます
今回は「現在表示されている地点データの名前を、地図の外にリストとして表示します」の方をかたづけます。
これもjQueryを使えばすごく簡単。
まず、リストが表示される場所を確保します。
<body onload="initialize()"> <div id="pointlist" style="width:20em;float:left;"> <ul> <li>testtest</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>
これで、地図の左側にリストが表示されます。
もうあっさりとやっちゃいます。
マーカーを表示するときに、ついでにリストを表示してしまいます。
//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);
//リスト表示
$('#pointlist > ul').append("<li>"+LocateName+"</li>");
});
}
});
}
4行目で、一旦リストの内容を全部消し、22行目でマーカーをセットした後、24行目で削除したulの中に、liを足していくというイメージですね。
HTMLと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);
//リスト表示
$('#pointlist > ul').append("<li>"+LocateName+"</li>");
});
}
});
}
</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>
HTMLは10行弱増えましたが、Javascriptのコードは実質2行増えただけ。
おそろしく便利で高機能…jQuertyさまさまです。足を向けて寝られません。