google-map-demo.html

<div class="demo-google-map">
  <google-map height="400px"
              width="750px"
              [center]="center"
              [zoom]="zoom"
              (mapClick)="handleClick($event)"
              (mapMousemove)="handleMove($event)"
              (mapRightclick)="handleRightclick()"
              [mapTypeId]="mapTypeId">
    <map-marker #firstMarker [position]="center" (mapClick)="clickMarker(firstMarker)"></map-marker>
    <map-marker #marker
                *ngFor="let markerPosition of markerPositions"
                [position]="markerPosition"
                [options]="markerOptions"
                (mapClick)="clickMarker(marker)"></map-marker>
    <map-info-window>Testing 1 2 3</map-info-window>
    <map-polyline *ngIf="isPolylineDisplayed" [options]="polylineOptions"></map-polyline>
    <map-polygon *ngIf="isPolygonDisplayed" [options]="polygonOptions"></map-polygon>
    <map-rectangle *ngIf="isRectangleDisplayed" [options]="rectangleOptions"></map-rectangle>
  </google-map>

  <p><label>Latitude:</label> {{display?.lat}}</p>
  <p><label>Longitude:</label> {{display?.lng}}</p>

  <div>
    <label for="map-type">
      Select map type

      <select id="map-type" (change)="mapTypeChanged($event)" #mapType>
        <option *ngFor="let type of mapTypeIds" [value]="type">{{type}}</option>
      </select>
    </label>
  </div>

  <div>
    <label for="polyline-checkbox">
      Toggle Polyline
      <input type="checkbox" (click)="togglePolylineDisplay()">
    </label>
  </div>
  <div>
    <label for="editable-polyline-checkbox">
      Toggle Editable Polyline
      <input type="checkbox"
             [disabled]="!isPolylineDisplayed"
             (click)="toggleEditablePolyline()">
    </label>
  </div>

  <div>
    <label for="polygon-checkbox">
      Toggle Polygon
      <input type="checkbox" (click)="togglePolygonDisplay()">
    </label>
  </div>
  <div>
    <label for="editable-polygon-checkbox">
      Toggle Editable Polygon
      <input type="checkbox"
             [disabled]="!isPolygonDisplayed"
             (click)="toggleEditablePolygon()">
    </label>
  </div>

  <div>
    <label for="rectangle-checkbox">
      Toggle Rectangle
      <input type="checkbox" (click)="toggleRectangleDisplay()">
    </label>
  </div>
  <div>
    <label for="editable-rectangle-checkbox">
      Toggle Editable Rectangle
      <input type="checkbox"
             [disabled]="!isRectangleDisplayed"
             (click)="toggleEditableRectangle()">
    </label>
  </div>
</div>