Google map marker - Информационное окно необходимо удалить маркер

Я пытаюсь показать информационное окно (или если у вас есть идея), в котором будет кликабельная ссылка, которая после щелчка удалит маркер. Будет создано несколько маркеров, все создаются динамически, и я хочу, чтобы каждый удалял себя. я попробовал некоторые куски кода я собрались здесь и там не повезло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>

Я попытался также div.outerHTML но это Безразлично `дать событие щелчка мне нужно.

источник

2017-01-29 shahar eldad

Пожалуйста, обеспечивают [mcve], который демонстрирует вашу проблему. – geocodezip

Добавлен полный образец (копирование и вставка) кода для этой проблемы –

@geocodezip Как я уже сказал, на карте будет много маркеров и каждый со своим собственным InfoWIndow и удалит ссылку для удаления текущего маркера. –

Благодаря @Novice мне удалось найти ответ на этот вопрос.

Образец кода обновляется в соответствии с этим question.

Вот полное решение:

<!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 - Информационное окно необходимо удалить маркер

ответ

Смежные вопросы