How to display polygon with Google Maps API? - json

Question

My Problem:
I'm trying to create a data layer polygon with the Google Maps API using a geoJSON of county borders in Ireland. The data is from Ordance Survey Ireland so I'm pretty sure the problem I'm seeing is in my code somewhere.
Basically the code loops through the geoJSON file adding longitude and latitude points and drawing a line between them. When one county is done it adds the full outline to the map and moves to the next county. As you can see the outlines jump around the map at some points but some are perfectly drawn along the border of the county.
I have tried loading the geoJSON directly from the source URL as detailed in the API documentation and also played with the looping in my code but to no avail. Any help would be greatly appreciated.
Here is a link to the geoJSON I am using: Counties GEOJSON
<script>
let map;
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 7,
center: {
lat: 53.411080,
lng: -7.710753
},
mapTypeId: "roadmap",
});
let counties = httpGet('https://jameswalshe.ie/countiesGEOJSON.geojson');
counties = JSON.parse(counties);
for (let s = 0; s < counties['features'].length; s++) {
var countiesCoords = [];
var countyName = "county" + s;
for (let i = 0; i < counties['features'][s]['geometry']['coordinates'].length; i++) {
for (let y = 0; y < counties['features'][s]['geometry']['coordinates'][i].length; y++) {
for (let z = 0; z < counties['features'][s]['geometry']['coordinates'][i][y].length; z++) {
countiesCoords.push({
lat: counties['features'][s]['geometry']['coordinates'][i][y][z][1],
lng: counties['features'][s]['geometry']['coordinates'][i][y][z][0]
});
}
}
}
countyName = new google.maps.Polygon({
paths: countiesCoords,
strokeColor: "rgb(0, 139, 63)",
strokeOpacity: 1,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0,
});
countyName.setMap(map);
}
};
</script>

Answer 1

I used the map.data.loadGeoJson('data.json'); method instead of loading from another domain.