在 Google Maps API 中调用本地 GeoJSON 文件时出错

Question

Since Google Fusion Tables has been shut down, I'm trying to recreate a data layer (with US Counties) using a JSON file.

Here is my JS:

  var map;
  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        //center on the US
        center: {lat: 39.8283, lng: -98.5795},
        zoom: 5
    });

    var script = document.createElement('script');
    //call json file of US counties
    script.src = 'assets/sheet/places.json';
    document.getElementsByTagName('head')[0].appendChild(script);
  }
</script>

When I run the page, the map works but I get an error that says: "Uncaught SyntaxError: Unexpected token ':'" at only the second line of the JSON file.

Does anyone know what I can do to fix this? I've looked through pages of Google and haven't been able to find a solution. FYI, I basically have no experience with JSON but haven't found another way to convey a large dataset easily with Google Maps API.

The JSON file is here, in case anyone wants to see: https://www.estherloui.se/projects/sheet/gz_2010_us_050_00_20m.json

Answer 1

You can add GeoJSON data to your map using loadGeoJson . See the code below:

<script>
    var map;

    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            //center on the US
            center: { lat: 39.8283, lng: -98.5795 },
            zoom: 5
        });

        map.data.loadGeoJson('assets/sheet/places.json');
    }
</script>

Screenshot:

Hope this helps!