zoom out when infoBox is closed and only one info box open at a time Google Map

Question

• Question One: When closing an "infobox" how can I make it maps zoom back out?

• Question Two: How would I make it so that only one "infobox" is open at a time?

I have tried adding:

google.maps.event.addListener(map, 'zoom_changed', function(){
    if (! markers.length) { return; }
    for (i in markers) {
       markers[i].infoBox.close();
    }
});

However the code dose not seem to work. Any thoughts?

function InfoBox(opts) {
    google.maps.OverlayView.call(this);
    this.latlng_ = opts.latlng;
    this.map_ = opts.map;
    this.content = opts.content;
    this.offsetVertical_ = -195;
    this.offsetHorizontal_ = 5;
    this.height_ = 165;
    this.width_ = 266;
    var me = this;
    this.boundsChangedListener_ =
        google.maps.event.addListener(this.map_, "bounds_changed", function () {
            return me.panMap.apply(me);

        });

    this.setMap(this.map_);
}

InfoBox.prototype = new google.maps.OverlayView();

InfoBox.prototype.remove = function () {
    if (this.div_) {
        this.div_.parentNode.removeChild(this.div_);
        this.div_ = null;
    }
};


    this.createElement();
    if (!this.div_) return;

    var pixPosition = this.getProjection().fromLatLngToDivPixel(this.latlng_);
    if (!pixPosition) return;

    this.div_.style.width = this.width_ + "px";
    this.div_.style.left = (pixPosition.x + this.offsetHorizontal_) + "px";
    this.div_.style.height = this.height_ + "px";
    this.div_.style.top = (pixPosition.y + this.offsetVertical_) + "px";
    this.div_.style.display = 'block';
};

InfoBox.prototype.createElement = function () {
    var panes = this.getPanes();
    var div = this.div_;
    if (!div) {

        div = this.div_ = document.createElement("div");
            div.className = "infobox"
        var contentDiv = document.createElement("div");
            contentDiv.className = "content"
            contentDiv.innerHTML = this.content;
        var closeBox = document.createElement("div");
            closeBox.className = "close";
            closeBox.innerHTML = "x";
        div.appendChild(closeBox);

        function removeInfoBox(ib) {
            return function () {
                ib.setMap(null);
            };
        }
        google.maps.event.addDomListener(closeBox, 'click', removeInfoBox(this));
        div.appendChild(contentDiv);
        div.style.display = 'none';
        panes.floatPane.appendChild(div);
        this.panMap();
    } else if (div.parentNode != panes.floatPane) {

        div.parentNode.removeChild(div);
        panes.floatPane.appendChild(div);
    } else {

       .
    }
}

InfoBox.prototype.panMap = function () {

    var map = this.map_;
    var bounds = map.getBounds();
    if (!bounds) return;

    var position = this.latlng_;

    var iwWidth = this.width_;
    var iwHeight = this.height_;

    var iwOffsetX = this.offsetHorizontal_;
    var iwOffsetY = this.offsetVertical_;

    var padX = 40;
    var padY = 40;

    var mapDiv = map.getDiv();
    var mapWidth = mapDiv.offsetWidth;
    var mapHeight = mapDiv.offsetHeight;
    var boundsSpan = bounds.toSpan();
    var longSpan = boundsSpan.lng();
    var latSpan = boundsSpan.lat();
    var degPixelX = longSpan / mapWidth;
    var degPixelY = latSpan / mapHeight;

    var mapWestLng = bounds.getSouthWest().lng();
    var mapEastLng = bounds.getNorthEast().lng();
    var mapNorthLat = bounds.getNorthEast().lat();
    var mapSouthLat = bounds.getSouthWest().lat();

    var iwWestLng = position.lng() + (iwOffsetX - padX) * degPixelX;
    var iwEastLng = position.lng() + (iwOffsetX + iwWidth + padX) * degPixelX;
    var iwNorthLat = position.lat() - (iwOffsetY - padY) * degPixelY;
    var iwSouthLat = position.lat() - (iwOffsetY + iwHeight + padY) * degPixelY;

    var shiftLng =
        (iwWestLng < mapWestLng ? mapWestLng - iwWestLng : 0) +
        (iwEastLng > mapEastLng ? mapEastLng - iwEastLng : 0);
    var shiftLat =
        (iwNorthLat > mapNorthLat ? mapNorthLat - iwNorthLat : 0) +
        (iwSouthLat < mapSouthLat ? mapSouthLat - iwSouthLat : 0);

    var center = map.getCenter();

    var centerX = center.lng() - shiftLng;
    var centerY = center.lat() - shiftLat;

    map.setCenter(new google.maps.LatLng(centerY, centerX));

    google.maps.event.removeListener(this.boundsChangedListener_);
    this.boundsChangedListener_ = null;
};

function initialize() {
    var markers = []; 

    var myOptions = { 
        zoom: 3,
        center: new google.maps.LatLng(-5.646, 20.0611),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        sensor: 'true'
    }
    var map = new google.maps.Map(document.getElementById("canvas-map"), myOptions);

    var data = [ 
      {
        'id':1,
        'content':'Hello my name is marker, I\'m from Google',
        'position': {
          'lat':-33,
          'lng':150
         }
      },
      {
        'id':2,
        'content':'I am the content of this infobox. Wow, what a text.<br><br><a href="#">The good thing is: Tags are also possible</a>',
        'position': {
          'lat':-34,
          'lng':150
         }
      },
    ]

    for (var i = 0; i < data.length; i++) {
      var current = data[i];

      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(current.position.lat, current.position.lng),
        map: map,
        content: current.content
      });

      markers.push(marker);
  marker.addListener('click', function() {
          map.setZoom(8);
          map.setCenter(marker.getPosition());

        });

      google.maps.event.addListener(markers[i], "click", function (e) {       
           map.zoomOut(); 
           map.setCenter(this.getPosition()); 
        var infoBox = new InfoBox({
            latlng: this.getPosition(),
            map: map,
            content: this.content           
        });

      });

    }


}

Answer 1

Answer to question 1

If you want the map to zoom out when the user closes an info window, you can listen for the closeclick event on the info window object.

infoWindow.addListener('closeclick', function() {
  map.setZoom(3); // Set the desired zoom level
});

I couldn't get your code to work so I created a basic example of the above functionality in action. Clicking on the marker opens an info window and zooms the map in. Closing the info window, zooms the map back out.

Answer to question 2

Check out geocodezip's comments to your question. He provides links to previous questions that could help you figure out how to have only one info window open at a time.