Does someone know how to modify this code so that google maps closes infowindows when you open another?

In other words, I want only one infowindow open at all times. I looked around on stackoverflow but couldn't seem to implement people's solutions in this code.

function initMapsDealers(){

objectLocation = new google.maps.LatLng(25.64152637306577, 1.40625);

var myOptions = {
    scrollwheel: false,
    zoom: 2,
    center: objectLocation,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map(document.getElementById("map-canvas-dealers"), myOptions);
var image1 = '/gfx/iconPloegerGreen.png';
var image2 = '/gfx/iconPloegerGreen.png';
var image3 = '/gfx/iconPloegerDealer.png';

/* Info windows */
<?

function replace_newline($string) {
  return (string)str_replace(array("\r", "\r\n", "\n"), '', $string);
}


$i = 0;
foreach($dealers as $dealer)
{
    $dealerLanden[$dealer['Land']][] = $dealer;

    if($dealer['lat'] != "" && $dealer['lon'] != "")
    {
        $i++;

        ?>
        objectLocation<?= $i; ?> = new google.maps.LatLng(<?= $dealer['lat']; ?>, <?= $dealer['lon']; ?>);

        var contentString<?= $i; ?> =
            '<div class="infoWindow">'+
            '<strong><?= str_replace("'","", $dealer['name']); ?></strong><br>'+
            '<?= replace_newline($dealer['content']); ?>'+
            '</div>';

        var infowindow<?= $i; ?> = new google.maps.InfoWindow({
            content: contentString<?= $i; ?>
        }); 

        var marker<?= $i; ?> = new google.maps.Marker({
            position: objectLocation<?= $i; ?>,
            title:"<?= $dealer['name']; ?>",
            map: map,
            icon: <?

            if($dealer['group'] == "Hoofdkantoor"){ ?>image1<? }
            elseif($dealer['group'] == "Oxbo"){ ?>image2<? }
            elseif($dealer['group'] == "Dealers"){ ?>image3<? } 
            else{ ?>image1<? }?>

        }); 

        google.maps.event.addListener(marker<?= $i; ?>, 'click', function() {
            infowindow<?= $i; ?>.open(map,marker<?= $i; ?>);
        });
        <?
    }
}

?>                      

resizeSection();

};

Does someone know how to modify this code so that google maps closes infowindows when you open another?

In other words, I want only one infowindow open at all times. I looked around on stackoverflow but couldn't seem to implement people's solutions in this code.

function initMapsDealers(){

objectLocation = new google.maps.LatLng(25.64152637306577, 1.40625);

var myOptions = {
    scrollwheel: false,
    zoom: 2,
    center: objectLocation,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map(document.getElementById("map-canvas-dealers"), myOptions);
var image1 = '/gfx/iconPloegerGreen.png';
var image2 = '/gfx/iconPloegerGreen.png';
var image3 = '/gfx/iconPloegerDealer.png';

/* Info windows */
<?

function replace_newline($string) {
  return (string)str_replace(array("\r", "\r\n", "\n"), '', $string);
}


$i = 0;
foreach($dealers as $dealer)
{
    $dealerLanden[$dealer['Land']][] = $dealer;

    if($dealer['lat'] != "" && $dealer['lon'] != "")
    {
        $i++;

        ?>
        objectLocation<?= $i; ?> = new google.maps.LatLng(<?= $dealer['lat']; ?>, <?= $dealer['lon']; ?>);

        var contentString<?= $i; ?> =
            '<div class="infoWindow">'+
            '<strong><?= str_replace("'","", $dealer['name']); ?></strong><br>'+
            '<?= replace_newline($dealer['content']); ?>'+
            '</div>';

        var infowindow<?= $i; ?> = new google.maps.InfoWindow({
            content: contentString<?= $i; ?>
        }); 

        var marker<?= $i; ?> = new google.maps.Marker({
            position: objectLocation<?= $i; ?>,
            title:"<?= $dealer['name']; ?>",
            map: map,
            icon: <?

            if($dealer['group'] == "Hoofdkantoor"){ ?>image1<? }
            elseif($dealer['group'] == "Oxbo"){ ?>image2<? }
            elseif($dealer['group'] == "Dealers"){ ?>image3<? } 
            else{ ?>image1<? }?>

        }); 

        google.maps.event.addListener(marker<?= $i; ?>, 'click', function() {
            infowindow<?= $i; ?>.open(map,marker<?= $i; ?>);
        });
        <?
    }
}

?>                      

resizeSection();

};

• javascript
• google-maps
• google-maps-api-3
• infowindow

• 1 possible duplicate of Google Maps API - opening a single infoWindow – Marcelo Commented Feb 27, 2013 at 12:09

2 Answers 2

There is a google remendation what to do if you only want one InfoWindow API documentaion for InfoWindow.

It is:

InfoWindows may be attached to either Marker objects (in which case their position is based on the marker's location) or on the map itself at a specified LatLng. If you only want one info window to display at a time (as is the behavior on Google Maps), you need only create one info window, which you can reassign to different locations or markers upon map events (such as user clicks). Unlike behavior in V2 of the Google Maps API, however, a map may now display multiple InfoWindow objects if you so choose.

To change the info window's location you may either change its position explicitly by calling setPosition() on the info window, or by attaching it to a new marker using the InfoWindow.open() method. Note that if you call open() without passing a marker, the InfoWindow will use the position specified upon construction through the InfoWindow options object.

So try to follow these suggenstions.

This is my solution to have only one infowindow open at one time:

infowindow = new google.maps.InfoWindow({
    content: infocontent,
    maxWidth: 200
});
google.maps.event.addListener(marker, 'click', function() {

    if($('.gm-style-iw').length) {
         $('.gm-style-iw').parent().hide();
    }
    infowindow.open(map,marker);
    
});