Закрытие информационных окон в Google Maps, нажав на карту?

Я делаю мобильное веб-приложение.

Часть приложения сбрасывает несколько маркеров, которые можно щелкнуть, чтобы открыть информационные окна. Меня раздражает, что они не исчезнут, если вы продолжите использовать карту, не признав их, как в приложении для карт iOS.

Есть ли способ установить его так, чтобы, если пользователь щелкает по базовой карте, все открытые информационные окна закрываются?

Источник

6 ответов

Решение

Добавить слушателя к событию click карты и закрыть информационные блоки в его обработчике

google.maps.event.addListener(map, "click", function(event) {
    for (var i = 0; i < ibArray.length; i++ ) {  //I assume you have your infoboxes in some array
         ibArray[i].close();
    }
});

Я делаю это на типичных сайтах, но не вижу причин, по которым это не будет работать на мобильных устройствах.

Источник

Попробуй это:

google.maps.event.addListener(map, "click", function(event) {
    infowindow.close();
});

Это довольно просто и должно работать.

Источник 
google.maps.event.addListener(marker, 'click', function() {
    if(!marker.open){
        infoWindow.open(map,marker);
        marker.open = true;
    }
    else{
        infoWindow.close();
        marker.open = false;
    }
    google.maps.event.addListener(map, 'click', function() {
        infoWindow.close();
        marker.open = false;
    });
});

Работает отлично

Источник

У меня есть лучшее решение для всех сенарио.

Попробуйте это: JSFiddle

         const infoWindow = new google.maps.InfoWindow();

function init() {
    const map = new google.maps.Map(document.getElementById('map'), {
        zoom: 6,
        center: new google.maps.LatLng(39.9646, 30.8259),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    });

    map.addListener('click', () => {
        if (infoWindow) {
            infoWindow.close();
        }
    });

    const istanbulMark = new google.maps.Marker({
        position: new google.maps.LatLng(41.0876, 28.9288),
        map: map,
        label: 'I'
    });

    istanbulMark.addListener('click', () => {
        infoWindow.setContent(`
            <h1>Hi mate</h1>
            <hr>
            <p>Welcome to İstanbul!</p>
          `)
        infoWindow.open(map, istanbulMark);
    });

    const ankaraMark = new google.maps.Marker({
        position: new google.maps.LatLng(39.9162, 32.8437),
        map: map,
        label: 'A'
    });

    ankaraMark.addListener('click', () => {
        infoWindow.setContent(`
            <h1>Hi mate</h1>
            <hr>
            <p>Welcome to Ankara!</p>
          `)
        infoWindow.open(map, ankaraMark);
    });
}

google.maps.event.addDomListener(window, 'load', init);
          html, body, #map {
      height: 100%;
      margin: 0px;
      padding: 0px
  }
         <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true">
  </script>
</head>
<body>
  <div id="map"></div>
</body>
</html>

Источник

Я заметил некоторые проблемы с другими ответами.

Ответ Маркуса Роммеля и Славеквина:

При нажатии на маркер событие клика по карте запускается впоследствии. Поэтому, когда маркер click открывает окно, распространение события click на карту немедленно закрывает окно снова.

Ответ пользователя 1724001:

Создание слушателя при каждом нажатии на маркер также не очень хорошая идея. Это загрязняет память.

Поэтому я просто хочу добавить дополнительную информацию к первым ответам, чтобы остановить распространение событий на карту. Окна будут закрыты только в том случае, если не нажата ни одна отметка.

marker.addListener("click", function(event) {
    // open your window here
    event.stopPropagation(); // this prevents propagation of marker click to map click
});

map.addListener("click", function() {
    // close your window
});
Источник

Другое решение, которое работает для меня: создайте массив информационных окон и закройте каждое активное окно при нажатии на другое окно:

      marker.addListener('click', () => {
this.mapInfoWindows.forEach(element => {
  element.close();
});
infoWindow.open(this.map.googleMap, marker);});
Источник
Другие вопросы по тегам