JSFiddle - React, Tailwind, and code Playground

by Brett

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;extension=.js"></script>
<div id="map"></div>

CSS

#map {
    height: 100%;
    width: 100%;
    left: 0;
    position: absolute;
    top: 0;
}

#menu {
    position: absolute;
    top: 10px;
    left: 10px;
}

JavaScript

jQuery(document).ready(function() {
    var map;

    var style = [{
        stylers: [{
            saturation: "-100"
        }, {
            lightness: "20"
        }]
    }, {
        featureType: "poi",
        stylers: [{
            visibility: "off"
        }]
    }, {
        featureType: "transit",
        stylers: [{
            visibility: "off"
        }]
    }, {
        featureType: "road",
        stylers: [{
            lightness: "50"
        }, {
            visibility: "on"
        }]
    }, {
        featureType: "landscape",
        stylers: [{
            lightness: "50"
        }]
    }]

    var options = {
        zoom: 16,
        center: new google.maps.LatLng(40.074025, -82.522643),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true
    };

    map = new google.maps.Map($('#map')[0], options);
    map.setOptions({
        styles: style
    });

});