Google Maps: Auto- perto InfoWindows aberta?
-
19-09-2019 - |
Pergunta
No meu site , estou usando o Google Maps API v3 aos marcadores lugar da casa no mapa.
Os InfoWindows permanecer aberto a menos que você clique explicitamente o ícone perto. Ou seja, você pode ter 2 + InfoWindows abrir em um momento, se você passar o mouse sobre o marcador do mapa.
Pergunta ??strong>: Como posso fazer isso para que apenas o atual InfoWindow ativo é aberto e todos os outros InfoWindows estão fechados? Ou seja, não mais do que 1 InfoWindow será aberto ao mesmo tempo?
Solução
Há um close () função para InfoWindows. Basta manter um registo da última janela aberta, e chamar a função próximo nele quando uma nova janela é criada.
Esta demonstração tem a funcionalidade que você está procurando. Eu encontrei-o no Maps API V3 demonstração galeria .
Outras dicas
solução alternativa para este com o uso de muitas janelas de informações: save prev abriu infowindow em uma variável e, em seguida, fechá-lo quando nova janela aberta ??p>
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);
});
}
//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
}
);
Isto irá "mover" a janela de informações em torno de cada marcador clicado, com efeito fechando-se, em seguida, reabrir (e visão panorâmica para caber no visor) em sua nova localização. Ele altera o seu conteúdo antes de abrir para se obter o efeito desejado. Obras para N marcadores.
A minha solução.
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);
});
A partir desta ligação http: //www.svennerberg. com / 2009/09 / google-maps 3 janelas de informações-api-/ :
Teo: A maneira mais fácil de fazer isso é só tem uma instância do InfoWindow objeto que você reutilizar mais e outra vez. Dessa forma, quando você clique em um novo marcador da janela de informações é “Movida” de onde é atualmente em, para apontar para o novo marcador.
Use seu método setContent para carregá-lo com o conteúdo correto.
Há uma maneira mais fácil, além de usar a função close (). se você criar uma variável com a propriedade InfoWindow ele fecha automaticamente quando você abrir outra.
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);
});
}
Declare uma variável para a janela ativa
var activeInfoWindow;
e ligam-se este código no marcador ouvinte
marker.addListener('click', function () {
if (activeInfoWindow) { activeInfoWindow.close();}
infowindow.open(map, marker);
activeInfoWindow = infowindow;
});
Que tal -
google.maps.event.addListener(yourMarker, 'mouseover', function () {
yourInfoWindow.open(yourMap, yourMarker);
});
google.maps.event.addListener(yourMarker, 'mouseout', function () {
yourInfoWindow.open(yourMap, yourMarker);
});
Depois, é só passar o mouse sobre ele e ele irá fechar-se.
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();
};
...
}
}
I armazenada uma variável na parte superior para manter o controle de qual janela de informações é aberta no momento, veja abaixo.
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;
});
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);
}));