<div id="map" style="height: 300px;" leaflet [leafletOptions]="options" (leafletMapReady)="mapReady($event)" (leafletClick)="mapClick($event)">
  <div *ngIf="isMarkerSet" [leafletLayer]="marker"></div>
</div>
<div id="search" class="mt-2 mb-3">
  <div class="input-group mb-3">
    <input type="text" class="form-control" [placeholder]="'place'|translate|titlecase" [(ngModel)]="placeName" (keyup.enter)="searchPlace()">
    <button class="btn btn-outline-secondary" type="button" (click)="searchPlace()">{{ 'search'|translate|titlecase }}</button>
  </div>
  <div id="results" *ngIf="isPlaceSearchResultsOpen">
    <li class="text-decoration-underline" *ngFor="let result of placeSearchResults" (click)="selectPlace(result)">{{ result.display_name }}</li>
  </div>
</div>