Как я могу закрыть информационное окно с помощью API Карт Google, щелкнув маркер "что-то еще"?

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

Но как мне это сделать?

Мой код:

var map = new google.maps.Map(document.getElementById('map'), options);

addMarker({
  coords: { lat: 62.791711, lng: 22.808479 },
  content: 'test 1'
});
addMarker({
  coords: { lat: 65.799962, lng: 24.497773 },
  content: 'test 2'
});
addMarker({
  coords: { lat: 62.331629, lng: 22.890667 },
  content: 'test 3'
});

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

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

    marker.addListener('click', function() {
      infoWindow.open(map, marker);
    });
  }
}

Взгляните на этот вопрос.

Iavor 02.04.2018 17:38
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
2 873
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы можете использовать глобальную переменную для infoWindow и проверить, назначена ли она уже открытой. Если это правда, закройте и откройте еще один:

var map = new google.maps.Map(document.getElementById('map'), options);
var actInfoWindow;

addMarker({
    coords:{lat:62.791711, lng:22.808479},
    content:'test 1'
});
addMarker({coords:{lat:65.799962, lng:24.497773},
     content:'test 2'
}),
    addMarker({coords:{lat:62.331629, lng:22.890667},
    content:'test 3'
});

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

    if (props.content){
        actInfoWindow = new google.maps.InfoWindow({
        content:props.content,
    });

    marker.addListener('click', function(){
        var tempMap = actInfoWindow.getMap();
        if (tempMap !== null && typeof tempMap !== "undefined") {
          actInfoWindow.close();
        }
        actInfoWindow = infoWindow.open(map, marker);
    });
  }
Ответ принят как подходящий

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

var infoWindow;

Затем в своей функции инициализации (initMap) создайте информационное окно:

infoWindow = new google.maps.InfoWindow();

Измените функцию addMarker на следующее:

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

  if (props.content) {
    marker.addListener('click', function() {
      infoWindow.setContent(props.content);
      infoWindow.open(map, marker);
    });
  }
}

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

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

Вот JSBin с рабочим примером.

Большое спасибо! Это решило мою проблему!

allu 02.04.2018 18:20

Пожалуйста! Рад помочь :-)

Iavor 02.04.2018 18:21

Другие вопросы по теме