Question

I’m trying to use Google Maps’s InfoWindow with DOM nodes and preserve the nodes between InfoWindow swaps without having to create an explicit content store outside of the DOM. Unfortunately, when an InfoWindow’s content is changed the previous content seems to be destroyed, this is unfortunate as it makes it impossible to switch back to the previous node. To make matters worse, it appears that the InfoWindow’s content_changed event has no reference to the previous content, as the MVC events have no event args. Furthermore, as mentioned here, referencing the content property within the function references only the current value, and not the previous value, thus it would seem the previous value is gone for all tense and purposes.

For example, say you wanted to do this, assume we already have a map, and LatLng in myLatLng, myLatLng2. Note the only reference to shortlived node was added to the dom.

document.body.appendChild(document.createElement('div')).id = 'shortlived';
document.getElementById('shortlived').innerHTML = 'I will pass soon...';

var infowindow = new google.maps.InfoWindow();
var marker1 = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title:"Marker1"
});
var marker2 = new google.maps.Marker({
    position: myLatlng2,
    map: map,
    title:"Marker2"
});

google.maps.event.addListener(marker1, 'click', function() {
  infoWindow.setContent(document.getElementById('shortlived'));
  infowindow.open(map, marker1);
});
google.maps.event.addListener(marker2, 'click', function() {
  infoWindow.setContent('Some Text');
  infowindow.open(map, marker2);
});

You’ll notice that if you click on marker1 you see the shortlived node, then if you click on marker2 it goes away, but when you click marker1 again, you won’t get shortlived, you may get ‘Some Text’ or you may get nothing, but in either case, shortlived is gone. In my case I would like to ideally do the following:

google.maps.event.addListener(infoWindow, 'content_changed' function(e){
    //where e.content is the previous content
    document.body.appendChild(e.content)
}

or

google.maps.event.addListener(infoWindow, 'content_changed' function(e){
    //No such thing exists
    document.body.appendChild(infoWindow.previousContent)
}

This doesn’t seem like it’s possible out of the box, any ideas? Again, I would like to avoid creating an independent store to keep a separate reference to the DOM nodes, other than the reference already in the DOM. I’m hoping there’s something I’m missing.

Thanks in advance.

Answer 1

I’m not 100% sure it meets your use-case, but how about attaching the DOM reference to the marker itself? This should work well if you only have one DOM node per marker, and it means you can simplify your click handler code (not a big gain for two markers, but pretty handy for 20). This works for me:

document.body.appendChild(document.createElement('div')).id = 'longlived';
document.getElementById('longlived').innerHTML = 'I will stick around!';

var infowindow = new google.maps.InfoWindow();
var marker1 = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title:"Marker1"
});
// attach the DOM node to the marker instance
// marker1.iwcontent = myNode also works, but this follows the API
marker1.set('iwcontent', document.getElementById('longlived'));

var marker2 = new google.maps.Marker({
    position: myLatlng2,
    map: map,
    title:"Marker2"
});
// attach alternate content to this marker
marker2.set('iwcontent', "Some Text");

// create a click handler that will work for both markers
// a more robust option might check for the existence of iwcontent first
var openContentWindow = function() {
  var marker = this;
  // set the content to whatever's attached to the marker
  infowindow.setContent(marker.get('iwcontent'));
  infowindow.open(map, marker);
}

// attach your handler to your markers
google.maps.event.addListener(marker1, 'click', openContentWindow);
google.maps.event.addListener(marker2, 'click', openContentWindow);

Note that, while the DOM node persists between marker clicks, it’s been removed from the actual page. I can’t tell whether this is what you want or not, but if you’d like to have the DOM node available after the info window changes, it looks like you can access the marker via the anchor attribute on the info window:

google.maps.event.addListener(infowindow, 'content_changed', function(){
    // I don't see this in the documented API, but it seems to reference
    // the *previous* anchor, the one you're interested in
    var marker = this.anchor; 
    // there are better tests for whether a var is a DOM node
    if (marker && marker.get('iwcontent').nodeType) {
        // do something with the DOM node here
    }
});

If you were worried about using an undocumented API attribute, you could use the same technique as above to set a reference to the old anchor on the info window and then retrieve it when the content changes – but it seems unnecessary.