javascriptapigoogle-mapsfitbounds

fitBounds doesn't work without a timer


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

Solution

  • 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

    screenshot of resulting map

    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>