説明
削除ボタンがクリックされたら入力フォームに入力されている緯度と経度を読み出します。入力フォームから読み出した緯度と経度がマーカーの緯度、経度と一致するかどうか調べます。マーカーの位置はオブジェクトのgetPosition()メソッドを使います。getPosition()メソッドはLatLngオブジェクトを返すのでlat()で緯度、lng()メソッドで経度を取得することができます。得られた位置とフォームに入力した緯度経度と一致したマーカーがあれば削除します。マーカーの削除はsetMap(null)とすれば消えます。
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++){
var mlt = markerData[i].getPosition().lat();
var mlg = markerData[i].getPosition().lng();
if ((mlt == lt) && (mlg == lg)) {
markerData[i].setMap(null); // マーカー削除
return; // これ以上処理を続ける必要がないので関数から抜ける
}
}
}
</script>
</body>
</html>