Google Maps infowindow.setContent as a DOM element with jQuery seems only works once?

Question

I'm getting very frustrated and I'm hoping someone here can help. I have a maps app where there are several markers on the maps with infoWindows whose content updates regularly. My solution has been to place the divs that will go into the infoWindow in the DOM in a hidden container that can be updated by my updater code in the background. Then I use a single infoWindow and just set the content to the DOM element using query:

google.maps.event.addListener(marker, 'click', function(){
     infoWindow.setContent($(#"+id+"-window-content)[0]);
     infoWindow.open(map, marker);
}

The thing works great... once. Then it won't open again for that maker. I have noticed that if I open the window on one marker (Marker A), and then close it, and then open it on another maker (Marker B), and then go back to the Marker A, the window will appear beside Marker A, but with Marker B's content.

Why won't my script set the content to the DOM element a second time... It's almost like using the jQuery selector is deleting the element from the DOM.

Cheers,

whiteatom

---

Hello again,

Turns out I may have answered my own question when I was trying to explain it here.

Passing a DOM element to the setContent() function seems to actually remove it from the DOM and put it in the infoWindow, so the next time I try and grab it, it's no longer there. My fix was to add a clone() to the jQuery call and it seems to work now.

google.maps.event.addListener(marker, 'click', function(){
     infoWindow.setContent($(#"+id+"-window-content).clone()[0]);
     infoWindow.open(map, marker);
}

Can anyone confirm this is the behaviour of the setContent when a DOM element is passed to it? is this the best way to handle this?

Cheers,

whiteatom

Solution 1

When you change an element's parent in the DOM, the element is moved, not copied.

So I would assume this line...

infoWindow.setContent($(#"+id+"-window-content)[0]);

Would remove the element "#id-window-content" from its original emplacement.

When the infoWindow is closed, the DOM element in it is discarded.

So when you click a second time a marker, the element doesn't exist anymore.

Try to clone the element or supply an HTML string to the infoWindow.

Hope this helps

Solution 2

It actually got more complicated because I had tabs (with jQuery Tools) in the infoWindows and a clone (even with deep copy of events and data - clone(true, true)) didn't seem to want to carry them over... the tabs were dead in the infoWindow.

So.. I am moving the div as I was originally and then moving it back back before I add the new infoWindow content:

google.maps.event.addListener(marker, 'click', function(){
     infoWindow.close();
     if(typeof infoWindow.content == "object")
         $("#info-window-container").append(infoWindow.getContent());
     infoWindow.setContent($(#"+id+"-window-content)[0]);
     infoWindow.open(map, marker);
}

I think this also has the advantage of allowing my updater script to just update the #"+id+"-window-content div and it will even update the infoWindow while open :)

Thanks for your help...

Comments

[whiteatom]

yes :) this is exactly what I was seeing. I'm cloning now. Thanks!

[Mike Gleason jr Couturier]

I'm glad you got it fixed! Happy mapping :)

[Mike Gleason jr Couturier]

Thanks for sharing the final solution based on my answer!

[lulalala]

Wow thanks, I didn't expect that getContent() call after the infoWindow.close() would work. I was expecting things get cleared off the DOM after close(). But apparently it works!

[whiteatom]

Yes.. the infoWindow holds its content until you destroy it or set new content - figured that one out with trial and error.