JavaScript経由でGoogleマップマーカーを削除または消去するにはどうすればよいですか？

私はthis tutorialに従っています。このチュートリアルは私にとって完璧に働いています。しかし、私は既存のマーカーを削除またはクリアすることはできません。JavaScript経由でGoogleマップマーカーを削除または消去するにはどうすればよいですか？

私は

map.clear();

と

for (var i = 0; i < markers.length; i++) { 
      markers[i].setMap(null); 
     }

を試してみましたが、何も働きません。私は以下のコード全体を提供しました。私は良いWebプログラマーではないので、このコードを編集するのが最善です。

<!DOCTYPE html > 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Using MySQL and PHP with Google Maps</title> 
    <style> 
     /* Always set the map height explicitly to define the size of the div 
     * element that contains the map. */ 
     #map { 
     height: 100%; 
     } 
     /* Optional: Makes the sample page fill the window. */ 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
    </style> 
    </head> 

    <body> 
    <div id="map"></div> 

    <script> 
     var customLabel = { 
     restaurant: { 
      label: 'R' 
     }, 
     bar: { 
      label: 'B' 
     } 
     }; 

     function initMap() { 
     var map = new google.maps.Map(document.getElementById('map'), { 
      center: new google.maps.LatLng(-33.863276, 151.207977), 
      zoom: 12 
     }); 
     var infoWindow = new google.maps.InfoWindow; 

      // Change this depending on the name of your PHP or XML file 
      downloadUrl('https://storage.googleapis.com/mapsdevsite/json/mapmarkers2.xml', function(data) { 
      var xml = data.responseXML; 
      var markers = xml.documentElement.getElementsByTagName('marker'); 
      Array.prototype.forEach.call(markers, function(markerElem) { 
       var id = markerElem.getAttribute('id'); 
       var name = markerElem.getAttribute('name'); 
       var address = markerElem.getAttribute('address'); 
       var type = markerElem.getAttribute('type'); 
       var point = new google.maps.LatLng(
        parseFloat(markerElem.getAttribute('lat')), 
        parseFloat(markerElem.getAttribute('lng'))); 

       var infowincontent = document.createElement('div'); 
       var strong = document.createElement('strong'); 
       strong.textContent = name 
       infowincontent.appendChild(strong); 
       infowincontent.appendChild(document.createElement('br')); 

       var text = document.createElement('text'); 
       text.textContent = address 
       infowincontent.appendChild(text); 
       var icon = customLabel[type] || {}; 
       var marker = new google.maps.Marker({ 
       map: map, 
       position: point, 
       label: icon.label 
       }); 
       marker.addListener('click', function() { 
       infoWindow.setContent(infowincontent); 
       infoWindow.open(map, marker); 
       }); 
      }); 
      }); 
     } 



     function downloadUrl(url, callback) { 
     var request = window.ActiveXObject ? 
      new ActiveXObject('Microsoft.XMLHTTP') : 
      new XMLHttpRequest; 

     request.onreadystatechange = function() { 
      if (request.readyState == 4) { 
      request.onreadystatechange = doNothing; 
      callback(request, request.status); 
      } 
     }; 

     request.open('GET', url, true); 
     request.send(null); 
     } 

     function doNothing() {} 
    </script> 
    <script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> 
    </script> 
    </body> 
</html>

出典

2017-07-15 XpressGeek

あなたのマーカー配列はgoogle.maps.Markerの配列ではありません。あなたの配列はxmlnodesを保持します。作成しているマーカーは、xmlnodes配列のforeachメソッドに適切な変数で格納する必要があります。例えば：

var mapMarkers = []; 

function initMap() { 
    mapMarkers = []; 
    var map ... 

    downloadUrl('https://storage.googleapis.com/mapsdevsite/json/mapmarkers2.xml', function (data) { 
     var xml = data.responseXML; 
     var markers = xml.documentElement.getElementsByTagName('marker'); 
     Array.prototype.forEach.call(markers, function (markerElem) { 
      var id = markerElem.getAttribute('id'); 

      ... 

      var marker = new google.maps.Marker({ 
       map: map, 
       position: point, 
       label: icon.label 
      }); 
      marker.addListener('click', function() { 
       infoWindow.setContent(infowincontent); 
       infoWindow.open(map, marker); 
      }); 
      mapMarkers.push(marker) 
     }); 
    }); 
} 

function downloadUrl(url, callback) { 
    ... 
}

今、あなたがマップからマーカーを削除するmapMarkersを反復処理することができます。

出典

2017-07-15 15:40:59

どのような安堵！すてきなソリューション@Shane – XpressGeek

JavaScript経由でGoogleマップマーカーを削除または消去するにはどうすればよいですか？

答えて

関連する問題