Google Maps API v3에서 하나의 InfoWindow 만 열어 둡니다.

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 문에서해야 할 일은 현재 마커와 관련된 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 메서드를 호출해야 합니다 .

N.B It is not necessary to call close on the shared info window object, calling open with a different marker will automatically close the original. See Daniel's answer for details.

---

Basically you want one function that keeps reference to one new InfoBox() => delegate the onclick event. While creating your markers (in a loop) use 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 is assigned asynchronously and kept in memory. Every time you call bindInfoBox() the return function will be called instead. Also handy to pass the infoBoxOptions only once!

In my example I've had to add an extra param to the map as my initialization is delayed by tab events.

InfoBoxOptions

---

Here is a solution that doesn't need to create only one infoWindow to reuse it. You can continue creating many infoWindows, the only thing you need is to build a closeAllInfoWindows function, and call it before open a new infowindow. So, keeping your code, you just need to:

1. Create a global array to store all the infoWindows

   var infoWindows = [];
   

2. Store each new infoWindow in the array, just after the infoWindow = new...

   infoWindows.push(infoWindow);
   

3. Create the closeAllInfoWindows function

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

4. In your code, call to closeAllInfoWindows() just before open the infoWindow.

Regards,

---

Solved it this way:

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 Maps allows you to only have one info window open. So if you open a new window, then the other one closes automatically.

참고URL : https://stackoverflow.com/questions/1875596/have-just-one-infowindow-open-in-google-maps-api-v3