CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3openstreetmap
Ghogilee
Ghogilee

Reputation: 23

Displaying OpenStreetMap boundaries on Google maps (using v3 api)

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

  1. I went to the nominatim.openstreetmap.org and search for a city (Denver for example)
  2. 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?

Upvotes: 2

Views: 2006

Answers (1)

geocodezip
geocodezip

Reputation: 161334

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)

Upvotes: 4

Related Questions