JSFiddle - React, Tailwind, and code Playground

by josangel555

HTML

For Zoomed out mode

JavaScript

// http://googlemaps.github.io/js-samples/styledmaps/wizard/index.html
//https://developers.google.com/maps/documentation/javascript/reference#MapTypeStyleFeatureType
/*
water color
water label off
admin province, on
admin rest off
admin province color, country color [text and stroke]
road off



*/


[
  {
    "featureType": "administrative.land_parcel",
    "stylers": [
      { "visibility": "simplified" }
    ]
  },{
    "featureType": "landscape",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "road",
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "water",
    "stylers": [
      { "hue": "#00ffdd" },
      { "gamma": 1 },
      { "visibility": "on" },
      { "saturation": -77 },
      { "lightness": -87 }
    ]
  },{
    "featureType": "poi",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "administrative.country",
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "landscape",
    "elementType": "geometry.fill",
    "stylers": [
      { "hue": "#00fff7" },
      { "saturation": -56 },
      { "lightness": -2 },
      { "gamma": 3.25 },
      { "visibility": "on" }
    ]
  },{
    "featureType": "administrative",
    "stylers": [
      { "hue": "#00ffd5" },
      { "gamma": 0.94 },
      { "saturation": 24 },
      { "visibility": "on" }
    ]
  }
]