今回はマーカーの全削除の仕方を紹介します。
マーカーの全削除方法は沢山あると思うので、
今回は①と言うタイトルにしました。
随時増やしていきたいと思っています。
サンプルでは地図の下に作った
「マーカー全削除ボタン」ボタンをクリックすることで、
地図上に設置されている全てのマーカーを一括削除します。
仕組みは簡単で
下記のようにマーカーの入れ物を宣言し、
forEachでどんどん詰め込んでいきます。
// マーカーの作成
var markers = new google.maps.MVCArray();
latlngs.forEach(function (latlng, index) {
var marker = new google.maps.Marker({
position: latlng,
map: gmap
});
markers.push(marker);
});
その後、マーカーを全削除したくなったら、
下記の様に今度はforEachで取り出しながらマーカーを削除していきます。
// 地図クリックで全マーカー削除
var removeButton = document.getElementById("remove_button");
google.maps.event.addDomListener(removeButton, "click", function () {
markers.forEach(function (marker, index) {
marker.setMap(null);
});
});
それではサンプルです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>マーカー全削除</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
google.maps.event.addDomListener(window, "load", function () {
var latlngs = [
new google.maps.LatLng(35.496456, 139.262695),
new google.maps.LatLng(35.906849, 139.702148),
new google.maps.LatLng(35.433820, 140.130615),
new google.maps.LatLng(34.985003, 139.883423),
new google.maps.LatLng(35.880149, 139.048462)
];
// マップを作成
var mapOptions = {
zoom: 7,
center: new google.maps.LatLng(35.686773, 139.68815)
};
var gmap = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
// マーカーの作成
var markers = new google.maps.MVCArray();
latlngs.forEach(function (latlng, index) {
var marker = new google.maps.Marker({
position: latlng,
map: gmap
});
markers.push(marker);
});
// 地図クリックで全マーカー削除
var removeButton = document.getElementById("remove_button");
google.maps.event.addDomListener(removeButton, "click", function () {
markers.forEach(function (marker, index) {
marker.setMap(null);
});
});
});
</script>
</head>
<body>
<div id="map_canvas" style="width: 300px; height: 300px"></div>
<span id="remove_button">マーカー全削除ボタン</span>
</body>
</html>
0 件のコメント:
コメントを投稿