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="frontpage-maps">
<div id="frontpage-maps-canvas"></div>
</div>

CSS

html, body, #frontpage-maps-canvas, #frontpage-maps {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}

JavaScript

function mapLoad() {
    console.log("map load...");

    // Google maps on front page
    function mapOption(zoom, type, draggable, scrollwheel) {
        return map_options = {
            center: new google.maps.LatLng(55.5661181, 9.4885967),
            zoom: zoom,
            panControl: false,
            zoomControl: false,
            scaleControl: false,
            navigationControl: false,
            mapTypeControl: false,
            overviewMapControl: false,
            streetViewControl: false,
            scrollwheel: scrollwheel,
            draggable: draggable,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            styles: [{
                "featureType": "landscape",
                "stylers": [{
                    "saturation": -100
                }, {
                    "lightness": 65
                }, {
                    "visibility": "on"
                }]
            }, {
                "featureType": "poi",
                "stylers": [{
                    "saturation": -100
                }, {
                    "lightness": 51
                }, {
                    "visibility": "off"
                }]
            }, {
                "featureType": "road.highway",
                "stylers": [{
                    "saturation": -100
                }, {
                    "visibility": "simplified"
                }]
            }, {
                "featureType": "road.arterial",
                "stylers": [{
                    "saturation": -100
                }, {
                    "lightness": 30
                }, {
                    "visibility": "on"
                }]
            }, {
                "featureType": "road.local",
                "stylers": [{
                    "saturation": -100
                }, {
                    "lightness": 40
                }, {
                    "visibility": "on"
                }]
            }, {
                "featureType": "transit",
      ...