I'm working on generating a polygon using the AGM library in Angular 2. Here's the template I am using:
<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>
In the controller, I attach the polygon like this:
var city_bounds = [
// coordinates for the polygon vertices
]
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({
paths: this.path,
editable: false,
draggable: false
})
city_bounds_polygon.setMap(this.mapsElementRef);
});
Upon starting the node server, I encounter the following error:
Error TS2345: Argument of type 'ElementRef' is not assignable to parameter of type 'Map'.
Property 'fitBounds' is missing in type 'ElementRef'.
The issue seems to be with the map reference. In plain JavaScript, we can easily create maps using new google.maps.Maps, but since the map is created using an Angular directive sebm-google-map, I obtained its reference using ViewChild. However, when trying to use it with setMap, I get the above error.
I believe I need to utilize AgmPolygon from the AGM library, but I'm unsure about how to implement it since there are no examples provided in the documentation. Can anyone guide me on how to correctly use the AGM library to create a Polygon?
The version of AGM being used is 0.16.0, which was previously known as angular2-google-maps/core.