Change the color of LineString GeoJSON based on another variable in Google Maps

Question

I am loading a GeoJson LineString feature into Google Maps API. Is there a way to color different parts of the line string differently based on the value of another variable, e.g. speed or road slope at each coordinate point?

Answer 1

If you have an array of colors (or an array of numbers you can translate into colors) which is the same size as your polyline, you can create a google.maps.Polyline for each segment of the GeoJSON LineString, eachgoogle.maps.Polyline can have its own color.

  // process the loaded GeoJSON data.
  google.maps.event.addListener(map.data, 'addfeature', function(e) {
    if (e.feature.getGeometry().getType() === 'GeometryCollection') {
      var geometry = e.feature.getGeometry().getArray();
      for (var i = 0; i < geometry.length; i++) {
        if (geometry[i].getType() === 'LineString') {
          var polyPath = geometry[i].getArray();
          for (var j = 0; j < polyPath.length - 1; j++) {
            new google.maps.Polyline({
              map: map,
              path: [polyPath[j], polyPath[j + 1]],
              strokeColor: colors[j % colors.length],
              strokeOpacity: 1,
            })
          }
        }
      }
    }
    map.data.setMap(null);
  });

proof of concept fiddle

function initialize() {
  // Create a simple map.
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 8,
    center: {
      lat: 37,
      lng: 134
    }
  });

  // data to determine colors of line segments.
  var colors = ["#FF0000", "#00FF00", "#0000FF"];
  // process the loaded GeoJSON data.
  google.maps.event.addListener(map.data, 'addfeature', function(e) {
    if (e.feature.getGeometry().getType() === 'GeometryCollection') {
      var geometry = e.feature.getGeometry().getArray();
      for (var i = 0; i < geometry.length; i++) {
        if (geometry[i].getType() === 'LineString') {
          var polyPath = geometry[i].getArray();
          for (var j = 0; j < polyPath.length - 1; j++) {
            new google.maps.Polyline({
              map: map,
              path: [polyPath[j], polyPath[j + 1]],
              strokeColor: colors[j % colors.length],
              strokeOpacity: 1,
            })
          }
        }
      }
    }
    map.data.setMap(null);
  });
  map.data.addGeoJson(data);
}
google.maps.event.addDomListener(window, 'load', initialize);
var data = {
  "type": "FeatureCollection",
  "created": "2014/07/08 03:00:55 GMT",
  "announced_date": "2017/07/10 03:00:55 GMT",
  "features": [{
    "type": "Feature",
    "properties": {
      "name": "n18",
      "analized_date": "2013/07/08 10:00:00 GMT"
    },
    "geometry": {
      "type": "GeometryCollection",
      "geometries": [{
        "type": "LineString",
        "coordinates": [
          [134.7, 37.3],
          [134.6, 37.1],
          [134.4, 37.1],
          [134.3, 36.9]
        ]
      }]
    }
  }]
};

html,
body,
#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px;
  width: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas"></div>