Displaying OpenStreetMap boundaries on Google maps (using v3 api)

Question

I want to display the city boundary on the Google Map using GeoJSON data which I get using the following tools.

I went to the nominatim.openstreetmap.org and search for a city (Denver for example)
With the retrieved OSM ID (in this case : 253750) then I've generated the GeoJSON file using the online tool (polygons.openstreetmap.fr) - which looks like this http://polygons.openstreetmap.fr/get_geojson.py?id=253750&params=0

After that, I've downloaded the file and tried to load this GeoJSON data into my map using simple:

map.data.loadGeoJson(
            'http://domain.com/example.json');

But, in my console I got an error:

Uncaught InvalidValueError: not a Feature or FeatureCollection

The problem is that even though the above tool generates GeoJSON format, it's not recognized as the standard one. So is there an extra step between or I'm missing something here?

Solved: If anyone stumbles upon the same problem, from the generated GeoJSON file at the above url, then just copy/paste the coordinates array into the MultiPolygon Object of the custom created geoJSON file using standards. — Ghogilee

geocodezip geocodezip · Accepted Answer · 2016-10-14T19:42:46

Related question: google maps addGeoJson from text field with js

You need to take the data you retrieve from Open Street Maps and put it into the place in the Feature/FeatureCollection JSON that the GeoJson parser is expecting:

var geoJson = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "geometry": {},
    "properties": {}
  }];
// where "geoJsonData" is the data you retrieved
geoJson.features[0].geometry = geoJsonData;

example fiddle (with the data from the posted link)

Displaying OpenStreetMap boundaries on Google maps (using v3 api)

1 Answers