Show only one infobubble "at a time" in google maps API 3

Question

I am trying to make it so that only one infobubble shows at a time, in other words to toggle infobubble. The marker gets assigned this event handler in a for loop, looping through the marker array.

at the moment this works in a way that opens the infobubble but never closes it. I can click multiple markers and each will have the infobubble with out closing the previous one

Iv tried adding infobuble2.close(); but the closes iv got with it is i would have to click on the markers twice to close the previous infobubbles.

Iv also tried testing if the infobubble is open using infoBubble2.isOpen() it appears to only be false.

And yes if your wondering i have tried infowindow, and the functionality works well using it, but because of design constrains i need to style the popup accordingly below is my code

  var infoBubble2;

  google.maps.event.addListener(marker, 'click', function() {

             infoBubble2 = new InfoBubble({
                map: map,
                position: new google.maps.LatLng(-35, 151),
                shadowStyle: 1,
                padding: 0,
                backgroundColor: 'rgb(255,255,255)',
                borderRadius: 4,
                arrowSize: 10,
                borderWidth: 1,
                borderColor: '#2c2c2c',
                disableAutoPan: true,
                hideCloseButton: !0,
                arrowPosition: 30,
                backgroundClassName: 'phoney',
                arrowStyle: 2
              });

            infoBubble2.setContent("some content");
            infoBubble2.open(map, marker);
  });

What is Google Maps API v3.1? If that is supposed to be the "first release" of the Google Maps Javascript API v3, it was retired a long time ago, see [versioning](https://developers.google.com/maps/documentation/javascript/basics#Versioning) — geocodezip, Aug 13 '13 at 15:21
Im using this https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places — James Nicholson, Aug 13 '13 at 15:29
possible duplicate of [Google Maps API v3 (one infowindow open at a time)](http://stackoverflow.com/questions/15111555/google-maps-api-v3-one-infowindow-open-at-a-time) — geocodezip, Aug 13 '13 at 15:35
possible duplicate of [Google Map V3 - Allow only one infobox to be displayed at a time](http://stackoverflow.com/questions/10908132/google-map-v3-allow-only-one-infobox-to-be-displayed-at-a-time/10908459#10908459) — geocodezip, Aug 13 '13 at 15:37
possible dubs yes, but infobox may be similar to infobubble, they are still different scripts. with possibly diffrent option and methods hence why i posted the question. At the end of the day just adjusting the logic solved the issuse for me. thanks for the help — James Nicholson, Aug 13 '13 at 20:17

score 2 · Answer 1 · answered Aug 13 '13 at 15:24

Try something like this:

function f_createBalloon(num, marker) {
    balloons[num] = new google.maps.InfoWindow({
        content: ballonInfo[num]
    });
    balloonListeners[num] = new google.maps.event.addListener(marker, 'click',
        function () {
            f_closeBalloons();
            balloons[num].open(map, marker);
        });
}

function f_closeBalloons() {
    for (var j in balloons) {
        if (balloons[j]) balloons[j].close(map, markers[j]);
    }
}

score 2 · Answer 2 · answered Aug 13 '13 at 15:28

If you only want one to show up at a time, then only create one object and re-use it, rather than continually creating new objects and trying to manage them, like this:

 var infoBubble2 = new InfoBubble({
    map: map,
    position: new google.maps.LatLng(-35, 151),
    shadowStyle: 1,
    padding: 0,
    backgroundColor: 'rgb(255,255,255)',
    borderRadius: 4,
    arrowSize: 10,
    borderWidth: 1,
    borderColor: '#2c2c2c',
    disableAutoPan: true,
    hideCloseButton: !0,
    arrowPosition: 30,
    backgroundClassName: 'phoney',
    arrowStyle: 2
  });


  google.maps.event.addListener(marker,'click',function() {
    infoBubble2.close();
    infoBubble2.setContent("some content");
    infoBubble2.open(map, marker);
  });

score 1 · Accepted Answer · answered Aug 13 '13 at 20:13

I solved it by declaring the infobubble2 variable outside the initialize() function and then assigning it the value of new infobubble(); within the initialize(), then the onclick event which is assigner to each marker opens and populates the content of the infobubble.

Below is what i did. Thanks for the help everyone.

var infoBubble2;

function initialize() {
    var myOptions = {
          zoom: zoom,
          minZoom: 0, maxZoom: 20,
          center: myLatLng,
          mapTypeId: maptype,
          mapTypeControl:false,
          streetViewControl:false,
          panControl:false
      };
   map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

   infoBubble2 = new InfoBubble({
            map: map,
            position: new google.maps.LatLng(-35, 151),
            shadowStyle: 1,
            padding: 0,
            backgroundColor: 'rgb(255,255,255)',
            borderRadius: 4,
            arrowSize: 10,
            borderWidth: 1,
            borderColor: '#2c2c2c',
            disableAutoPan: true,
            hideCloseButton: !0,
            arrowPosition: 30,
            backgroundClassName: 'phoney',
            arrowStyle: 2
          });

      $.getJSON('include/jsonCatPoints.php', function(data) {
          for(var i=0; i<data.length;i++){
            placeMarker(data[i]['cat_lat'], data[i]['cat_long'], map);
          }
        });


}//ends initialize

function placeMarker(lat, longg, map) {
      var image = 'img/cat_marker.png';
         marker = new google.maps.Marker({
          position: new google.maps.LatLng(lat,longg),
          map: map,
          icon: image
        });
      makeBubble(map, "test" +lat, marker);
       markers.push(marker);
  }//ends placeMarker


function makeBubble(map, contentString, marker) {
  google.maps.event.addListener(marker, 'click', function() {
        infoBubble2.setContent("message"+contentString);
        infoBubble2.open(map, marker)
 });
}// ends makeBubble

Show only one infobubble "at a time" in google maps API 3

3 Answers3