<agm-map disableDefaultUI="true" id="map" #map [zoom]="zoom" [latitude]="center.lat" [longitude]="center.lng">

  <agm-marker (markerClick)="openInfoWindow(m.value.carEntity.vin)" [openInfoWindow]="true"
              *ngFor="let m of car_markers | keyvalue" [iconUrl]="getIconUrlCar(m.value.carEvent.near_crash_event)"
              [latitude]="m.value.carEvent.gps_location.latitude" [longitude]="m.value.carEvent.gps_location.longitude" [animation]="(m.value.carEvent.near_crash_event)?'BOUNCE':''">
    <agm-info-window style="opacity: 0.5!important;" (infoWindowClose)="closeInfoWindow(m.value.carEntity.vin)"
                     [isOpen]="isInfoWindowOpen(m.value.carEntity.vin)" [latitude]="m.value.carEvent.gps_location.latitude"
                     [longitude]="m.value.carEvent.gps_location.longitude">
      <p>VIN: {{m.value.carEntity.vin}}</p>
      <p>OEM: {{m.value.carEntity.oem}}</p>
      <p>Model Type: {{m.value.carEntity.modelType}}</p>
      <p>Velocity: {{m.value.carEvent.velocity}}</p>
      <p>Timestamp: {{m.value.carEvent.timestamp}}</p>
      <p>NCE: {{m.value.carEvent.near_crash_event}}</p>
    </agm-info-window>
  </agm-marker>

  <agm-marker *ngFor="let m of traffic_light_markers | keyvalue" [iconUrl]="trafficLightToImage(m.value.trafficLightEvent.color)"
              [latitude]="m.value.trafficLightEntity.location[1]" [longitude]="m.value.trafficLightEntity.location[0]">
    <agm-info-window>
      <p>Id: {{m.value.trafficLightEntity.id}}</p>
      <p>Switching Time: {{m.value.trafficLightEntity.switchingTime}}</p>
      <p>Range: {{m.value.trafficLightEntity.range}}</p>
      <p>Color: {{m.value.trafficLightEvent.color}}</p>
      <p>Last Switch: {{m.value.trafficLightEvent.last_switch}}</p>
    </agm-info-window>
  </agm-marker>

</agm-map>
