Google Maps APIv3で開いているInfoWindowを1つだけにします

Question 1

Googleマップで開く必要があるインフォウィンドウは1つだけです。新しいInfoWindowsを開く前に、他のすべてのInfoWindowsを閉じる必要があります。

誰かがこれを行う方法を教えてもらえますか？

Question 2

InfoWindowオブジェクトを1つだけ作成し、そのオブジェクトへの参照を保持し、すべてのマーカーに再利用する必要があります。Google Maps APIドキュメントからの引用：

（Googleマップでの動作のように）一度に1つの情報ウィンドウのみを表示する場合は、1つの情報ウィンドウを作成するだけで済み、マップイベント（ユーザーのクリックなど）時に別の場所またはマーカーに再割り当てできます。

したがって、InfoWindowマップを初期化した直後にオブジェクトを作成し、clickマーカーのイベントハンドラーを次のように処理することをお勧めします。あなたがというマーカーを持っているとしましょうsomeMarker：

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

次に、メソッドInfoWindowを呼び出さなくても、新しいマーカーをクリックすると、が自動的に閉じますclose()。

Question 3

スコープ外に情報ウィンドウを作成して、共有できるようにします。

簡単な例を次に示します。

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

Question 4

私は同じ問題を抱えていましたが、最良の答えはそれを完全には解決しませんでした。私がforステートメントでしなければならなかったことは、現在のマーカーに関連するこれを使用することでした。多分これは誰かを助けます。

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

Question 5

少し遅れましたが、makeninfowindowによってグローバル変数を開くことができたinfowindowは1つだけでした。

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

その後、リスナーの内部

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

infowindow.open(map, this);

Question 6

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

Question 7

~~新しいマーカーでクリックイベントを処理するとき~~は、以前のインフォウィンドウオブジェクトを追跡し、そのオブジェクトで~~closeメソッドを呼び出す必要があります~~。

注意：共有情報ウィンドウオブジェクトでcloseを呼び出す必要はありません。別のマーカーでopenを呼び出すと、元のオブジェクトが自動的に閉じられます。詳細については、ダニエルの回答を参照してください。

Question 8

基本的に、1つの関数への参照を保持する1つの関数が必要です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()、代わりにreturn関数が呼び出されます。infoBoxOptions一度だけ合格するのにも重宝します！

私の例でmapは、タブイベントによって初期化が遅れるため、にパラメータを追加する必要がありました。

InfoBoxOptions

Question 9

これは、再利用するために1つのinfoWindowだけを作成する必要がないソリューションです。多くのinfoWindowsを作成し続けることができます。必要なのは、closeAllInfoWindows関数を作成し、新しいinfowindowを開く前にそれを呼び出すことだけです。したがって、コードを保持するには、次のことを行う必要があります。

すべてのinfoWindowsを格納するグローバル配列を作成します
```
var infoWindows = [];
```
infoWindow = new ..の直後に、新しい各infoWindowを配列に格納します。
```
infoWindows.push(infoWindow);
```

closeAllInfoWindows関数を作成します

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

コードで、infoWindowを開く直前にcloseAllInfoWindows（）を呼び出します。

よろしく、

Question 10

このように解決しました：

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

Question 11

Googleマップでは、1つの情報ウィンドウのみを開くことができます。したがって、新しいウィンドウを開くと、もう一方のウィンドウは自動的に閉じます。