setMap(null)でマーカーを削除することができない

下記のコードで、$('.btn').on('click',function()において
setMapメソッドですべてのマーカーを削除したいのですが、削除されずまたconsole常にも特段の
エラーが出力されません。本メソッドについてはこちらの記事を参考に学びました。

原因がわからないため、どなたか問題点等のアドバイスをいただけますでしょうか？

＊一部、PureJavascriptとJqueryが混ざっている点については一旦ご放念いただければと思います。
もちろん、以下のようなコードでも同じ症状が起きております。

<div class="btn" onclick="closeMarker">削除する</div> function closeMarker(){ //同じ処理 }

よろしくお願い申し上げます。

html
1<body onload="initialize()">
2 <div id="map" class="web_map"></div>
3 <div class="btn">削除する</div>
4</body>

javascript
1var map;
2var marker = [];
3var infoWindow = [];
4var markerData = [
5 {
6      lat:35.xxxxxx,
7      lng:139.xxxxxx,
8      icon:"./z_icon/0002_k.png",
9      contents: '<span class="sample">hoge</span><br><a href="https://www.yahoo.co.jp/">Link</a>'
10 },{
11      lat:35.xxxxxx,
12      lng:139.xxxxxx,
13      icon:"./z_icon/0003_c.png",
14      contents: '<span class="sample">fuga</span><br><a href="https://www.yahoo.co.jp/">Link</a>'
15 }
16]
17
18function initialize() {
19    var latlng = new google.maps.LatLng(35.680552, 139.766923);
20    var opts = {
21      zoom: 11,
22      center: latlng,
23      mapTypeId: google.maps.MapTypeId.ROADMAP
24    };
25    map = new google.maps.Map(document.getElementById("map"), opts);
26
27
28for (var i = 0; i < markerData.length; i++) {
29  marker[i] = new google.maps.Marker({
30              position: new google.maps.LatLng({lat: markerData[i]['lat'], lng: markerData[i]['lng']}),
31              map: map,
32              icon:new google.maps.MarkerImage(markerData[i]['icon'],null,null,null,new google.maps.Size(41, 41))
33              });
34  infoWindow[i] = new google.maps.InfoWindow({ 
35              content:markerData[i]['contents']
36              });
37  markerEvent(i);
38   function markerEvent(i) {
39      marker[i].addListener('click', function() { 
40        infoWindow[i].open(map, marker[i]); 
41      });
42   }
43  }
44}
45
46$(function() {
47  $('.btn').on('click',function(){
48    for (var i = 0; i < 3; i++) {
49       marker[i] = new google.maps.Marker({
50                  position: new google.maps.LatLng({lat: markerData[i]['lat'], lng: markerData[i]['lng']}),
51                  map: map,
52                  icon:new google.maps.MarkerImage(markerData[i]['icon'],null,null,null,new google.maps.Size(41, 41))
53                  });
54     marker[i].setMap(null);
55    }
56  })
57})

行動規範の内容に同意します

回答1件

ベストアンサー

js
1//             ↓ 別のマーカーで前のマーカーを上書きしているので削除されない
2// marker[i] = new google.maps.Marker({position: new google.maps.LatLng({lat: markerData[i]['lat'], lng: markerData[i]['lng']}), map: map, icon:new google.maps.MarkerImage(markerData[i]['icon'],null,null,null,new google.maps.Size(41, 41)) });
3   marker[i].setMap(null);