<ion-content>

  <div *ngIf="showSearchField" class="ion-margin-bottom">
    <input #search type="text" class="border-input " (keydown.enter)="$event.preventDefault()"
      placeholder="{{ 'SEARCH_ADDRESS' | translate }}" autocorrect="off" autocapitalize="off" spellcheck="off"
      type="text" [(ngModel)]="searchText">
  </div>

  <google-map *ngIf="mapCenter" [height]="height" width="100%" [center]="mapCenter" [zoom]="zoom"
    [options]="{mapId: 'SC_MAP_ID'}">
    <!-- POSICIÓN DEL USUARIO -->
    <map-marker *ngIf="!searchMarkerPosition" [position]="userPosition" [icon]="userPositionIcon"></map-marker>

    <!--MARKER SEARCH LOCATION-->
    <map-marker *ngIf="showSearchField && searchMarkerPosition" [position]="searchMarkerPosition" [gmpDraggable]="true"
      (mapDragend)="markerDragEnd($event)" [options]="{ draggable: true }"></map-marker>

    <map-marker *ngFor="let business of businesses; let i = index;"
      [position]="getNumericMarkerPosition(business.address)" [icon]="getIconUrl(business)"
      [label]="{text: business.name + ' ★' + business.score, fontSize: '12px'}"
      (mapClick)="markerClicked(business)"></map-marker>
  </google-map>
</ion-content>