I am having trouble with the google maps polygon function. Despite the map displaying correctly, I keep getting the error message: InvalidValueError: not an Array. Does anyone have any suggestions on how to solve this issue? Your help is much appreciated!
Below are the code snippets I am using:
Homepage.ts
import { Component, OnInit } from '@angular/core';
import { ViewChild, ElementRef } from '@angular/core';
declare var google: any;
@Component({
selector: 'app-home',
templateUrl: './home.page.html',
styleUrls: ['./home.page.scss'],
})
export class HomePage implements OnInit {
map: any;
@ViewChild('map', { read: ElementRef, static: false }) mapRef: ElementRef;
polygon: any = [];
triangleCoords: any = [
{ lat: 25.774, lng: -80.190 },
{ lat: 18.466, lng: -66.118 },
{ lat: 32.321, lng: -64.757 },
{ lat: 25.774, lng: -80.190 }
];
constructor() {
}
ionViewDidEnter() {
this.showMap();
}
addPolygon(triangleCoords) {
for (let triangleCoord of triangleCoords) {
let bermudaTriangle = new google.maps.Polygon({
paths: triangleCoord,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(this.map);
}
}
showMap() {
const location = new google.maps.LatLng(24.886, -70.268);
const options = {
center: location,
zoom: 5,
disabledDefaultUI: true
}
this.map = new google.maps.Map(this.mapRef.nativeElement, options);
this.addPolygon(this.triangleCoords);
}
ngOnInit() {
}
}
homepage.html
<ion-header>
<ion-toolbar>
<ion-title>Home</ion-title>
<ion-buttons slot="start">
<ion-menu-button menu="main-menu"></ion-menu-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true" class="ion-padding">
<div #map id="map"></div>
</ion-content>
The error indicates that it expects an array, however, I am unsure of what needs to be added or removed.