GoogleMaps - отображение окна информации (angularjs)

Мне было интересно, можете ли вы мне помочь. С помощью angular js v1 у меня есть карта, встроенная в мою веб-страницу, которая:

• Позволяет пользователю ввести пункт отправления и пункт назначения.
• Наносит на карту маркеры и отображает маршрут от пункта отправления и пункта назначения.
• Отображает рестораны (как маркеры) для путевых точек в исходной точке, в пункте назначения, а также в средней путевой точке. (Итак, 3 балла, не злоупотребляю ли я запросами / лимитами API Google.

Проблема: Когда я нажимаю на маркеры, мой InfoWindow не появляется. Кажется, что по умолчанию они естественно появляются для пункта отправления и пункта назначения, но я не могу понять, как сделать так, чтобы они отображались для всех ресторанов, которые отображаются в виде маркеров. (Для этого используется PlaceSearch).

Я много гуглил, но, поскольку я новичок в JS / Angular, я не могу найти лучший подход.

Мой код директивы ниже, с некоторым кодом infoWindow, но, как вы можете видеть, я в тупике. Не уверены, нужен ли мне обработчик кликов?

    googleMap.$inject = [];
     function googleMap() {

    return {
     restrict: 'E',
     template: '<div class = "google-map"></div>',
     replace: true,
     scope: {
       center: '=',
       zoom: '=',
       origin: '=',
       destination: '=',
       travelMode: '='
    },

    link($scope, $element) {
      const map = new google.maps.Map($element[0], {
        zoom: $scope.zoom,
        center: $scope.center
      });

      const directionsService = new google.maps.DirectionsService();
      const directionsDisplay = new google.maps.DirectionsRenderer();
      const placesService = new google.maps.places.PlacesService(map);
      // const infoWindows = [];
      // const infowindow = new google.maps.InfoWindow();
      // let marker = new google.maps.Marker;

      directionsDisplay.setMap(map);

      $scope.$watch('center', () => map.setCenter($scope.center), true);

      $scope.$watchGroup(['origin', 'destination', 'travelMode'], 
    displayRoute);

      // DISPLAY ROUTE
      function displayRoute() {
        if (!$scope.origin || !$scope.destination || !$scope.travelMode) 
    return false;

        directionsService.route({
          origin: $scope.origin,
          destination: $scope.destination,
          travelMode: $scope.travelMode
        }, (response) => {

          directionsDisplay.setDirections(response);

          // beginning of this form
          // response.routes[0].legs[0].steps.map(step => {
          const steps = response.routes[0].legs[0].steps
          const lookup = [steps[0], steps[Math.round(steps.length / 2)], 
          steps[steps.length - 1]]
          lookup.map(step => {


            placesService.nearbySearch({
              location: step.start_point,
              radius: 50,
              type: ['restaurant'],
              openNow: true
            }, (results) => {
              results.map(place => {
                console.info(place.name);
                return new google.maps.Marker({
                  map: map,
                  position: place.geometry.location,
                  // label: '⭐️',
                  title: place.name
                });  //google maps marker
              });

              results.map(place => {
                console.info(place.vicinity);
                const contentString = place.name;
                return new google.maps.InfoWindow({
                  title: place.name,
                  content: contentString
                });  //google maps marker
                // infoWindows.push(infowindow);
              });


            });
          }); //end of this function

        });  //end return directionsdisplay
      }  //display route ends


    } //link scope ends
  };
}

export default googleMap;

Спасибо!