Invalid GeoJSON Error when pulling from an API

Question

I am working on a project where I need to pull GeoJSON from my .NET API via a jQuery ajax call. When I try to assign the data to a variable, and then load it into Google Maps like this:

 map.data.addGeoJson(data);

It throws an error saying:

js:70InvalidValueError: not a Feature or FeatureCollection

If I were to take that same response that the API gives, and paste it directly into the html file (so assign the same value to the JS variable data) it works fine and the map renders

My guess is maybe there is an encoding issue? I even output the response to a div, copied that div's values, pasted it in, and it worked. It seems to only be when I directly assign the value from the API that it throws an error.

Any ideas what I could do to format this or get it working correctly? Is the script "breaking" b/c of formatting or something when it's being directly written out in JavaScript?

Thanks so much!

Edit: My data that comes back from the API is already wrapped in a feature collection:

{"type": "FeatureCollection", "features": [{"id": 5280, "type": "Feature", "geometry": {"type": "MultiPolygon", "coordinates": [[[[-73.431919, 40.989009], [-73.423452, 40.990793], [-73.398054, 40.996147], [-73.389588, 40.997932], [-73.388429, 40.998151], [-73.384952, 40.99881], [-73.383794, 40.99903], [-73.383516, 40.999082], [-73.382685, 40.99924], [-73.382408, 40.999293], [-73.38156, 40.999453], [-73.379019, 40.999935], [-73.378172, 41.000097], [-73.377449, 41.000289], [-73.375282, 41.000867], [-73.37456, 41.00106], [-73.358967, 41.004214], [-73.312189, 41.013675], [-73.296597, 41.01683], [-73.296564, 41.016837], [-73.295532, 41.017045], [-73.292437, 41.017671], [-73.291406, 41.01788], [-73.288203, 41.018528], [-73.278594, 41.020471], [-73.275392, 41.02112], [-73.274206, 41.021338], [-73.273019, 41.021556], [-73.270225, 41.022069], [-73.261288, 41.023711], [-73.254724, 41.024916], [-73.249557, 41.025866], [-73.24916, 41.025957], [-73.247968, 41.026233], [-73.247572, 41.026326], [-73.246328, 41.026614], [-73.242596, 41.027478], [-73.241353, 41.027767], ... end

Just a reminder, if I paste the output directly into a variable, it works. If I have the variable equal the response from the API, it fails.

Tsimp. Dim Tsimp. Dim · Accepted Answer · 2017-07-18T16:40:18

Check out this GeoJson page , this GoogleMapsAPI page where it states

addGeoJson(geoJson:Object, options?:Data.GeoJsonOptions)

Adds GeoJSON features to the collection. Give this method a parsed JSON. The imported features are returned. Throws an exception if the GeoJSON could not be imported.

and this SO question where the accepted answer is wrapping your object like so :

 { "type": "FeatureCollection",
"features": [
  { "type": "Feature",
     "geometry": /** paste here the complete output of 
                     http://mapit.mysociety.org/area/11804.geojson **/
  }
 ]
}

Edit: Try this

var geojson = JSON.parse(data); 
map.data.addGeoJson(geojson);

Invalid GeoJSON Error when pulling from an API

1 Answers