Google Map API v3 fetch geoJSON data from external (eg. OSM http://polygons.openstreetmap.fr/get_geojson.py?id=3227127&params=0 )

Question

I am trying to map multiple cities using the geoJSON data from OSM on google map. I came across the discussion below and workaround by @geocodezip but this copies the coordinates array. I am looking for a way to fetch the code via url like the example by Google at: https://developers.google.com/maps/documentation/javascript/datalayer Since I am mapping 23 cities, this would be tedious.

Example:

var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { zoom: 4, center: {lat: -28, lng: 137} });

// NOTE: This uses cross-domain XHR, and may not work on older browsers. map.data.loadGeoJson( 'https://storage.googleapis.com/mapsdevsite/json/google.json'); }

Reference: Displaying OpenStreetMap boundaries on Google maps (using v3 api)

NOTE: I am able to map a single city based on coordinates array input, however I need to fetch the coordinates from OSM. e.g. > https://s3.amazonaws.com/geojson-arizona/index.html

I need to map boundaries for the following cities. > https://s3.amazonaws.com/geojson-arizona/marker.html

I am lost. If anyone has worked on something similar, appreciate any pointers. Thanks in advance!

Answer 1

Well, looks like I got this resolved. I was missing out parameters in the geoJSON file. :|

{
"type": "FeatureCollection",
"features": [
{
    "type": "Feature",
    "properties": {
     ...
     ...

I am able to fetch the geoJSON.json file from external link, which in my case from an S3 bucket. (Please make sure to have appropriate ACL on the file and CORS enable).

The output as shown at the link below:

geoJSON data polygon overlay google Map

With Markers: with multiple markers

geoJSON latlong data from OSM