javascript - fitBounds doesn't work without a timer

Question

When I try to remove the setTimeout around the fitBounds, the smart zoom stops working. I know that Google Maps API is mostly asynchronous and this is why the timer makes my code work. I have been looking for a few hours and I didn't find any solution to remove this timer. Can someone can help me please?

var map;
var markers = [];
var bounds;

//Initialise google map
function initMap() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(46.950324, -71.256578);
    var mapOptions = {
      zoom: 7,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById('map'), mapOptions);
}

function filterSelection() { 
deleteMarkers();

for(...) {

    //Prends les informations de la compagnie
    var varlat = div[j].getAttribute('data-lat');
    var varlong = div[j].getAttribute('data-long');
    var nom = div[j].getAttribute('data-nom');
    var infowindow = new google.maps.InfoWindow({
          content: ""
    });

    if(varlat && varlong) {
        var maplatlong = new google.maps.LatLng(varlat, varlong);

        //Mets le point sur la carte
        var marker = new google.maps.Marker({
            map: map,
            position: maplatlong,
            title: nom,
            info: nom
        });

        //Pop up lorsqu'on clique sur le point
        marker.addListener('click', function() {
            infowindow.setContent( this.info );
            infowindow.open( map, this );
        });
        markers.push(marker);
        bounds.extend(maplatlong);
    }

}       

setTimeout(function(){ 
    if(markers.length > 0 ) {
        map.fitBounds(bounds); 

        google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) {
        this.setZoom(map.getZoom()-1);
          if (this.getZoom() > 15) {
            this.setZoom(15);
          }
        });
    } else {
        map.setCenter(new google.maps.LatLng(46.950324, -71.256578));
    }
}, 3000);
}


// Deletes all markers in the array by removing references to them. AIzaSyATmzbLFTjqkr_vOKK1F8CIZ0cw1G0RNRA
function deleteMarkers() {
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(null);
    }
    markers = [];
    bounds = new google.maps.LatLngBounds(null);
}

Answer 1

Simplest solution is to run the map.fitBounds when you finish the loop (when j==div.length-1):

function filterSelection() {
  deleteMarkers();
  var div = $(".marker");
  for (var j = 0; j < div.length; j++) {

    //Prends les informations de la compagnie
    var varlat = div[j].getAttribute('data-lat');
    var varlong = div[j].getAttribute('data-long');
    var nom = div[j].getAttribute('data-nom');
    var infowindow = new google.maps.InfoWindow({
      content: ""
    });

    if (varlat && varlong) {
      var maplatlong = new google.maps.LatLng(varlat, varlong);

      //Mets le point sur la carte
      var marker = new google.maps.Marker({
        map: map,
        position: maplatlong,
        title: nom,
        info: nom
      });

      //Pop up lorsqu'on clique sur le point
      marker.addListener('click', function() {
        infowindow.setContent(this.info);
        infowindow.open(map, this);
      });
      markers.push(marker);
      bounds.extend(maplatlong);
      if (j==div.length-1) map.fitBounds(bounds);
    }
  }
}

proof of concept fiddle

code snippet:

//Initialise google map
function initMap() {
  geocoder = new google.maps.Geocoder();
  map = new google.maps.Map(document.getElementById('map'));
  filterSelection();
}

function filterSelection() {
  deleteMarkers();
  var div = $(".marker");
  for (var j = 0; j < div.length; j++) {
    //Prends les informations de la compagnie
    var varlat = div[j].getAttribute('data-lat');
    var varlong = div[j].getAttribute('data-long');
    var nom = div[j].getAttribute('data-nom');
    var infowindow = new google.maps.InfoWindow({
      content: ""
    });

    if (varlat && varlong) {
      var maplatlong = new google.maps.LatLng(varlat, varlong);

      //Mets le point sur la carte
      var marker = new google.maps.Marker({
        map: map,
        position: maplatlong,
        title: nom,
        info: nom
      });

      //Pop up lorsqu'on clique sur le point
      marker.addListener('click', function() {
        infowindow.setContent(this.info);
        infowindow.open(map, this);
      });
      markers.push(marker);
      bounds.extend(maplatlong);
      if (j==div.length-1) map.fitBounds(bounds);
    }
  }
}

// Deletes all markers in the array by removing references to them. 
function deleteMarkers() {
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(null);
  }
  markers = [];
  bounds = new google.maps.LatLngBounds(null);
}
google.maps.event.addDomListener(window, "load", initMap);
var map;
var markers = [];
var bounds;

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script>
<div id="map"></div>
<div class="marker" data-lat="37.4688273" data-long="-122.141075" data-nom="East Palo Alto, CA"></div>
<div class="marker" data-lat="37.4529598" data-long="-122.1817252" data-nom="Menlo Park, CA"></div>
<div class="marker" data-lat="37.424106" data-long="-122.1660756" data-nom="Stanford, CA"></div>