[javascript] Google지도 : InfoWindows를 자동으로 닫으시겠습니까?

Program / 글쓴이

내 사이트 에서 Google Maps API v3를 사용하여지도에 집 마커를 배치하고 있습니다.

닫기 아이콘을 명시 적으로 클릭하지 않는 한 InfoWindows는 열려 있습니다. 즉,지도 표시 위로 마우스를 가져 가면 한 번에 2 개 이상의 InfoWindows를 열 수 있습니다.

질문 : 현재 활성화 된 InfoWindow 만 열리고 다른 모든 InfoWindows는 닫히도록하려면 어떻게해야합니까? 한 번에 하나 이상의 InfoWindow가 열리지 않습니까?

답변

가 close ()를 정보창을위한 기능. 마지막으로 열린 창을 추적하고 새 창이 생성되면 닫기 기능을 호출하십시오.

이 데모 에는 원하는 기능이 있습니다. Maps API V3 데모 갤러리 에서 찾았습니다 .

답변

많은 정보 창을 사용하여 이에 대한 대체 솔루션 : 이전에 열린 정보 창을 변수에 저장 한 다음 새 창이 열리면 닫습니다.

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

이렇게하면 정보 창을 클릭 한 각 마커로 “이동”하여 사실상 자동으로 닫혔다가 새 위치에서 다시 열립니다 (및 뷰포트에 맞게 패닝). 원하는 효과를 내기 위해 열기 전에 내용을 변경합니다. n 마커에 대해 작동합니다.

답변

내 솔루션.

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

답변

이 링크에서 http://www.svennerberg.com/2009/09/google-maps-api-3-infowindows/ :

Teo :이 작업을 수행하는 가장 쉬운 방법은 반복해서 재사용하는 InfoWindow 개체의 인스턴스를 하나만 갖는 것입니다. 이렇게하면 새 마커를 클릭하면 infoWindow가 현재있는 위치에서 새 마커를 가리 키도록 “이동”됩니다.

setContent 메소드를 사용하여 올바른 컨텐츠로로드하십시오.

답변

활성 창에 대한 변수 선언

var activeInfoWindow;

이 코드를 마커 리스너에 바인딩합니다.

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

답변

close () 함수를 사용하는 것 외에 더 쉬운 방법이 있습니다. 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);
    });
}