Google map marker - 情報ウィンドウでマーカーを削除する必要があります

情報ウィンドウを表示しようとしています（または良いアイデアがある場合）。その中にクリック可能なリンクがあり、これをクリックするとマーカーが削除されます。複数のマーカーがすべて動的に作成され、それぞれマーカーを削除する必要があります。は、私はまたdiv.outerHTMLを試してみました運Google map marker - 情報ウィンドウでマーカーを削除する必要があります

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Google maps test</title> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <style> 
     #map { 
     height: 100%; 
     } 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="searchBox"> 
     <input type="text" id="someInput"/> 
     <button onclick="onSendClicked()">Send</button> 
    </div> 
    <div id="map"></div> 
    <script> 

     var map; 
     //var tempMarker; 

     function onSendClicked(){ 
     var textBox = document.getElementById("someInput"); 
     var input = textBox.value; 

     var geoCoder = new google.maps.Geocoder(); 
     geoCoder.geocode({'address':input}, function(results, status){ 
      if (status == google.maps.GeocoderStatus.OK){ 
       //if (tempMarker){ 
       // tempMarker.setMap(null); 
       // google.maps.event.clearListeners(tempMarker, 'click'); 
       //} 
       var location = results[0].geometry.location; 
       map.setCenter(location); 
       var tempMarker = new google.maps.Marker({ 
        position: location, 
        map: map 
       }); 
       map.setZoom(15); 

       var div = document.createElement("div"); 
       div.innerHTML = div.innerHTML + input; 
       var br = document.createElement("br"); 
       div.appendChild(br); 

       var aLink = document.createElement("a"); 
       aLink.onClick = function(){ 
        removeMarker(tempMarker); 
       } 
       aLink.innerText = "Remove marker"; 
       div.appendChild(aLink); 

       var infoWindowHomeAddress = new google.maps.InfoWindow({ 
        content: div 
       }); 

       tempMarker.addListener('click',function(){ 
        infoWindowHomeAddress.open(tempMarker.get('map'), tempMarker); 
       }); 

      } 
     }); 
     } 

     function removeMarker(marker){ 
     google.maps.event.clearListeners(marker, 'click'); 
     marker.setMap(null); 
     } 

     function initMap() { 
     map = new google.maps.Map(document.getElementById('map'), { 
      center: {lat: 32.005255, lng: 34.797488}, 
      zoom: 15 
     }); 
     } 
    </script> 
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB5Sx8aiOG14-XC7HJuSlEKAlzSnkhfnbw&callback=initMap" 
    async defer></script> 
    </body> 
</html>

であちこちに集まっコードのいくつかの作品を試みたが、このdoesnの `tは私が必要なクリックイベントを与えます。

出典

2017-01-29 shahar eldad

：ここ

は完全なソリューションです。 – geocodezip

この問題の完全な（コピー＆ペースト）コードサンプルを追加しました。 –

@geocodezip地図上に複数のマーカーがあり、それぞれのInfoWIndowとリンクを削除して現在のマーカーを削除します。 –

@Noviceのおかげで、私はこの問題に対する答えを思いつきました。

コードサンプルは、questionに従って更新されます。あなたの問題を示している[MCVE]を提供してください

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Google maps test</title> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <style> 
     #map { 
     height: 100%; 
     } 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="searchBox"> 
     <input type="text" id="someInput"/> 
     <button onclick="onSendClicked()">Send</button> 
    </div> 
    <div id="map"></div> 
    <script> 

     var map; 
     var counter = -1; 
     var markers = []; 

     function onSendClicked(){ 
     var textBox = document.getElementById("someInput"); 
     var input = textBox.value; 

     var geoCoder = new google.maps.Geocoder(); 
     geoCoder.geocode({'address':input}, function(results, status){ 
      if (status == google.maps.GeocoderStatus.OK){ 
       //if (tempMarker){ 
       // tempMarker.setMap(null); 
       // google.maps.event.clearListeners(tempMarker, 'click'); 
       //} 
       counter++; 
       var location = results[0].geometry.location; 
       map.setCenter(location); 
       var tempMarker = new google.maps.Marker({ 
        position: location, 
        map: map, 
        id: counter 
       }); 
       map.setZoom(15); 

       var infoWindowHomeAddress = new google.maps.InfoWindow({ 
        content: input + "<br/><a href='#' onclick='removeMarker(" + counter + ");'>Remove marker</a>" 
       }); 

       tempMarker.addListener('click',function(){ 
        infoWindowHomeAddress.open(tempMarker.get('map'), tempMarker); 
       }); 
       markers.push(tempMarker); 
      } 
     }); 
     } 

     function removeMarker(markerId){ 
     var marker = markers[markerId]; 
     google.maps.event.clearListeners(marker, 'click'); 
     marker.setMap(null); 
     } 

     function initMap() { 
     map = new google.maps.Map(document.getElementById('map'), { 
      center: {lat: 32.005255, lng: 34.797488}, 
      zoom: 15 
     }); 
     } 
    </script> 
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB5Sx8aiOG14-XC7HJuSlEKAlzSnkhfnbw&callback=initMap" 
    async defer></script> 
    </body> 
</html>

出典

2017-01-29 15:19:35

Google map marker - 情報ウィンドウでマーカーを削除する必要があります

答えて

関連する問題