JSFiddle - React, Tailwind, and code Playground
HTML
<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(41.878114, -87.629798);
function initialize() {
var roadAtlasStyles = [
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
{ "saturation": -100 },
{ "lightness": -8 },
{ "gamma": 1.18 }
]
}, {
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{ "saturation": -100 },
{ "gamma": 1 },
{ "lightness": -24 }
]
}, {
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{ "saturation": -100 }
]
}, {
"featureType": "administrative",
"stylers": [
{ "saturation": -100 }
]
}, {
"featureType": "transit",
"stylers": [
{ "saturation": -100 }
]
}, {
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [
{ "saturation": -100 }
]
}, {
"featureType": "road",
"stylers": [
{ "saturation": -100 }
]
}, {
"featureType": "administrative",
"stylers": [
{ "saturation": -100 }
]
}, {
"featureType": "landscape",
"stylers": [
{ "saturation": -100 }
]
}, {
"featureType": "poi",
"stylers": [
{ "saturation": -100 }
]
},
]
var mapOptions = {
zoom: 14,
center: chicago,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'usroadatlas']
}
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var styledMapOptions = {};
var usRoadMapType = new google.maps.StyledMapType(roadAtlasStyles, styledMapOptions);
map.mapTypes.set('usroadatlas', usRoadMapType);
map.setMapTypeId('usroadatlas');
}
google.maps.event.addDomListener(window, 'load',...
CSS
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}