Display a list of labels when searching for a particular place

I'm having trouble performing the following task:

I'm developing a javascript map using google maps api, this map consumes a json with several dealers, and at the same time, I should display a list (below the map) with these same dealers, but it should only be displayed the dealers that are in that map view, for example if the map is zoomed in from brazil, will display the dealerships in brazil whole, but if you have the zoom looking guarulhos, will display the list of dealers only guarulhos. / p>

This part is already working, but the map is taking the dealerships closer to the sides first, when in fact what I need is to get from the center to the sides.

The code that does the autocomplete of the search field is the following one:

RntMapCCs.initAutocomplete = function() {

  input = document.getElementById('pac-input');
  searchBox = new google.maps.places.SearchBox(input);

  map.addListener('bounds_changed', function() {
    searchBox.setBounds(map.getBounds());
  });


  searchBox.addListener('places_changed', function() {
    places = searchBox.getPlaces();

    if (places.length == 0) {
      return;
    }

    var bounds = new google.maps.LatLngBounds();

    places.forEach(function(place) {
      if (!place.geometry) {
        console.log("Returned place contains no geometry");
        return;
      }


      if (place.geometry.viewport) {
        bounds.union(place.geometry.viewport);
      } else {
        bounds.extend(place.geometry.location);
      }
    });

    map.fitBounds(bounds);
  });
};

and the code that generates the lists is as follows:

RntMapCCs.createListDealers = function(){

    setTimeout(function() {

       var bounds = map.getBounds();

        for(var i = 0; i < markers.length; i++){ // looping through my Markers Collection

          if(bounds.contains(markers[i].position)){


            if(markers[i].cc.premium == true) {
              listDealersPremium(); 
            }
            else {
              listDealers();
            }

          }
        }



        function listDealers() {
          var template =
          '<li>'+
            '<a href="#">'+
              '<div class="title">'+markers[i].cc.name+'</div>'+
              '<div class="content">'+markers[i].cc.address+'</div>'
            '</a>'+
          '</li>'

          $("#list-dealers").each(function(){
              $(this).append(template);
          });

          $(window).on("load",function(){
              $(".content").mCustomScrollbar();
          });
        }

         function listDealersPremium() {
          var template =
          '<li>'+
            '<a href="#">'+
              '<div class="title">'+markers[i].cc.name+'</div>'+
              '<div class="content">'+markers[i].cc.address+'</div>'
            '</a>'+
          '</li>'

          $("#list-dealers-premium").each(function(){
              $(this).append(template);
          });
        }

    },0);
};

Thanks in advance for any help!