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="mapMarker"
      [position]="center"
      (mapClick)="clickMarker(firstMarker)"></map-marker>
    <map-marker #marker="mapMarker"
                *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>
    <map-circle *ngIf="isCircleDisplayed" [options]="circleOptions"></map-circle>
    <map-ground-overlay *ngIf="isGroundOverlayDisplayed"
                        [url]="groundOverlayUrl"
                        [bounds]="groundOverlayBounds"></map-ground-overlay>
    <map-kml-layer *ngIf="isKmlLayerDisplayed"
                   [url]="demoKml"></map-kml-layer>
  </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>
    <label for="circle-checkbox">
      Toggle Circle
      <input type="checkbox" (click)="toggleCircleDisplay()">
    </label>
  </div>
  <div>
    <label for="editable-circle-checkbox">
      Toggle Editable Circle
      <input type="checkbox" [disabled]="!isCircleDisplayed" (click)="toggleEditableCircle()">
    </label>
  </div>

  <div>
    <label for="ground-overlay-checkbox">
      Toggle Ground Overlay
      <input type="checkbox" (click)="toggleGroundOverlayDisplay()">
    </label>
  </div>

  <div>
    <label for="ground-overlay-image">
      Ground Overlay image

      <select id="ground-overlay-image" (change)="groundOverlayUrlChanged($event)">
        <option
          *ngFor="let image of groundOverlayImages"
          [value]="image.url">{{image.title}}</option>
      </select>
    </label>
  </div>

  <div>
    <label for="kml-layer-checkbox">
      Toggle KML Layer
      <input type="checkbox" (click)="toggleKmlLayerDisplay()">
    </label>
  </div>

</div>