Google Maps API - есть ли способ отменить прослушиватель при следующем щелчке?

Question

У меня есть функция, которая позволяет мне нажимать на маркер и предоставляет мне информационное окно и еще один маркер.

function addMarker(props){
                var marker = new google.maps.Marker({
                    position:props.coords,
                    map: map,
                    icon:props.iconImage
                });

                if(props.content){
                    var infoWindow = new google.maps.InfoWindow({
                      content:props.content
                    });

                    marker.addListener('click', function () {
                        infoWindow.open(map, marker);
                    });
                    marker.addListener('click', function () {
                        addMarker({
                        coords:{lat: 59.896874,lng: -5.125914},
                        iconImage:'pointer12s.png',
                        content:'<h1>destination</h1>'                
                        }); 
                    });
                  
                }

            }

Есть ли способ удалить их при следующем щелчке?

Я пробовал использовать варианты:

.removeEventListener

Но я не уверен, следует ли использовать его в той же функции или использовать другую?

Answer 1

Один из вариантов - сохранить ссылку на добавленный маркер. Если он не был добавлен, создайте маркер, если он уже существует, скройте его (вызовите setMap(null)), затем установите для него значение null. Закройте InfoWindow при удалении маркера.

  var addedMarker;
  function addMarker(props) {
    var marker = new google.maps.Marker({
      position: props.coords,
      map: map,
      icon: props.iconImage
    });

    if (props.content) {
      var infoWindow = new google.maps.InfoWindow({
        content: props.content
      });
      marker.infowindow = infoWindow;
      marker.addListener('click', function() {
        infoWindow.open(map, marker);
      });
      marker.addListener('click', function() {
        if (!addedMarker || !addedMarker.setMap) {
        addedMarker = addMarker({
          coords: {
            lat: 59.896874,
            lng: -5.125914
          },
          // iconImage: 'pointer12s.png',
          content: '<h1>destination</h1>'
        });
        } else {
          this.infowindow.close();
          addedMarker.setMap(null);
          addedMarker = null;
        }
      });
    }
    return marker;
  }

Proof of concept fiddle

фрагмент кода:

(function(exports) {
  "use strict";
  var map;
  function initMap() {
    var myLatLng = {
      lat: 59.896874,
      lng: -5.125914
    };
    map = new google.maps.Map(document.getElementById("map"), {
      zoom: 8,
      center: myLatLng
    });
    addMarker({
      coords: {
        lat: 59.8,
        lng: -5.0
      },
      content: "content"
    });
  }
  var addedMarker;
  function addMarker(props) {
    var marker = new google.maps.Marker({
      position: props.coords,
      map: map,
      icon: props.iconImage
    });

    if (props.content) {
      var infoWindow = new google.maps.InfoWindow({
        content: props.content
      });
      marker.infowindow = infoWindow;
      marker.addListener('click', function() {
        infoWindow.open(map, marker);
      });
      marker.addListener('click', function() {
        if (!addedMarker || !addedMarker.setMap) {
        addedMarker = addMarker({
          coords: {
            lat: 59.896874,
            lng: -5.125914
          },
          // iconImage: 'pointer12s.png',
          content: '<h1>destination</h1>'
        });
        } else {
          this.infowindow.close();
          addedMarker.setMap(null);
          addedMarker = null;
        }
      });
    }
    return marker;
  }
  exports.initMap = initMap;
})((this.window = this.window || {}));

/* 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;
}

<!DOCTYPE html>
<html>

<head>
  <title>Simple Markers</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap&libraries=&v=weekly" defer></script>
  <!-- jsFiddle will insert css and js -->
</head>

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

</html>