Google map marker - Das Infofenster muss den Marker entfernen

Ich versuche ein Infofenster zu zeigen (oder wenn du eine bessere Idee hast), das einen klickbaren Link darin hat, der nach dem Anklicken den Marker entfernt. Es wird mehrere Marker geben, die alle dynamisch erstellt werden und ich möchte, dass sich jeder selbst entfernt. Ich habe versucht, einige Stücke von Code, den ich hier versammelt und dort ohne GlückGoogle map marker - Das Infofenster muss den Marker entfernen

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

Ich habe auch versucht div.outerHTML aber das doesn `t das Klicken Ereignis geben was ich brauche.

Quelle

2017-01-29 shahar eldad

Bitte geben Sie eine [MCVE] das ist Ihr Problem demonstriert. – geocodezip

Hinzugefügt vollständige (kopieren und einfügen) Codebeispiel für dieses Problem –

@geocodezip Wie gesagt, es wird mehrere Markierungen auf der Karte und jeder mit seinem eigenen InfoWIndow und entfernen Sie den Link, um den aktuellen Marker zu entfernen. –

Dank @Novice ist es mir gelungen, eine Antwort auf dieses Problem zu finden.

Das Codebeispiel wird entsprechend aktualisiert question. Hier

ist die Komplettlösung:

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

Quelle

2017-01-29 15:19:35

Google map marker - Das Infofenster muss den Marker entfernen

Antwort

Verwandte Themen