Display a list of bookmarks when searching a particular place

Question

I am having difficulty in carrying out the following task:

I am developing a map in javascript, using the google maps api, this map consumes a json with several dealerships, and at the same time, I must display a list (below the map) with these same dealerships, but only the dealerships that are in that map view should be displayed, for example if the map is zoomed in Brazil, will display dealerships all over Brazil, but, if you zoom in looking at Brazil, will display the list of dealerships only of Women.

This part is already working, however the map is picking up the nearest dealerships from the sides first, when in fact what I need is to pick up from the center to the sides.

The code that makes the search field autocomplete is as follows:

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

From now on I appreciate any help!