Angular and Google Maps render performance

I'm doing a real-time application with Node, Angular2 and google maps. I'm using the google maps API js natively including it in the index.html ...<script async defer src="https://maps.googleapis.com/maps/api/js?key="></script>...

When I use DirectionsService of API google maps in the callback I render a list and paint de route result in the map. However, the list is displayed 3 or 4 seconds later.

this.avisosService.getAvisos().subscribe(
  aviso => {
    this.avisos = aviso;
    this.directionsService =  new google.maps.DirectionsService();
    this.directionsService.route({
        origin: {lat: aviso.equipo.geometry.coordinates[0], lng: aviso.equipo.geometry.coordinates[1]},
        destination: {lat: aviso.tecnico.geometry.coordinates[0], lng: aviso.tecnico.geometry.coordinates[1]},
        travelMode: 'DRIVING'
      }, (result, status) => {
        if (status == google.maps.DirectionsStatus.OK) {
          this.listItems.unshift('Aviso');
          const directionDisplay = new google.maps.DirectionsRenderer();
          directionDisplay.setMap(maping);
          directionDisplay.setDirections(result);
          directionDisplay.setRouteIndex(aviso.id);
          this.directionsDisplay.push(directionDisplay);
        } else {
          console.log(status);
        }
      });
  }
);

The line this.listItems.unshift('Aviso'); fills the listItems variable that is passed to another component that draws the list.

I do not understand why it takes so long to visualize the elements of the list, they do it 3-4 seconds after leaving the route on the map when they should leave practically at the same time

Can somebody help me?

Thanks!