Marqueur de carte Google - La fenêtre d'information doit supprimer le marqueur

J'essaie d'afficher une fenêtre d'information (ou si vous avez une meilleure idée) qui aura un lien cliquable à l'intérieur qu'une fois cliqué, il enlèvera le marqueur. Il y aura plusieurs marqueurs, tous créés dynamiquement, et je veux que chacun se retire lui-même. J'ai essayé quelques morceaux de code que je réunis ici et là pas de chanceMarqueur de carte Google - La fenêtre d'information doit supprimer le marqueur

<!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>

J'ai aussi essayé div.outerHTML mais doesn`t donnent l'événement clic j'ai besoin.

Source

2017-01-29 shahar eldad

S'il vous plaît fournir un [mcve] qui démontre votre problème. – geocodezip

Ajout d'un exemple de code complet (copier-coller) pour ce numéro –

@geocodezip Comme je l'ai dit, il y aura plusieurs marqueurs sur la carte et chacun avec son propre lien InfoWIndow et remove pour supprimer le marqueur en cours. –

Grâce à @Novice, j'ai réussi à trouver une réponse à ce problème.

L'exemple de code est mis à jour en fonction de question.

Voici la solution complète:

<!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>

Source

2017-01-29 15:19:35

Marqueur de carte Google - La fenêtre d'information doit supprimer le marqueur

Répondre

Questions connexes