Google Maps: Tutup otomatis buka InfoWindows?

Di situs saya , saya menggunakan Google Maps API v3 untuk menempatkan penanda rumah di peta.

InfoWindows tetap terbuka kecuali Anda secara eksplisit mengklik ikon tutup. Artinya, Anda dapat membuka 2+ InfoWindows dalam satu waktu jika Anda mengarahkan kursor ke penanda peta.

Pertanyaan : Bagaimana cara membuatnya sehingga hanya InfoWindow aktif saat ini yang terbuka dan semua InfoWindows lainnya ditutup? Artinya, tidak lebih dari 1 InfoWindow akan dibuka dalam satu waktu?

Ada fungsi close () untuk InfoWindows. Catat saja jendela yang terakhir dibuka, dan panggil fungsi tutup di atasnya saat jendela baru dibuat.

Demo ini memiliki fungsionalitas yang Anda cari. Saya menemukannya di galeri demo Maps API V3 .

solusi alternatif untuk ini dengan menggunakan banyak infowindows: simpan prev membuka jendela infow dalam sebuah variabel dan kemudian tutup ketika jendela baru dibuka

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
    }
);

Ini akan "memindahkan" jendela info ke setiap penanda yang diklik, pada dasarnya menutup sendiri, lalu membuka kembali (dan menggeser agar sesuai dengan area pandang) di lokasi barunya. Ini mengubah isinya sebelum dibuka untuk memberikan efek yang diinginkan. Bekerja untuk penanda n.

Solusi saya.

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);
});

Dari tautan ini http://www.svennerberg.com/2009/09/google-maps-api-3-infowindows/ :

Teo: Cara termudah untuk melakukannya adalah dengan hanya memiliki satu objek InfoWindow yang Anda gunakan berulang kali. Dengan begitu, saat Anda mengklik penanda baru, infoWindow "dipindahkan" dari tempatnya saat ini, untuk menunjuk ke penanda baru.

Gunakan metode setContent untuk memuatnya dengan konten yang benar.

Deklarasikan variabel untuk jendela aktif

var activeInfoWindow; 

dan ikat kode ini di pemroses penanda

 marker.addListener('click', function () {
    if (activeInfoWindow) { activeInfoWindow.close();}
    infowindow.open(map, marker);
    activeInfoWindow = infowindow;
});

Ada cara yang lebih mudah selain menggunakan fungsi close (). jika Anda membuat variabel dengan properti InfoWindow, ia menutup secara otomatis saat Anda membuka yang lain.

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);
    });
}

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();
        };
        ...
    }
}

Bagaimana tentang -

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

    });

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

    });

Kemudian Anda bisa mengarahkan kursor ke atasnya dan itu akan menutup sendiri.

Saya menyimpan variabel di bagian atas untuk melacak jendela info mana yang saat ini terbuka, lihat di bawah.

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;  
}); 

Inilah yang saya gunakan jika Anda menggunakan banyak penanda dalam perulangan for (Django di sini). Anda dapat menyetel indeks pada setiap penanda dan menyetel indeks itu setiap kali Anda membuka jendela. Menutup indeks yang disimpan sebelumnya:

markers = Array();
infoWindows = Array();
var prev_infowindow =false;
{% for obj in objects %}
var contentString = 'your content'
var infowindow = new google.maps.InfoWindow({
            content: contentString,
          });
var marker = new google.maps.Marker({
               position: {lat: {{ obj.lat }}, lng: {{ obj.lon }}},
               map: map,
               title: '{{ obj.name }}',
               infoWindowIndex : {{ forloop.counter0 }}
          });
google.maps.event.addListener(marker, 'click',
            function(event)
            {
           if( prev_infowindow ) {
               infoWindows[prev_infowindow].close();
                }
                prev_infowindow = this.infoWindowIndex;
                infoWindows[this.infoWindowIndex].open(map, this);
            }
        );

        infoWindows.push(infowindow);
        markers.push(marker);

      {% endfor %}

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);
}));