Не удается закрыть информационные окна в Google Maps. Ошибка: Uncaught TypeError: Невозможно прочитать свойство 'close' из неопределенного

Question

Я пытаюсь создать маркеры на моей карте Google для различных свойств, которые есть в моем веб-приложении Node.js.Мне удалось это сделать, но мои информационные окна не закрываются при нажатии на карту.Ниже мой код и ошибка.

<% properties.forEach(function(location){ %>
  var loc = {lat: <%=location.lat %>, lng:<%= location.lng %>};

  var contentString = `
  <strong><%= location.name %><br />
  <%= location.location %></strong>
  <p><%= location.description %></p>
  `

  var marker = new google.maps.Marker({
    position: loc,
    map: map
  });

  marker['infowindow'] = new google.maps.InfoWindow({
    content: contentString
  });

       google.maps.event.addListener(marker, 'click', function() {
            // this['infowindow'].open(map, this);

           if(this.open){
            this['infowindow'].close();
            this.open = false;
        }
        else{
            this['infowindow'].open(map,this);
            this.open = true;
        }
        google.maps.event.addListener(map, 'click', function() {
            this['infowindow'].close();
            this.open = false;
        });

    });

  <% }); %>

и ошибка, которую я получаю на консоли:

Uncaught TypeError: Cannot read property 'close' of undefined

Answer 1

Комментарии:

1. вы добавляете map прослушиватель щелчков для каждого маркера (вам нужен только один)
2. this внутри map щелчкового прослушивателя будетбыть map, а не маркером.

Предложения:

1. сохраняйте ссылки на маркеры при их создании (чтобы вы могли перебирать их и закрывать информационные окнакогда нажата map)
2. создайте только один map приемник щелчков вне цикла создания маркера, закройте все открытые информационные окна в этом.

var markers = [];  // create markers array to keep references to the markers

<% properties.forEach(function(location){ %>
  var loc = {lat: <%=location.lat %>, lng:<%= location.lng %>};

  var contentString = '
  <strong><%= location.name %><br />
  <%= location.location %></strong>
  <p><%= location.description %></p>
  '
  var marker = new google.maps.Marker({
    position: loc,
    map: map
  });

  markers.push(marker);  // add each created marker to the array

  marker['infowindow'] = new google.maps.InfoWindow({
    content: contentString
  });

  google.maps.event.addListener(marker, 'click', function() {
    if(this.open){
      this['infowindow'].close();
      this.open = false;
    }
    else{
      this['infowindow'].open(map,this);
      this.open = true;
    }
  });

  <% }); %>
  // when the map is clicked, close any open infowindows
  google.maps.event.addListener(map, 'click', function() {
    for (var i = 0; i < markers.length; i++) {
      markers[i]['infowindow'].close();
      markers[i].open = false;
    }
  });

подтверждение концепции скрипта

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

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.

function initMap() {
  var uluru = {
    lat: -25.363,
    lng: 131.044
  };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });
  var markers = [];
  // <% properties.forEach(function(location){ %>
  var loc = {
    lat: -25.363,
    lng: 131.044
  };

  var contentString = '<strong>name<br />location</strong><p>description</p>';

  var marker = new google.maps.Marker({
    position: loc,
    map: map
  });
  markers.push(marker);
  marker['infowindow'] = new google.maps.InfoWindow({
    content: contentString
  });

  google.maps.event.addListener(marker, 'click', function() {
    // this['infowindow'].open(map, this);

    if (this.open) {
      this['infowindow'].close();
      this.open = false;
    } else {
      this['infowindow'].open(map, this);
      this.open = true;
    }
  });

  // ============ 2 ============
  // 30.0002° S, 136.2092° E
  var loc = {
    lat: -30,
    lng: 136.2092
  };

  var contentString = '<strong>name 2<br />location 2</strong><p>description 2</p>';

  var marker = new google.maps.Marker({
    position: loc,
    map: map
  });
  markers.push(marker);
  marker['infowindow'] = new google.maps.InfoWindow({
    content: contentString
  });

  google.maps.event.addListener(marker, 'click', function() {
    // this['infowindow'].open(map, this);

    if (this.open) {
      this['infowindow'].close();
      this.open = false;
    } else {
      this['infowindow'].open(map, this);
      this.open = true;
    }
  });

  // <% }); %>
  google.maps.event.addListener(map, 'click', function() {
    for (var i = 0; i < markers.length; i++) {

      markers[i]['infowindow'].close();
      markers[i].open = false;
    }
  });
}

html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>