Data Layer: Dynamic Styling

by Lawrence Ross

HTML

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">


</script>

CSS

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

#map {
  height: 100%;
}

JavaScript

var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {
      lat: -28,
      lng: 137
    }
  });

  // Load GeoJSON.
  // map.data.loadGeoJson(
  //    'https://storage.googleapis.com/mapsdevsite/json/google.json');
  map.data.addGeoJson(geoJsonData);

  map.data.setStyle(function(feature) {
    var SD_NAME = feature.getProperty('SD_NAME');
    var color = "gray";
    if (SD_NAME == "Gee") {
      color = "green";
    }
    return {
      fillColor: color,
      strokeWeight: 1
    }
  });
}
  var geoJsonData = {
    "type": "FeatureCollection",
    "features": [{
      "type": "Feature",
      "properties": {
        "letter": "G",
        "color": "blue",
        "rank": "7",
        "ascii": "71",
        "SD_NAME": "Gee"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [123.61, -22.14],
            [122.38, -21.73],
            [121.06, -21.69],
            [119.66, -22.22],
            [119.00, -23.40],
            [118.65, -24.76],
            [118.43, -26.07],
            [118.78, -27.56],
            [119.22, -28.57],
            [120.23, -29.49],
            [121.77, -29.87],
            [123.57, -29.64],
            [124.45, -29.03],
            [124.71, -27.95],
            [124.80, -26.70],
            [124.80, -25.60],
            [123.61, -25.64],
            [122.56, -25.64],
            [121.72, -25.72],
            [121.81, -26.62],
            [121.86, -26.98],
            [122.60, -26.90],
            [123.57, -27.05],
            [123.57, -27.68],
            [123.35, -28.18],
            [122.51, -28.38],
            [121.77, -28.26],
            [121.02, -27.91],
            [120.49, -27.21],
            [120.14, -26.50],
            [120.10, -25.64],
            [120.27, -24.52],
            [120.67, -23.68],
            [121.72, -23.32],
            [122.43, -23.48],
            [123.04, -24.04],
            [124.54,...