JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places&ext=.js"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>
CSS
html, body, #map-canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
JavaScript
function initialize() {
var myLatlng = new google.maps.LatLng(29.950217, -90.075517);
// var centerPos = new google.maps.LatLng(29.952365, -90.075853);
var mapOptions = {
zoom: 15,
center: myLatlng,
styles: [{
"featureType": "administrative",
"elementType": "all",
"stylers": [{
"visibility": "on"
}, {
"lightness": 33
}]
}, {
"featureType": "administrative",
"elementType": "labels",
"stylers": [{
"saturation": "-100"
}]
}, {
"featureType": "administrative",
"elementType": "labels.text",
"stylers": [{
"gamma": "0.75"
}]
}, {
"featureType": "administrative.neighborhood",
"elementType": "labels.text.fill",
"stylers": [{
"lightness": "-37"
}]
}, {
"featureType": "landscape",
"elementType": "geometry",
"stylers": [{
"color": "#f9f9f9"
}]
}, {
"featureType": "landscape.man_made",
"elementType": "geometry",
"stylers": [{
"saturation": "-100"
}, {
"lightness": "40"
}, {
"visibility": "off"
}]
}, {
"featureType": "landscape.natural",
"elementType": "labels.text.fill",
"stylers": [{
"saturation": "-100"
}, {
"lightness": "-37"
}]
}, {
"featureType": "landscape.natural",
"elementType": "labels.text.stroke",
"stylers": [{
"saturation": "-100"
}, {
"lightness": "100"
}, {
"weight": "2"
}]
}, {
...