Google Maps API infobox - click one infobox and close the others - google-maps

Question

I am using infobox plugin to create multiple markers with different content - http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/infobox-basic.html
Also I am using the markerclusterer plugin to handle too many markers in the same region - http://gmaps-utility-library-dev.googlecode.com/svn/tags/markerclusterer/1.0/src/markerclusterer.js
All the markers are showing correctly and clustering is working perfect.
The problem. My question is how could I just click one infobox and close the others, and if you select a different one it would open that and close the others.
Here is my current code [updated]: http://jsfiddle.net/henrichro/mqrrA/
<script type="text/javascript" src="<?php echo get_bloginfo('template_directory'); ?>/js/markerclusterer.js"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox.js"></script>
<script type="text/javascript">
// build portfolios list
var portfolios = [
<?php
global $post;
$type = 'portfolio';
$args = array(
'post_type' => $type,
'post_status' => 'publish',
'posts_per_page' => -1,
'caller_get_posts'=> 1
);
$my_query = null;
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
while ($my_query->have_posts()) : $my_query->the_post();
$my_id = get_the_ID();
$my_title = get_the_title($my_id);
$my_permalink = get_permalink($my_id);
$site_type = get_the_terms($my_id,'type');
if ( $site_type ) {
foreach ( $site_type as $st ) {
if ( $st->slug == 'cultural' ) {
$icon_type = get_bloginfo('template_directory').'/img/icon_blue.png';
} elseif ( $st->slug == 'natural' ) {
$icon_type = get_bloginfo('template_directory').'/img/icon_green.png';
} else {
$icon_type = get_bloginfo('template_directory').'/img/icon_mixed.png';
}
}
} else {
$icon_type = "marker.setIcon(null)";
}
if (get_post_meta($post->ID,'_my_meta',TRUE)) :
$key_meta = get_post_meta($post->ID,'_my_meta',TRUE);
endif;
if($key_meta[coord_lat] && $key_meta[coord_long]):
$lat = $key_meta[coord_lat];
$long = $key_meta[coord_long];
else :
$lat = '';
$long = '';
endif;
?>
['<?php echo $my_title; ?>', <?php echo $lat; ?>, <?php echo $long; ?>, '<?php echo $icon_type; ?>', '<?php echo $my_permalink; ?>'],
<?php
endwhile;
}
//wp_reset_query();
?>
];
function initialize() {
// pointing the center of the universe
var latlng = new google.maps.LatLng(0, 0);
// setting the map options
var myMapOptions = {
zoom: 2,
center: latlng,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
// creating the map
var map = new google.maps.Map(document.getElementById("googlemap"),myMapOptions);
// list of the coordinates/positions
var latlnglist = []
// bounding
var bounds = new google.maps.LatLngBounds();
var markers = [],
marker;
// building markers from portfolio list
for (i = 0; i < portfolios.length; i++) {
// marker position
var position = new google.maps.LatLng(portfolios[i][1], portfolios[i][2]);
// extending position into list
latlnglist.push(position);
bounds.extend(position);
// special/custom icon for the marker
var image = portfolios[i][3];
// marker options
var markerOptions = {
position: position,
icon: image,
map: map
}
// creating the marker
marker = new google.maps.Marker(markerOptions);
// creating list of markers
markers.push(marker);
// creating the div for the infobox
var boxText = document.createElement("div");
// infobox options
var infoboxOptions = {
content: boxText
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-140, 0)
,zIndex: null
,boxStyle: {
background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/examples/tipbox.gif') no-repeat"
,opacity: 0.75
,width: "280px"
}
,closeBoxMargin: "10px 2px 2px 2px"
,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
// infobox css styles
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: white; padding: 5px; z-index: 9999";
// infobox content
boxText.innerHTML = "<a href='"+ portfolios[i][4] +"'>"+ portfolios[i][0] +"</a><br><br>Test";
// creating the infobox
markers[i].infobox = new InfoBox(infoboxOptions);
// marker action (click)
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
//infobox.setContent(portfolios[i][0]);
markers[i].infobox.close();
markers[i].infobox.open(map, this);
}
})(marker, i));
}
// defining cluster options
var clusterOptions = {
gridSize: 50,
maxZoom: 15
}
// creating the cluster object
var markerCluster = new MarkerClusterer(map, markers, clusterOptions);
var bounds = new google.maps.LatLngBounds();
for (var i = 0, len = latlnglist.length; i < len; i++) {
bounds.extend(latlnglist[i]);
}
map.fitBounds(bounds);
return markers;
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

Answer 1

Not sure how much this helps but my solution was to only use one infowindow. For example, the listener I use for clicking map markers is:
google.maps.event.addListener(marker999, "click", function() {
infowindow.close();
infowindow.setContent('contenthere');
infowindow.open(map, marker999);
});
The above code is written for each marker I have displayed (with the unique marker ID and the specific infowindow content for that marker). Infobox should work similarly.
Working example: http://jsfiddle.net/PwJdM/

Answer 2

I've replaced a little bit the marker action (click) part with this:
// marker action (click)
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
for ( h = 0; h < markers.length; h++ ) {
markers[h].infobox.close();
}
markers[i].infobox.open(map, this);
}
})(marker, i));
Inspired from here: google maps api infobox plugin and multiple markers (almost the same code, removed some unnecesary lines in my case).
Updated the working example on jsfiddle: http://jsfiddle.net/henrichro/mqrrA/

Answer 3

it might be a late answer but I resolved this by triggering a custom event and adding a listener on my boxes. Worked fine for me.
// just before you open your infobox
marker.addListener('click', function () {
google.maps.event.trigger(map, "closeAllInfoboxes");
infobox.open(marker.get('map'), marker);
});
//Add this event listener to your infobox
google.maps.event.addListener(map, 'closeAllInfoboxes', function () {
infobox.close();
});`