Mehrere Google Maps InfoWindows mit zurückgestelltem Inhalt

Question

Ich habe Probleme mit dem Inhalt mehrerer Google Maps (JS API v3) InfoWindows, die nacheinander an mehrere Markierungen angehängt werden.

Das Problem scheint mit der Tatsache verbunden zu sein, dass ich die Öffnung eines InfoWindow bis zu dem Moment hinauszögere, wenn ich fertig bin, seinen Inhalt vom Server zurückzuholen, der ihn schließlich bevölkern wird.

Das Ergebnis ist, dass beim Schließen dieses InfoWindow und erneutes Öffnen, es so oft neu gezeichnet wird, wie ich auf seinen Marker geklickt habe.

Ein Beispiel, bevor Sie den Code zeigt:

einmal GMaps korrekt initialisiert und die Markierungen gesetzt sind, ich auf einem von ihnen klicken und die dazugehörige Infofenster erscheint.

Dann schließe ich es.

Ich klicke auf den gleichen Marker und zwei überlappende InfoWindows erscheinen (oder vielleicht ist es eine, aber zweimal geöffnet).

Dann schließe ich es (und die angeblich zwei InfoWindows schließen).

Und so weiter und so fort.

Hier ist der Code:

var pins = { 
    list: [], // where the markers objects are stored. 
    window: new google.maps.InfoWindow({ 
       content: "Loading..." // promised content 
      }), 
    draw: function(coords, content_id, timeout) { 
       setTimeout(function() { 
        pins.list.push(new google.maps.Marker({ 
         position: coords, 
         map: map, // initialized elsewhere 
         title: content_id 
        }); 
       }); 
      }, 
    drop: function(array_of_pins) { // array of objects, each one containing 
            // "coords" and "content_id" respectively 
            // of the marker and the InfoWindow. 
       var timeout = 100; 

       for (i in pins.list) // Loop added to solve the problem 
        google.maps.event.clearListeners(pins.list[i], "click"); 

       for (i in array_of_pins) 
        pins.draw(array_of_pins[i].coords, 
           array_of_pins[i].content_id, 
           i * timeout); 

       setTimeout(function() { 
        for (i in pins.list) 
         google.maps.event.addListener(
          pins.list[i], 
          "click", 
          function() { 
           pins.content(this, this.title); 
          } 
         ); 
       }, array_of_pins.length * timeout); 
      }, 
    content: function(marker, content_id) { 
       deferredContentFunction(content_id) 
         .done(function(data) { 
          var content = '<p>'+data.content+'</p>'; 
          pins.window.setContent(content); 
          pins.window.open(map, marker); 
         }) 
         .fail(function() { 
          // error handling 
         }); 
      } 
}; 

ich den Hinweis vermute (durch this) an dem zugehörigen Marker in der pins.drop() Funktion ist an einem gewissen Punkt verloren, was wiederum das Problem verursacht.

Answer 1

Sie fügen den Klick-Listener mehrmals zur Marke hinzu (einmal bei jedem Aufruf von drop auf dem Array von Pins).

Eine Möglichkeit ist es, die Zuhörer zu löschen, bevor sie wieder hinzufügen:

for (i in pins.list) 
    google.maps.event.clearListeners(pins.list[i], "click"); 
    google.maps.event.addListener(
    pins.list[i], 
    "click", 
    function() { 
     pins.content(this, this.title); 
    } 
);