Google размещает маркеры в информационном окне

Question

Я пытаюсь разместить маркеры на карте Google, которые фиксируют координаты (как показано ниже).Код работает нормально, при нажатии на карту я могу получить маркеры с информационным окном, которое автоматически открывается с информацией о координатах.Тем не менее, я не могу повторно открыть информационное окно после его закрытия.Спасибо!

function placeMarker(position, map) {
  var marker = new google.maps.Marker({
    position: position,
    map: map,
  });
  var infowindow = new google.maps.InfoWindow({
    content: 'Latitude: ' + position.lat() +
      '<br>Longitude: ' + position.lng()
  });
  infowindow.open(map, marker);
}
map.addListener('click', function(e) {
  placeMarker(e.latLng, map);
  map.setZoom(9);
  map.setCenter(marker.getPosition());
  infowindow.setContent(content);
});

Answer 1

InfoWindow не откроется после того, как вы его закроете, потому что вы не добавляете слушателя, когда нажимаете на свои маркеры. Вы открываете его только один раз, когда создаете маркер.

Также лучше создать только 1 объект InfoWindow (вне вашей функции placeMarker) и при необходимости использовать методы setContent и open, если только вам не нужно открывать несколько окон InfoWindows одновременно.

Доказательство концепции ниже:

function initMap() {

  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 3,
    center: {
      lat: -28.024,
      lng: 140.887
    }
  });

  var infowindow = new google.maps.InfoWindow();

  // On map click, create marker
  google.maps.event.addListener(map, 'click', function(e) {

    var marker = new google.maps.Marker({
      position: e.latLng,
      map: map,
    });
    
    // Set infowindow content and open
    infowindow.setContent(e.latLng.lat() + ', ' + e.latLng.lng());
    infowindow.open(map, marker);

    // On marker click, set infowindow content and open
    google.maps.event.addListener(marker, 'click', function() {

      infowindow.setContent(this.getPosition().lat() + ', ' + this.getPosition().lng());
      infowindow.open(map, marker);
    });
  });
}

initMap();

#map-canvas {
  height: 200px;
}

<div id="map-canvas"></div>

<script src="https://maps.googleapis.com/maps/api/js"></script>