<div>
  <google-map
    #mapa
    id="map"
    width="100%"
    [center]="center"
    [options]="options"
    [zoom]="zoom"
    (mapClick)="closeInfoWindow()">
    <map-marker
      #markerElem="mapMarker"
      *ngFor="let marker of markers | search: search"
      [position]="marker.position"
      [label]="marker.label"
      [title]="marker.title"
      [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://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2361/posts/35776/image/what_is_editorial_illustration_estudio_santarita_1.JPG"
          alt=""
          />
        <div class="map__info-content-marker d-flex">
          <div>
            <p class="title">{{ info_window_content.name }}</p>
          </div>
          <p><ion-icon name="call-outline"></ion-icon> {{ info_window_content!.phone_number }}</p>
          <p><ion-icon name="mail-outline"></ion-icon>  {{ info_window_content!.email }}</p>
        </div>
      </div>
    </map-info-window>
  </google-map>
</div>
<!-- <div #gmap style="width:100%;height:400px"></div> -->