Google Maps API v3에서 InfoWindow를 하나만 엽니 다.

내 Google지도에서 하나의 InfoWindow 만 열면됩니다. 새 InfoWindows를 열기 전에 다른 모든 InfoWindows를 닫아야합니다.

누군가이 작업을 수행하는 방법을 보여줄 수 있습니까?

InfoWindow개체를 하나만 만들고 참조를 유지하고 모든 마커에 대해 재사용해야합니다. Google Maps API 문서에서 인용 :

한 번에 하나의 정보 창만 표시하려는 경우 (Google지도의 동작과 같이) 정보 창을 하나만 만들어야합니다.이 창은지도 이벤트 (예 : 사용자 클릭)시 다른 위치 또는 마커에 다시 할당 할 수 있습니다.

따라서 InfoWindow지도를 초기화 한 직후에 객체 를 만들고 click다음과 같이 마커 의 이벤트 핸들러 를 처리 할 수 있습니다. 다음과 같은 마커가 있다고 가정 해 보겠습니다 someMarker.

google.maps.event.addListener(someMarker, 'click', function() {
   infowindow.setContent('Hello World');
   infowindow.open(map, this);
});

그런 다음 메서드 InfoWindow를 호출하지 않고도 새 마커를 클릭하면가 자동으로 닫힙니다 close().

공유 할 수 있도록 범위 밖에서 정보창을 만드세요.

다음은 간단한 예입니다.

var markers = [AnArrayOfMarkers];
var infowindow = new google.maps.InfoWindow();

for (var i = 0, marker; marker = markers[i]; i++) {
  google.maps.event.addListener(marker, 'click', function(e) {
    infowindow.setContent('Marker position: ' + this.getPosition());
    infowindow.open(map, this);
  });
}

나는 똑같은 문제가 있었지만 가장 좋은 대답은 그것을 완전히 해결하지 못했습니다. 아마도 이것은 누군가를 도울 것입니다.

for(var i = 0; i < markers.length; i++){
    name = markers[i].getAttribute("name");
    address = markers[i].getAttribute("address");        
    point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));                                     
    contentString = '<div style="font-family: Lucida Grande, Arial, sans-serif;>'+'<div><b>'+ name +'</b></div>'+'<div>'+ address +'</div>';                    
    marker = new google.maps.Marker({                       
        map: map,
        position: point,
        title: name+" "+address,
        buborek: contentString 
    });                                     
    google.maps.event.addListener(marker, 'click', function(){
        infowindow.setContent(this.buborek); 
        infowindow.open(map,this); 
    });                                                         
    marker.setMap(map);                 
}

조금 늦었지만 infowindow를 전역 변수로 만들어서 하나의 infowindow 만 열었습니다.

var infowindow = new google.maps.InfoWindow({});

그런 다음 listner 내부

infowindow.close();
infowindow = new google.maps.InfoWindow({   
    content: '<h1>'+arrondissement+'</h1>'+ gemeentesFiltered                           
});

infowindow.open(map, this);

글 로바를 선언 var selectedInfoWindow;하고 열린 정보 창을 유지하는 데 사용합니다.

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

// Open the infowindow on marker click
google.maps.event.addListener(marker, "click", function() {
    //Check if there some info window selected and if is opened then close it
    if (selectedInfoWindow != null && selectedInfoWindow.getMap() != null) {
        selectedInfoWindow.close();
        //If the clicked window is the selected window, deselect it and return
        if (selectedInfoWindow == infoWindow) {
            selectedInfoWindow = null;
            return;
        }
    }
    //If arrive here, that mean you should open the new info window 
    //because is different from the selected
    selectedInfoWindow = infoWindow;
    selectedInfoWindow.open(map, marker);
});

새 마커에서 클릭 이벤트를 처리 할 때 이전 InfoWindow 개체를 추적 하고 해당 개체 에서 close 메서드를 호출해야 합니다 .

NB 공유 정보 창 개체에 대해 close를 호출 할 필요가 없습니다. 다른 마커로 open을 호출하면 원본이 자동으로 닫힙니다. 자세한 내용은 Daniel의 답변 을 참조하십시오.

기본적으로 하나에 대한 참조를 유지하는 하나의 함수 new InfoBox()=> onclick 이벤트를 위임합니다. 마커를 만드는 동안 (루프에서) 사용bindInfoBox(xhr, map, marker);

// @param(project): xhr : data for infoBox template
// @param(map): object : google.maps.map
// @param(marker): object : google.maps.marker
bindInfoBox: (function () {
    var options = $.extend({}, cfg.infoBoxOptions, { pixelOffset: new google.maps.Size(-450, -30) }),
        infoBox = new window.InfoBox(options);

    return function (project, map, marker) {
        var tpl = renderTemplate(project, cfg.infoBoxTpl); // similar to Mustache, Handlebars

        google.maps.event.addListener(marker, 'click', function () {
            infoBox.setContent(tpl);
            infoBox.open(map, marker);
        });
    };
}())

var infoBox비동기 적으로 할당되고 메모리에 보관됩니다. bindInfoBox()반환 함수 를 호출 할 때마다 대신 호출됩니다. infoBoxOptions한 번만 통과하는 것도 편리합니다 !

내 예에서는 map초기화가 탭 이벤트에 의해 지연되므로에 매개 변수를 추가해야했습니다 .

InfoBoxOptions

다음은 재사용을 위해 하나의 infoWindow를 생성 할 필요가없는 솔루션입니다. 계속해서 많은 infoWindows를 만들 수 있습니다. 필요한 것은 closeAllInfoWindows 함수를 빌드하고 새 정보창을 열기 전에 호출하는 것입니다. 따라서 코드를 유지하려면 다음을 수행하면됩니다.

1. 모든 infoWindows를 저장할 전역 배열 만들기

   var infoWindows = [];
   

2. infoWindow = new ... 바로 뒤에 배열에 각각의 새 infoWindow를 저장합니다.

   infoWindows.push(infoWindow);
   

3. closeAllInfoWindows 함수 만들기

   function closeAllInfoWindows() {
       for (var i=0;i<infoWindows.length;i++) {
           infoWindows[i].close();
       }
   }
   

4. 코드에서 infoWindow를 열기 직전에 closeAllInfoWindows ()를 호출합니다.

문안 인사,

이 방법으로 해결했습니다.

function window(content){
    google.maps.event.addListener(marker,'click', (function(){
        infowindow.close();
        infowindow = new google.maps.InfoWindow({
            content: content
        });
        infowindow.open(map, this);
    }))
}
window(contentHtml);

Google지도에서는 ​​정보 창을 하나만 열 수 있습니다. 따라서 새 창을 열면 다른 창은 자동으로 닫힙니다.