JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&amp;ext=.js"></script>
<div id="map"></div>

CSS

html, body, #map {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}

JavaScript

(function () {
var map, mapOptions, styledMap, styles, marker, myLatLng;
styles = [
    {
        stylers: [
            { hue: '#00ffe6' },
            { saturation: -20 }
        ]
    },
    {
        featureType: 'road',
        elementType: 'geometry',
        stylers: [
            { lightness: 100 },
            { visibility: 'simplified' }
        ]
    },
    {
        featureType: 'road',
        elementType: 'labels',
        stylers: [{ visibility: 'on' }]
    }
];
myLatlng = new google.maps.LatLng(-33.882895, 151.204266);
styledMap = new google.maps.StyledMapType(styles, { name: 'Styled Map' });
marker = new google.maps.Marker({
    position: myLatlng,
    map: map

  });
mapOptions = {
    zoom: 15,
    center: myLatlng,
    mapTypeControlOptions: {
        mapTypeIds: [
            google.maps.MapTypeId.ROADMAP,
            'map_style'
        ]
    }
};



map = new google.maps.Map(document.getElementById('map'), mapOptions);
marker.setMap(map);
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
}.call(this));