Карты Google: автоматическое закрытие InfoWindows?

Question

On my site, я использую API Карт Google v3 для размещения маркеров дома на карте.

InfoWindows остается открытым, если вы явно не щелкните значок закрытия. Смысл, вы можете открыть 2+ InfoWindows за один раз, если вы наведите указатель мыши на маркер карты.

Вопрос: Как сделать так, чтобы только текущий активный InfoWindow был открыт и все другие InfoWindows были закрыты? Значит, не более 1 InfoWindow будет открыто одновременно?

Answer 1

Для InfoWindows предусмотрена функция close(). Просто отследите последнее открытое окно и вызовите функцию закрытия на нем при создании нового окна.

This demo имеет функциональность, которую вы ищете. Я нашел его в Maps API V3 demo gallery.

Answer 2

С этой ссылке http://www.svennerberg.com/2009/09/google-maps-api-3-infowindows/:

Teo: Самый простой способ сделать это состоит в есть только один экземпляр объекта InfoWindow, что вы повторно использовать над и снова. Таким образом, когда вы щелкните по новому маркеру infoWindow, «переместился» с того места, где он сейчас находится, , чтобы указать на новый маркер.

Используйте его метод setContent для его загрузки с правильным контентом.

Answer 3

//assuming you have a map called 'map' 
var infowindow = new google.maps.InfoWindow(); 

var latlng1 = new google.maps.LatLng(0,0); 
var marker1 = new google.maps.Marker({position:latlng1, map:map}); 
google.maps.event.addListener(marker1, 'click', 
    function(){ 
     infowindow.close();//hide the infowindow 
     infowindow.setContent('Marker #1');//update the content for this marker 
     infowindow.open(map, marker1);//"move" the info window to the clicked marker and open it 
    } 
); 
var latlng2 = new google.maps.LatLng(10,10); 
var marker2 = new google.maps.Marker({position:latlng2, map:map}); 
google.maps.event.addListener(marker2, 'click', 
    function(){ 
     infowindow.close();//hide the infowindow 
     infowindow.setContent('Marker #2');//update the content for this marker 
     infowindow.open(map, marker2);//"move" the info window to the clicked marker and open it 
    } 
); 

Это будет «двигаться» информационное окно вокруг каждое нажатие маркеров, в силе закрытия себя, а затем повторное открытие (и панорамирование, чтобы соответствовать видовому экрану) в своем новом месте. Он меняет свое содержимое перед открытием, чтобы дать желаемый эффект. Работает для n маркеров.

Answer 4

var map; 
var infowindow; 
... 
function createMarker(...) { 
    var marker = new google.maps.Marker({...}); 
    google.maps.event.addListener(marker, 'click', function() { 
     ... 
     if (infowindow) { 
      infowindow.close(); 
     }; 
     infowindow = new google.maps.InfoWindow({ 
      content: contentString, 
      maxWidth: 300 
     }); 
     infowindow.open(map, marker); 
    } 
... 
function initialize() { 
    ... 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    ... 
    google.maps.event.addListener(map, 'click', function(event) { 
     if (infowindow) { 
      infowindow.close(); 
     }; 
     ... 
    } 
} 

Answer 5

альтернативное решение для этого с помощью многих infowindows: сохранить пред открытой InfoWindow в переменной, а затем закрыть его, когда новое окно открыто

var prev_infowindow =false; 
... 
base.attachInfo = function(marker, i){ 
    var infowindow = new google.maps.InfoWindow({ 
     content: 'yourmarkerinfocontent' 
    }); 

    google.maps.event.addListener(marker, 'click', function(){ 
     if(prev_infowindow) { 
      prev_infowindow.close(); 
     } 

     prev_infowindow = infowindow; 
     infowindow.open(base.map, marker); 
    }); 
} 

Answer 6

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

var info_window; 
var map; 
var chicago = new google.maps.LatLng(33.84659, -84.35686); 

function initialize() { 
    var mapOptions = { 
     center: chicago, 
     zoom: 14, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 

    info_window = new google.maps.InfoWindow({ 
     content: 'loading' 
    )}; 

createLocationOnMap('Location Name 1', new google.maps.LatLng(33.84659, -84.35686), '<p><strong>Location Name 1</strong><br/>Address 1</p>'); 
createLocationOnMap('Location Name 2', new google.maps.LatLng(33.84625, -84.36212), '<p><strong>Location Name 1</strong><br/>Address 2</p>'); 

} 

function createLocationOnMap(titulo, posicao, conteudo) {    
    var m = new google.maps.Marker({ 
     map: map, 
     animation: google.maps.Animation.DROP, 
     title: titulo, 
     position: posicao, 
     html: conteudo 
    });    

    google.maps.event.addListener(m, 'click', function() {     
     info_window.setContent(this.html); 
     info_window.open(map, this); 
    }); 
} 

Answer 7

Как насчет -

google.maps.event.addListener(yourMarker, 'mouseover', function() { 
     yourInfoWindow.open(yourMap, yourMarker); 

    }); 

google.maps.event.addListener(yourMarker, 'mouseout', function() { 
     yourInfoWindow.open(yourMap, yourMarker); 

    }); 

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

Answer 8

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

var currentInfoWin = null; 
google.maps.event.addListener(markers[counter], 'click', function() {  
    if (currentInfoWin !== null) { 
     currentInfoWin.close(map, this); 
    } 
    this.infoWin.open(map, this); 
    currentInfoWin = this.infoWin; 
}); 

Answer 9

Мое решение.

var map; 
var infowindow = new google.maps.InfoWindow(); 
... 
function createMarker(...) { 
var marker = new google.maps.Marker({ 
    ..., 
    descrip: infowindowHtmlContent 
}); 
google.maps.event.addListener(marker, 'click', function() { 
    infowindow.setOptions({ 
     content: this.descrip, 
     maxWidth:300 
    }); 
    infowindow.open(map, marker); 
} 

Answer 10

var contentString = "Location: " + results[1].formatted_address;  
google.maps.event.addListener(marker,'click', (function(){ 
    infowindow.close(); 
    infowindow = new google.maps.InfoWindow({ 
     content: contentString 
    }); 
    infowindow.open(map, marker); 
})); 

Answer 11

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

Майк, если мы нажмем на текущий маркер открытия, мы больше не можем открывать этот маркер до тех пор, пока не будет нажата другая кнопка. Добавьте это в ответ:

if(previousMarker != ib) 
    previousMarker = ib; 
else 
    previousMarker = null; 

так что мы имеем:

var prev_infowindow =false; 

...

base.attachInfo = function(marker, i){ 
    var infowindow = new google.maps.InfoWindow({ 
     content: 'yourmarkerinfocontent' 
    }); 

    google.maps.event.addListener(marker, 'click', function(){ 
     if(prev_infowindow) { 
      prev_infowindow.close(); 
     } 

     if(previousMarker != infowindow) 
      previousMarker = infowindow ; 
     else 
      previousMarker = null; 

     infowindow.open(base.map, marker); 
    }); 
}