JSFiddle - React, Tailwind, and code Playground

by Mark

HTML

<!-- By Mark Cupito -->


<title>Complex styled maps</title>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>

        var map;
        var chicago = new google.maps.LatLng(39.10005, -84.51000);

        function initialize() {

            var roadAtlasStyles = [
  {
      "featureType": "road.highway",
      "elementType": "geometry",
      "stylers": [
        { "saturation": 0 },
        { "lightness": 0 },
        { "gamma": 0 },
        { "hue": "#005eff" },
        { "weight": 1.2 }
      ]
  }, {
      "featureType": "road.arterial",
      "elementType": "geometry",
      "stylers": [
        { "saturation": 0 },
        { "gamma": 1 },
        { "lightness": -24 },
        { "hue": "#005eff" },
        { "weight": 1.2 }
      ]
  }, {
      "featureType": "poi",
      "elementType": "geometry",
      "stylers": [
        { "saturation": 0 },
        { "hue": "#005eff" }
      ]
  }, {
      "featureType": "administrative",
      "stylers": [
        { "saturation": 0 },
        { "hue": "#005eff" }
      ]
  }, {
      "featureType": "transit",
      "stylers": [
        { "saturation": 0 },
        { "hue": "#005eff" }
      ]
  }, {
      "featureType": "water",
      "elementType": "geometry.fill",
      "stylers": [
        { "saturation": 0 },
        { "hue": "#005eff" }
      ]
  }, {
      "featureType": "road",
      "stylers": [
        { "saturation": 0 },
        { "hue": "#005eff" }
      ]
  }, {
      "featureType": "administrative",
      "stylers": [
        { "saturation": 100 },
        { "hue": "#FF8C39" }
      ]
  }, {
      "featureType": "landscape",
      "stylers": [
        { "saturation": 0 },
        { "hue": "#005eff" }
      ]
  }, {
      "featureType": "poi",
      "stylers": [
        { "saturation": 0 },
        { "hue": "#005eff" }
      ]
  }, {
      "featureType": "road.highway",
        "elementType": "labels",
      "stylers": [
        { "saturation": 100 },
  ...

CSS

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