Uncaught InvalidValueError: not an array

Question

I wonder if someone can point me in the right direction here, I work with Google maps, trying to obscure the designated areas of the zip code to the user, if I rigidly set the latitude and longitude it works fine;

var triangleCoordsLS12 = [ {lng: -1.558585, lat: 53.796545}, {lng: -1.558585, lat: 53.796545}, ..... ]; 

but I am trying to get information from a MySQL database in PHP and JSON as follows:

 $.ajax({ type:'POST', url:'test.php', success:function(data){ var resultArray = JSON.parse(data); for (var i=0; i<resultArray.length; i++) { var triangleCoordsLS12 = new google.maps.LatLng(resultArray[i].lat, resultArray[i].lng); if(location.uname == 'John Smith'){ bermudaTriangleLS12 = new google.maps.Polygon({ paths: triangleCoordsLS12, strokeColor: '#ff0000', strokeOpacity: 0.8, strokeWeight: 1, fillColor: '#ff0000', fillOpacity: 0.30 }); bermudaTriangleLS12.setMap(map); } else if(location.uname == 'Bruce Brassington'){ bermudaTriangleLS12 = new google.maps.Polygon({ paths: triangleCoordsLS12, strokeColor: '#FFcc00', strokeOpacity: 0.8, strokeWeight: 1, fillColor: '#FFcc00', fillOpacity: 0.25 }); bermudaTriangleLS12.setMap(map); } } } }) 

I get an Uncaught InvalidValueError: not an Array error message in these lines: -

 bermudaTriangleLS12 = new google.maps.Polygon({ 

I know the error is not talking about Array , so how can I put points in an array? I would really appreciate your help.

Answer 1

You need to build the array first and then use it when creating the polygon. In your code, you create a new polygon inside the "coordinate" loop, so you create a polygon with one point in each loop.

 //build the array var resultArray = JSON.parse(data); var triangleCoordsLS12 = [] for (var i=0; i<resultArray.length; i++) { triangleCoordsLS12[i] = new google.maps.LatLng(resultArray[i].lat, resultArray[i].lng); } //use the array as coordinates bermudaTriangleLS12 = new google.maps.Polygon({ paths: triangleCoordsLS12, trokeColor: '#ff0000', strokeOpacity: 0.8, strokeWeight: 1, fillColor: '#ff0000', fillOpacity: 0.30 }); bermudaTriangleLS12.setMap(map); 

Pseudocode is my example:

 For each coordinate { add coordinate to array } construct-polygon(coordinate array) 

Your code:

 For each coordinate { construct-polygon(coordinate) }