JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map-canvas"></div>
CSS
html, body, #map-canvas { height: 100%; margin: 0; }
JavaScript
function initMap() {
var styles = [{
featureType: "landscape",
elementType: "geometry.fill",
stylers: [{
color: "#ffffff"
}]
}, {
featureType: "landscape.natural.terrain",
elementType: "geometry.fill",
stylers: [{
color: "#000000"
}]
}, {
featureType: "poi",
elementType: "geometry.fill",
stylers: [{
color: "#eeeeee"
}]
}, {
featureType: "administrative",
elementType: "labels.text.fill",
stylers: [{
color: "#2ec3f3"
}]
}, {
featureType: "road.arterial",
elementType: "geometry.fill",
stylers: [{
color: "#eeeeee"
}]
}, {
featureType: "road.arterial",
elementType: "geometry.stroke",
stylers: [{
color: "#cccccc"
}]
}, {
featureType: "road",
elementType: "labels.text.fill",
stylers: [{
color: "#666666"
}]
}, {
featureType: "road",
elementType: "labels.text.stroke",
stylers: [{
color: "#ffffff"
}]
}, {
featureType: "road.highway",
elementType: "geometry.fill",
stylers: [{
color: "#bbbbbb"
}]
}, {
featureType: "road.highway",
elementType: "geometry.stroke",
stylers: [{
color: "#dddddd"
}]
}, {
featureType: "road.local",
elementType: "geometry.fill",
stylers: [{
color: "#e5e5e5"
}]
}, {
featureType: "water",
elementType: "geometry.fill",
stylers: [{
visibility: "off"
}]
}, {
featureType: "poi.business",
elementType: "labels.icon",
stylers: [{
visibility: "off"
}]
}, {
featureType: "poi.school",
elementType: "labels.icon",
stylers:...