マーカー（アイコン）をクリックして、そのマーカーを消す

スポンサードリンク

マーカー（アイコン）をクリックして、そのマーカーを消す

Posted by 管理人 on 2013年9月14日 Leave a comment (1) Go to comments

地図に表示したマーカー（アイコン）をクリックして削除する方法

この記事（地図をクリックして、マーカー（アイコン）を追加／全てのマーカー（アイコン）を一括で削除する方法）のソースに、マーカークリックイベントを追加し、setMapメソッドにnullを指定すればok。

<body>
<div id=”map” style=”width : 700px;height : 345px;bottom : auto;”></div>
<div class=”button”><a href=”#” class=”button” onclick=”clearMap();return false;”>リセット</a></div>
<script type=”text/javascript”>
var map;
var markersArray = [];
var centre = new google.maps.LatLng(35.590319,139.739176);

function initialize()
{
map = new google.maps.Map(document.getElementById(“map”),
{
zoom: 10,
center: centre,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
google.maps.event.addListener(map, ‘click’, createMarker);
}

function createMarker(event)
{
var marker = new google.maps.Marker(
{
position: event.latLng,
map: map,
draggable: true,
　　　 icon: “http://labs.google.com/ridefinder/images/mm_20_blue.png”
});
markersArray.push(marker);

google.maps.event.addListener(marker, ‘click’, function()
{
marker.setMap(null);
});
}window.onload = initialize;

</script>
</body>