Как исправить рендеринг списка данных Google при реализации Google Maps

Question

Когда я использую код JavaScript для рендеринга по нескольким адресам, Google API впервые часто предоставляет данные.Но отображение в html требует времени.

Это для отображения списка адресов при поиске в Картах Google:

var map = new google.maps.Map (document.getElementById ('map'), {center: {lat:33.4372894, lng: -111.6847036}, увеличение: 13, mapTypeId: 'roadmap'});

    var input = document.getElementById('pac-input');
    var searchBox = new google.maps.places.SearchBox(input);
    this.placeData = new google.maps.places.PlacesService(map);


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

    var markers = [];
    this.markersList = []
    this.fullPlaceData = []
    let t = this;

    searchBox.addListener('places_changed', function () {
        this.serverBusy = true

        var places = searchBox.getPlaces();
        console.log(places)
        if (places.length == 0) {
            return;
        }

        markers.forEach(function (marker) {
            marker.setMap(null);
        });

        markers = [];
      //  t.markersList = places
        t.fullPlaceData = []
  var bounds = new google.maps.LatLngBounds();
  var infowindow = new google.maps.InfoWindow();
  let i = 0
  places.forEach(function (place) {
    if (!place.geometry) {
      console.log("Returned place contains no geometry");
      return;
    }

    t.placeData.getDetails({ placeId: place.place_id },
      function (data, status) {
        if (status !== google.maps.places.PlacesServiceStatus.OK) {
          return;
        } else {
          t.fullPlaceData.push(data)
    var icon = {
      url: place.icon,
      size: new google.maps.Size(71, 71),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(17, 34),
      scaledSize: new google.maps.Size(25, 25)
    };

    let markerVal = new google.maps.Marker({
      map: map,
      icon: icon,
      title: place.name,
      position: place.geometry.location,
      animation: google.maps.Animation.DROP,
      place_id: place.place_id
    })

    var content = "<div class='map_info_wrapper'><a href=" + place. icon + "><div class='img_wrapper'><img src=" + place. icon + "></div>" +
    "<div class='property_content_wrap'>" +
    "<div class='property_title'>" +
    "<span>" + place.name + "</span>" +
    "</div>" +

    "<div class='property_bed_type'>" +
    "<span>" + place.formatted_address + "</span>" +
    "</div>"

    google.maps.event.addListener(markerVal, 'click', (function (marker, content, i) {
      return function () {
        infowindow.setContent(content);
        infowindow.open(map, marker);
      }
    })(markerVal, content, i));

    i = i + 1

    markers.push(markerVal);
    t.markers = markers

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

          map.fitBounds(bounds);

        }
      });
  });
        this.serverBusy = false
    });
}