Displaying and styling multiple polygons in google maps API - each from different external geojson files

Question

I'm trying to render multiple polygons in google maps that are each loaded from external individual geojson files that need to be styled differently.

There are some similar posts on the topic, but none that seem to address loading multiple independent external json files where they need to be styled differently.

My JS code is as follows for each polygon and which needs to be displayed on a map. I note here that I've tried using different approaches for display below(2 of many). Whilst they both still display they are both with black strokes and what appears to be a 50% fill opacity regardless of the values I set for stroke and fill.

// MSOA polygon
var pathmsoa = map.data.loadGeoJson("msoa.json");
        var msoaplot = {
            strokeColor: '#ffffff',
            strokeOpacity: 0.5,
            strokeWeight: 2,
            fillColor: '#800105',
            fillOpacity: 0.1,
            path: this.pathmsoa,
        }
msoa = new google.maps.Polygon(msoaplot);

// LSOA polygon
var pathlsoa = map.data.loadGeoJson("lsoa.json");
        var lsoa = new google.maps.Polygon({
            path: this.pathlsoa,
            strokeColor: '#ff0000',
            strokeOpacity: 0.5,
            strokeWeight: 1,
            fillColor: '#800105',
            fillOpacity: 0.8,
        });

Both the above polygons display as follows:

The only other additional point is that the console is returning an InvalidValueError: not an Array value, but I can't fathom why - given the examples I've followed from different sources and with different approaches.

Answer 1

One option to style your polygons from GeoJSON differently, is to create a different map.data object for each:

  var polygon1 = new google.maps.Data();
  polygon1.addGeoJson(geoJson1); // or loadGeoJson
  // style for polygon1
  // for options available see: 
  // 
 https://developers.google.com/maps/documentation/javascript/reference/data#Data.StyleOptions
  polygon1.setStyle({
    fillColor:"red", 
    fillOpacity: 0.5, 
    strokeColor:"green", 
    strokeWeight:2, 
    strokeOpacity:1.0
  })
  polygon1.setMap(map);

  var polygon2 = new google.maps.Data();
  polygon2.addGeoJson(geoJson2);
  // style for polygon2
  polygon2.setStyle({
    fillColor:"blue", 
    fillOpacity: 0.5, 
    strokeColor:"orange", 
    strokeWeight:2, 
    strokeOpacity:1.0
  });
  polygon2.setMap(map);

proof of concept fiddle

code snippet:

let map;
function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 14,
    center: { lat: 51.295, lng: -0.105 },
  });

  var polygon1 = new google.maps.Data();
  polygon1.addGeoJson(geoJson1);
  polygon1.setStyle({fillColor:"red", fillOpacity: 0.5, strokeColor:"green", strokeWeight:2, strokeOpacity:1.0})
  polygon1.setMap(map);
  var polygon2 = new google.maps.Data();
  polygon2.addGeoJson(geoJson2);
  polygon2.setStyle({fillColor:"blue", fillOpacity: 0.5, strokeColor:"orange", strokeWeight:2, strokeOpacity:1.0});
  polygon2.setMap(map);
  
  var geocoder = new google.maps.Geocoder();
  geocoder.geocode("Old Coulsdon")
}

function geocode(request) {
  console.log("request="+request)
  geocoder
    .geocode({address: request})
    .then((result) => {
      const { results } = result;
      if (!marker) marker = new google.maps.Marker();
      map.setCenter(results[0].geometry.location);
      marker.setPosition(results[0].geometry.location);
      marker.setMap(map);
      return results;
    })
    .catch((e) => {
      alert("Geocode was not successful for the following reason: " + e);
    });
}

window.initMap = initMap;

var geoJson1 = {"type": "FeatureCollection","name": "old coulsdon","crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },"features": [{ "type": "Feature", "properties": { }, "geometry": { "type": "Polygon", "coordinates": [ [ [-0.100356,51.29494], [-0.103918,51.294457],[-0.103661,51.291424],[-0.098479,51.291941],[-0.100356,51.29494],  ] ] } },]};
var geoJson2 = {"type": "FeatureCollection","name": "old coulsdon","crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },"features": [{ "type": "Feature", "properties": { }, "geometry": { "type": "Polygon", "coordinates": [ [ [-0.110356,51.29494], [-0.113918,51.294457],[-0.113661,51.291424],[-0.108479,51.291941],[-0.110356,51.29494],  ] ] } },]};

#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!doctype html>
<html>
  <head>
    <title>Data Layer: Polygon</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
    <div id="map"></div>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>