<div *ngIf="loading">
  <app-loading></app-loading>
</div>
<div *ngIf="!loading">
  <google-map
    #mapa
    id="map"
    width="100%"
    [center]="position"
    [options]="options"
    [zoom]="zoom"
    (mapClick)="closeInfoWindow()"
    (mapDragend)="mapIsDragged()">
    <map-marker
      #markerElem="mapMarker"
      *ngFor="let marker of markers | search: form.search"
      [position]="marker.position"
      [label]="marker.label"
      [title]="marker.title"
      [icon]="marker.icon"
      [options]="marker.options"
      (mapClick)="openInfoWindow(markerElem, marker.info)"
      (mapMouseover)="openInfoWindow(markerElem, marker.info)"
      ></map-marker>
    <map-info-window>
      <div class="map__info-window-marker">
        <img
          src="https://www.peninsula.com/es/-/media/images/paris/new/dining/loiseau-blanc/ppr-oiseau-blanc-interior-evening-1074.jpg?mw=987&hash=83DDB71F9AC1F2B9B51D421BD9CC1C2F80F493B4"
          alt=""
          />
        <div class="map__info-content-marker d-flex flex-column">
          <div>
            <h3 class="title">{{ info_window_content!.name }}</h3>
          </div>
          <h5><ion-icon name="time-outline"></ion-icon>  {{ info_window_content!.email }}</h5>
          <h5><ion-icon name="call-outline"></ion-icon> {{ info_window_content!.phone_number }}</h5>
          <h5><ion-icon name="mail-outline"></ion-icon>  {{ info_window_content!.email }}</h5>
        </div>
      </div>
    </map-info-window>
  </google-map>
</div>