XML Parsing Error: not well-formed, error trying to load GeoJSON

UPDATE: I opened the shapefile from which my GeoJSON file came using QGIS. I saved the layer as this GeoJSON file, making sure to select the projection WGS84/EPSG:4326 when saving. But I still get the same error described below when I attempt to place the GeoJSON on a Google Maps layer. The original shapefile is here.

I'm trying to add this GeoJSON to a map using Google Maps API.

My code.

<html>
  <body>
    <div id="map"></div>
    <script type="text/javascript">
        function initMap(){
            var map = new google.maps.Map(
                document.getElementById("map"),
                {
                    zoom: 9,
                    center: {lat: 26.6949358, lng: -80.3487426}
                }
            );
            map.data.loadGeoJson("path/to/city-boundaries.geojson")
        }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=MY_GOOGLE_MAPS_API_KEY&callback=initMap">
    </script>
  </body>
</html>

But when I open the HTML file in Firefox, I see the following error in the developer's console.

XML Parsing Error: not well-formed
Location: file:///path/to/city-boundaries.geojson

How do I fix this error?

Solution

loadGeoJson uses XHR under the covers, it won't work with local files. The files need to be served by a webserver.

From the documentation:

loadGeoJson(url[, options, callback])
Parameters:
url: string
options: Data.GeoJsonOptions optional
callback: function(Array) optional
Return Value: None
Loads GeoJSON from a URL, and adds the features to the collection.

NOTE: The GeoJSON is fetched using XHR, and may not work cross-domain. If you have issues, we recommend you fetch the GeoJSON using your choice of AJAX library, and then call addGeoJson().