javascript - Skapa polygon i Angular 2 med hjälp av agm-biblioteket

Jag försöker skapa en polygon med Angular 2 AGM-biblioteket. Mallen är bifogad nedan:

<div id="google_map" [@cardtable2]>
            <sebm-google-map #maps [latitude]="latitude" [longitude]="longitude" [scrollwheel]="false" [zoom]="zoom">

                <sebm-google-map-marker 
                    *ngFor="let m of markers; let i = index"
                    (markerClick)="clickedMarker(m.label, i)"
                    [latitude]="m.lat"
                    [longitude]="m.lng"
                    [label]="m.label"
                    [markerDraggable]="true"
                    (dragEnd)="markerDragEnd(m, $event)">

                    <sebm-google-map-info-window>
                    <strong>{{m.label}}</strong>
                    </sebm-google-map-info-window>          
                </sebm-google-map-marker>
            </sebm-google-map>
        </div>

Och i kontrollern bifogar jag polygonen på följande sätt:

var city_bounds = [ 
        {
            "longitude" : 77.088103,
            "latitude" : 11.066228
        }, 
        {
            "longitude" : 77.027745,
            "latitude" : 11.113179
        }, 
        {
            "longitude" : 76.937558,
            "latitude" : 11.100018
        }, 
        {
            "longitude" : 76.867772,
            "latitude" : 11.082932
        }, 
        {
            "longitude" : 76.867772,
            "latitude" : 11.038643
        }, 
        {
            "longitude" : 76.899553,
            "latitude" : 10.968071
        }, 
        {
            "longitude" : 76.925336,
            "latitude" : 10.924184
        }, 
        {
            "longitude" : 76.984468,
            "latitude" : 10.92891
        }, 
        {
            "longitude" : 77.032123,
            "latitude" : 10.971053
        }, 
        {
            "longitude" : 77.066364,
            "latitude" : 11.000079
        }, 
        {
            "longitude" : 77.065678,
            "latitude" : 11.030235
        }
    ]


this.mapsAPILoader.load().then(() => {
  this.path = city_bounds.map(point => {
    return new google.maps.LatLng(point.latitude, point.longitude);
  });

  let city_bounds_polygon = new google.maps.Polygon({
    // map: this.mapsElementRef._elem.nativeElement,
    paths: this.path,
    editable: false,
    draggable: false
  })

  city_bounds_polygon.setMap(this.mapsElementRef);
}); 

Koden ovan är bara ett litet utdrag av en stor komponentfil, där this.mapsElementRef är en referens till sebm-google-maps som jag fick med hjälp av @ViewChild("maps")-dekoreraren. När jag startar node-servern får jag felet som nedan

app/map.component.ts(233,34): error TS2345: Argument of type 'ElementRef' is not assignable to parameter of type 'Map'.
  Property 'fitBounds' is missing in type 'ElementRef'.

Jag vet att det är något fel med kartreferensen, i vanlig javascript är referensen till kartorna tillgänglig eftersom vi skapar kartor med new google.maps.Maps som ses här. Men här skapas kartan med Angular-direktivet sebm-google-map. Så jag tog referensen till den med ViewChild och använde den med setMap, och fick felet ovan.

Jag antar att jag måste använda AgmPolygon från Agm-biblioteket som här, men jag har ingen aning om hur man använder det, eftersom jag inte hittar något exempel i dokumentationen. Kan någon ge en korrekt vägledning om hur man använder Agm-biblioteket för att skapa en polygon?

Versionen av agm är 0.16.0, det är faktiskt biblioteket med det gamla paketnamnet angular2-google-maps/core

Svar #1

I lösningsmedel med agm +2:

 mapClicked(data){

    this.path.push({ lat: data.coords.lat, lng: data.coords.lng });

    let newArray = Array<any>();
    this.path.forEach((item) => {
      newArray.push(item);
    });

    this.path = newArray;

   } 

// slut mapClicked