angular-google-maps: agm-polygon not working properly with *ngFor, InvalidValueError: not an Array

Issue description Hi guys, I have a little problem with moving paths into a separated model. Let’s say I have a collection of restaurant. Each restaurant has a collection of delivery zones, each delivery zone has separated paths.

After changing [paths]="paths" into [paths]="zone.paths" I get

InvalidValueError: not an Array

My code is pretty simple:

<agm-map [latitude]="restaurant.latitude" [longitude]="restaurant.longitude">
  <agm-marker [latitude]="restaurant.latitude" [longitude]="restaurant.longitude"></agm-marker>
  <agm-polygon *ngFor="let zone of restaurant.delivery_zones" [fillColor]="red"
               [fillOpacity]="0.5" [paths]="zone.paths"
               [strokeColor]="blue" [strokeOpacity]="0.6" [strokeWeight]="2"
               [visible]="true" [zIndex]="1"></agm-polygon>
</agm-map>

DeliveryZone model:

...
public paths = [
    {lat: 25.774, lng: -80.190},
    {lat: 18.466, lng: -66.118},
    {lat: 32.321, lng: -64.757}
  ];
...

I’m not an expert in Angular.

Thanks!

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 3
Comments: 16

Most upvoted comments

@tolvaly heres what the html snippet looks like for my map:

`          <agm-map  [latitude] = 'lat'  [longitude] = 'lon' [zoom]=16 [panControl] = "true" [zoomControl] = "true" [mapTypeControl]="true" [fullscreenControl]="true" [mapTypeId] = "'satellite'">
              <agm-polygon *ngFor='let path of paths'  [strokeColor]="'#083478'" [strokeWeight]="4" [paths]="path">
              </agm-polygon>
          </agm-map>
`

where ‘paths’ or ‘this.paths’ is produced by this function:

`		public mkSquares(value: any){
				let squares = [];
				this._loader.load().then(() => {
						this.detection.getSections().subscribe(data => {
								for (let index in data){
										let obj = [];
										for (let point of value){

												if(data[index]['SECTION_ID'] == point.SECTION_ID){
														let splits = point.LAT_LON.split(",");


														 let coords  = new google.maps.LatLng(parseFloat(splits[0]), parseFloat(splits[1]));
														obj.push(coords);
												}
										}

										squares.push(obj);

								}
								this.paths = squares;
						})

				})
		}
`

In which, I utilize ‘this._loader.load()’ where ‘this._loader’ is ‘MapsAPILoader’, defined in my constructor.

Later, for more detailed lines, I did the following to gain full access to the google maps api:

`		@ViewChild(AgmMap) agmMap;

		ngAfterViewInit(): void {
				this.agmMap.mapReady.subscribe(map => {
						console.log('native map', map);
                                }
              }

`

make sure to have ‘declare var google: any;’ at the top, along side your imports or you won’t be able to use the google objects like google.maps.Marker, etc.

Hope this helps!

Cromies on Aug 30, 2018

I faced the same issue but was fixed after I mapped my data format from Array<LatLngLiteral> to Array<Array<LatLngLiteral>>

Working format

const paths: Array<Array<LatLng | LatLngLiteral>> = [
  [
    {
      "lat": 7.031,
      "lng": 125.573
    },
    {
      "lat": 7.031,
      "lng": 125.575
    }
  ]
];

Seems like the Array<LatLng | LatLngLiteral> format is not working.

package.json

{
  "dependencies": {
    "@agm/core": "^1.1.0",
    "@agm/drawing": "^1.1.0",
    "@angular/animations": "~9.1.11",
    "@angular/cdk": "^9.2.4",
    "@angular/common": "~9.1.11",
    "@angular/compiler": "~9.1.11",
    "@angular/core": "~9.1.11",
    "@angular/forms": "~9.1.11",
    "@angular/material": "^9.2.4",
    "@angular/platform-browser": "~9.1.11",
    "@angular/platform-browser-dynamic": "~9.1.11",
    "@angular/router": "~9.1.11",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  }
}

dev-sareno on Jul 15, 2020