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

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

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 2

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 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();
        });`