Access nested geojson data using the Google Maps API

I am using the Google Maps API with external json which looks something like this:

  {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [
            0,
            0
          ]
      },
      "properties": {
        "category": {
          "color": "#E91E63",
          "stroke-width": 1,
          "stroke-opacity": 1
        },
      },
    },

I'm trying to get to 'colour' like this

        map.data.setStyle(function (feature) {
          var strokeColor = feature.getProperty('color');
            return {
              strokeColor: strokeColor,
              strokeWeight: 3
            }; 
        });

But as it's nested in category and I'm not sure how to get to it. Any ideas?

Solution

Get the category property, that returns an object with the properties defined in the GeoJSON:

Object
color: "#E91E63"
stroke-opacity: 1
stroke-width: 1

Get it in the style function like this:

map.data.setStyle(function(feature) {
  var category = feature.getProperty('category');
  var strokeColor = category.color;
  return {
    strokeColor: strokeColor,
    strokeWeight: 3
  };
});

proof of concept fiddle

code snippet:

"use strict";

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: {
      lat: 0,
      lng: 0
    }
  }); // NOTE: This uses cross-domain XHR, and may not work on older browsers.
  map.data.setStyle(function(feature) {
    var category = feature.getProperty('category');
    console.log(category);
    var strokeColor = category.color;
    return {
      strokeColor: strokeColor,
      strokeWeight: 3
    };
  });
  map.data.addGeoJson(geoJson);
}
var geoJson = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "geometry": {
      "type": "LineString",
      "coordinates": [
        [
          0,
          0
        ],
        [10,
          10
        ]
      ]
    },
    "properties": {
      "category": {
        "color": "#E91E63",
        "stroke-width": 1,
        "stroke-opacity": 1
      },
    },
  }]
};

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

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

<!DOCTYPE html>
<html>

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

<body>
  <div id="map"></div>
</body>

</html>