import { Component, OnInit } from '@angular/core';

import { FirebaseAuthService } from '../auth/firebase-auth.service';

import { AfterContentInit, Directive, EventEmitter, OnChanges, OnDestroy,
SimpleChanges, Input, Output } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';

import { LatLng, LatLngLiteral, PolyMouseEvent, PolygonOptions } from '@agm/core/services/google-maps-types';
import { PolygonManager } from '@agm/core/services/managers/polygon-manager';
import {AgmPolygon} from '@agm/core/directives/polygon';

@Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {

// initial center position for the map
lat: number = 51.673858;
lng: number = 7.815982;
paths: Array<LatLngLiteral> = [
 { lat: 0,  lng: 10 },
  { lat: 0,  lng: 20 },
  { lat: 10, lng: 20 },
  { lat: 10, lng: 10 },
  { lat: 0,  lng: 10 }
]
// Nesting paths will create a hole where they overlap;
nestedPaths: Array<Array<LatLngLiteral>> = [[
  { lat: 0,  lng: 10 },
  { lat: 0,  lng: 20 },
  { lat: 10, lng: 20 },
  { lat: 10, lng: 10 },
  { lat: 0,  lng: 10 }
], [
  { lat: 0, lng: 15 },
  { lat: 0, lng: 20 },
  { lat: 5, lng: 20 },
  { lat: 5, lng: 15 },
  { lat: 0, lng: 15 }
]];
 @Input() fillColor: "red";
 @Input() visible: boolean;
  @Input() strokeColor: "white";
  constructor() { }

  ngOnInit() { }

}

<agm-map [latitude]="lat" [longitude]="lng">
     <agm-polygon [paths]="paths">
  </agm-polygon>