I have been making google map mashups since 2007. In that time I’ve seen the Google Maps API change for the better. I have a few projects that are using version 2 of the API. I knew Google was deprecating support for this older API and it was time to upgrade. Most of my maps contain many markers each with their own InfoWindow. The first change I noticed transitioning to v3 is that multiple InfoWindows can stay open at the same time. Using my old v2 code caused a problem. If someone clicked on a marker, I wanted the old InfoWindow to automatically close.
My mashups contain large sets of markers so I needed some way to cleanly make this happen. What I didn’t want to do was loop through every single marker (to close them all programmatically) each time a user clicked a new marker. I found some code that does just this. Take a look at CodeFx, here is their solution that I used.
infos = [];
function
closeInfos(){
if
(infos.length > 0){
/* detach the info-window from the marker */
infos[0].set(
"marker"
,
null
);
/* and close it */
infos[0].close();
/* blank the array */
infos.length = 0;
}
}
var
title =
'This is the text for the markers tooltip on mouseover.'
;
var
html =
'<div>This HTML will be attached to the marker.</div>'
;
var
marker =
new
google.maps.Marker({
title:title,
content:html,
map:map,
draggable:
false
,
position:point
});
google.maps.event.addListener(marker,
'click'
,
function
() {
/* close the previous info-window */
closeInfos();
/* the marker's content gets attached to the info-window: */
var
info =
new
google.maps.InfoWindow({content:
this
.content});
/* trigger the infobox's open function */
info.open(map,
this
);
/* keep the handle, in order to close it on next click event */
infos[0]=info;
});