緯度、経度を指定してマーカーを削除する(1)

説明

緯度、経度を指定してマーカーを削除するには、マーカーを生成する際にマーカーオブジェクトを配列に入れておきます。また、マーカーを生成する際に緯度、経度が把握できている必要があります。以下のサンプルではmarkerPoint配列にマーカーを表示するための緯度、経度が入っています。
削除ボタンがクリックされたら入力フォームに入力されている緯度と経度を読み出します。入力フォームから読み出した緯度と経度がマーカー生成時に利用した緯度、経度と一致するかどうか調べ、一致したマーカーがあれば削除します。マーカーの削除はsetMap(null)とすれば消えます。

Google Maps APIプログラミング入門 Google Maps API プログラミング入門。Google Maps API Expertである勝又雅史氏が最新のAPI ver3やGoogle Maps for Flashなどについて解説しています。
【アマゾンで購入する】

サンプルコード [実行]

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Google Maps API ver 3 Sample/グーグルマップAPIサンプル/Google Maps API样品</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</head>
<body>
<div id="gmap"></div>
<form>
緯度：<input type="text" id="lat" value="35.689160610317174"><br>
緯度：<input type="text" id="lng" value="139.70083951950073"><br>
<input type="button" id="markerDelete" value="削除"><br>
</form>
<script type="text/javascript">
var markerPoint = [
35.689160610317174, 139.70083951950073, // 新宿駅
35.68114342380915, 139.7672724723816, // 東京駅
35.68487325862271, 139.7302794456482 // 四ツ谷駅
];
var markerData = [ ];
var map = new google.maps.Map(
document.getElementById("gmap"),{
zoom : 12,
center : new google.maps.LatLng(35.689160610317174, 139.70083951950073),
mapTypeId : google.maps.MapTypeId.ROADMAP
}
);
// マーカーを生成
for(var i=0; i<markerPoint.length; i+=2){
markerData.push(new google.maps.Marker({ // マーカーオブジェクト配列に入れておく
position: new google.maps.LatLng(markerPoint[i], markerPoint[i+1]),
map: map
}));
}
// 削除ボタンイベント設定と処理
document.getElementById("markerDelete").onclick = function(){
var lt = document.getElementById("lat").value;
var lg = document.getElementById("lng").value;
for(var i=0; i<markerData.length; i++){
if ((markerPoint[i*2] == lt) && (markerPoint[i*2+1] == lg)) {
markerData[i].setMap(null); // マーカー削除
return; // これ以上処理を続ける必要がないので関数から抜ける
}
}
}
</script>
</body>
</html>