I’m working on an Angular application where I need to display vehicles on a Google Maps map, and show details about a vehicle in a modal when its corresponding marker is clicked. However, the click event on the markers doesn’t seem to trigger, and no errors are shown in the console. I am using Angular with the NgRx library to manage state and handle asynchronous data. Here is the relevant part of my code:

import { Component, NgZone, ChangeDetectorRef } from '@angular/core';
import { select, Store } from '@ngrx/store';
import { interval } from 'rxjs';
import { getVehicles } from 'src/app/shared/store/actions/vehicles.actions';
import { selectVehiclesList } from 'src/app/shared/store/selectors/vehicles.selectors';
import { IAppState } from 'src/app/shared/store/state/app.state';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent {
  selectedVehicle: any;
  vehiclesList = [];
  map: google.maps.Map;

  constructor(private store$: Store<IAppState>, private zone: NgZone, private cdr: ChangeDetectorRef) {
    this.store$.dispatch(getVehicles());
  }

  ngOnInit() {
    this.vehicles.subscribe(vehicles => {
      this.vehiclesList = vehicles;
      this.updateVehicleMarkers(vehicles);
    });

    const mapProperties = {
      center: new google.maps.LatLng(20.6083796, -103.417235),
      zoom: 16,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    this.map = new google.maps.Map(document.getElementById('map'), mapProperties);
  }

  updateVehicleMarkers(vehicles) {
    vehicles.forEach(vehicle => {
      const position = new google.maps.LatLng(vehicle.estado_vehiculo.ubicacion.latitude, vehicle.estado_vehiculo.ubicacion.longitude);
      const marker = new google.maps.Marker({
        position: position,
        map: this.map,
        title: vehicle.nombre,
        icon: './assets/car_icon.png',
        clickable: true
      });

      marker.addListener('click', () => {
        this.zone.run(() => {
          this.selectedVehicle = vehicle;
          this.cdr.detectChanges();
          console.log("Vehículo seleccionado: ", this.selectedVehicle);
        });
      });
    });
  }
}

When I click on a marker, the expected console log indicating the selected vehicle does not appear. I’ve tried using Angular’s NgZone to ensure changes are detected, but it still doesn’t work. What could be causing this issue and how can I fix it?