web-dev-qa-db-ja.com

Google Maps API v3でInfoWindowを1つだけ開いてください

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

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

javascriptgoogle-mapsgoogle-maps-api-3
85
leo

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

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

150
Daniel Vassallo

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

以下に簡単な例を示します。

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

私は同じ問題を抱えていましたが、最良の答えはそれを完全には解決しませんでした。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);                 
}
12
Ferenc Takacs

少し遅れましたが、maken infowindowをグローバル変数にすることで情報ウィンドウを1つだけ開くことができました。

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

その後、listner内

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

infowindow.open(map, this);
4
user2827958

グロバーを宣言する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);
});
4
IgniteCoders

基本的には、1つのnew InfoBox()への参照を保持する1つの関数が必要です。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

0
Tim Vermaelen

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

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

0
RedBlueThing

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

  1. すべての情報ウィンドウを保存するグローバル配列を作成します

    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（）を呼び出します。

よろしく、

0
Jortx