例−38：指定の範囲内にあるマーカーを表示する
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>例−38：指定の範囲内にあるマーカーを表示する</title>
<script src="http://maps.google.co.jp/maps?file=api&v=2&key=[MAPS_API_KEY]"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
//XMLファイルのURL
var xmlURL = "http://googlemaps.googlermania.com/uploads/map_example_38.xml";
//内部用の地点リスト
var pointList = [];
//マップ
var map;
//検索の中心マーカー
var ctrlMarker = null;
//
var ctrlCircle = null;
function load(){
//===========================================================
// 1.初期化
// ・地図を作成
// ・人間マーカーを作成
// ・コントロールの追加
//===========================================================
var centerPos = new GLatLng(35.684, 139.750);
map = new GMap2( document.getElementById("map"));
map.setCenter( centerPos, 7 );
ctrlMarker = humanMarker(centerPos);
map.addOverlay( ctrlMarker );
map.addControl( new GLargeMapControl() );
//===========================================================
// 2.XMLファイルをロードする
// ↓
// カテゴリを作成する・先にマーカーを追加しておく(非表示)
// 内部用の地点リストを作成しておく
//===========================================================
GDownloadUrl(xmlURL, function(data, responseCode) {
var xmlDoc = GXml.parse(data);
//内部用のリストデータを作成
var lat,lng;
var list = xmlDoc.documentElement.getElementsByTagName("AmusementPark");
for (var i = 0; i < list.length; i++) {
//内部検索用のデータを作成
var info = {};
lat = list[i].getElementsByTagName("lat")[0].firstChild.nodeValue;
lng = list[i].getElementsByTagName("lng")[0].firstChild.nodeValue;
info.latlng = new GLatLng(lat, lng);
info.name = list[i].getElementsByTagName("name")[0].firstChild.nodeValue;
//マーカーを作成
info.marker = createMarker(info.latlng, "施設名：" + info.name);
map.addOverlay(info.marker);
info.marker.hide();
//内部リストに追加
pointList[i] = info;
};
});
}
function searchMarkers(formObj){
//===========================================================
// 3.検索ボタンが押されたら全てのマーカーをチェック
// ↓
// 該当するマーカーは表示、それ以外は非表示
//===========================================================
var hitMarkers = [];
var markerPos = ctrlMarker.getLatLng();
for (var i = 0; i < pointList.length; i++) {
if (markerPos.distanceFrom(pointList[i].latlng) < formObj.distanceLimit.value){
pointList[i].marker.show();
}else{
pointList[i].marker.hide();
}
}
if (ctrlCircle !== null) {
map.removeOverlay( ctrlCircle );
}
var points = [];
var point;
for (i = 0; i < 72; i++) {
point = destination(markerPos, i * 360/72, formObj.distanceLimit.value/1000)
points.push (point);
}
ctrlCircle = createCircle(points);
map.addOverlay( ctrlCircle );
}
function clearMarkers(formObj){
//===========================================================
// 4.クリアボタンが押されたら全てのマーカーを非表示
//===========================================================
for (var i = 0; i < pointList.length; i++) {
pointList[i].marker.hide();
}
}
function destination(orig, hdng, dist) {
var R = 6371; // earth's mean radius in km
var oX, oY;
var x, y;
var d = dist/R; // d = angular distance covered on earth's surface
hdng = hdng * Math.PI / 180; // degrees to radians
oX = orig.x * Math.PI / 180;
oY = orig.y * Math.PI / 180;
y = Math.asin( Math.sin(oY)*Math.cos(d) + Math.cos(oY)*Math.sin(d)*Math.cos(hdng) );
x = oX + Math.atan2(Math.sin(hdng)*Math.sin(d)*Math.cos(oY), Math.cos(d)-Math.sin(oY)*Math.sin(y));
y = y * 180 / Math.PI;
x = x * 180 / Math.PI;
return new GLatLng(y, x);
}
function humanMarker(mpoint) {
//===========================================================
// 位置を選択するための人間マーカーを作成
//===========================================================
var pegmanIcon = new GIcon();
pegmanIcon.image = "http://maps.google.com/mapfiles/cb/pegman.png";
pegmanIcon.iconSize = new GSize(49, 52);
pegmanIcon.iconAnchor = new GPoint(24, 34);
pegmanIcon.infoWindowAnchor = new GPoint(18, 11);
pegmanIcon.sprite = { top : 0, left : 0};
var marker = new GMarker(mpoint, {icon: pegmanIcon, draggable: true});
//マーカーがドラッグを開始したら、フキダシをクローズ
GEvent.addListener(marker, "dragstart", function(){
map.closeInfoWindow();
});
//マーカーがドロップされたら地図の中心に設定
GEvent.addListener(marker, "dragend", function(){
map.panTo( marker.getLatLng() );
});
return marker;
}
function createMarker(mpoint, contents) {
//===========================================================
// 位置を表示するためのマーカーを作成
//===========================================================
var flagIcon = new GIcon();
flagIcon.image = "http://googlemaps.googlermania.com/img/marker_flag.png";
flagIcon.shadow = "http://googlemaps.googlermania.com/img/marker_shadow.png";
flagIcon.iconSize = new GSize(35, 35);
flagIcon.shadowSize = new GSize(35, 35);
flagIcon.iconAnchor = new GPoint(0, 35);
flagIcon.infoWindowAnchor = new GPoint(18, 11);
var marker = new GMarker(mpoint, {icon: flagIcon});
//マーカーがクリックされたら施設名を表示
GEvent.addListener(marker, "click", function(){
marker.openInfoWindowHtml(contents);
});
return marker;
}
function createCircle(pointList){
//===========================================================
// 検索範囲を示す円を作成
//===========================================================
return new GPolygon(pointList, "#FF0000" , 3, 1, "#CC0000", 0.05);
}
GEvent.addDomListener(window, "load", load);
GEvent.addDomListener(window, "unload", GUnload);
//]]>
</script>
</head>
<body >
<h1>例−38：指定の範囲内にあるマーカーを表示する</h1>
<form name="form">
<table>
<tbody>
<tr>
<td valign="top">
<div id="map" style="width: 500px; height: 500px"> </div>
</td>
<td valign="top">
<h4>１．マーカーをドラッグして中心位置を決定してください</h4>
<h4>２．マーカーからの検索距離を指定してください</h4>
マーカーからの検索範囲：<br />
<select name="distanceLimit">
<option value="50000" selected="selected">50km</option>
<option value="100000">100km</option>
<option value="200000">200km</option>
</select>
<h4>３．検索ボタンを押してください</h4>
<input type="button" onclick="searchMarkers(this.form);" value="検索" /> <input type="button" onclick="clearMarkers();" value="クリア" /></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
