Google Maps API - info window will not re-open after manually closing

Question

I got the following code that works just fine - Fiddle . It sets up some markers and uses 1 infowindow for them.
But when I change the infowindow content to be a div element by changing this:

infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);

With this:

document.getElementById("info").innerHTML=locations[i][0];    
infowindow.setContent(document.getElementById("info"));
infowindow.open(map, marker);

Something weird happens - infowindow still shows when clicking on markers, UNTIL you decide to close the infowindow by clicking the 'x'. After that the infowindow won't open again when you click on the markers.

Link to the problem fiddle - here . Any idea what is causing this?

Thanks for any help!

Answer 1

Any idea what is causing this?

Yes. By

infowindow.setContent(document.getElementById("info"));

You are moving <div id="info"> into infowindow. That goes well until you close the infowindow, because when you close the infowindow you are also removing <div id="info"> from the DOM! And after that,

document.getElementById("info").innerHTML=locations[i][0]; 

will raise an execption because <div id="info"> no longer exists :

Uncaught TypeError: Cannot set property 'innerHTML' of null

You should really find another approach. I would remove <div id="info"></div> from the HTML and use this code instead :

var content='<div id="info">'+locations[i][0]+'</div>';
infowindow.setContent(content);
infowindow.open(map, marker);

see forked fiddle -> http://jsfiddle.net/E2CxC/