JSFiddle - React, Tailwind, and code Playground

by csornmo

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,
            
            backgroundColor: red
            
        }
    }

    var mapCanvas = document.getElementById('frontpage-maps-canvas');

    if (mapCanvas) {
        var map_obj = new google.maps.Map(mapCanvas, mapOption(16, 16, true, true));

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(55.56595843045612, 9.482338428497314)
        });

        marker.setMap(map_obj);

        google.maps.event.addDomListener(window, "resize", function() {
            var center = map_obj.getCenter();
            google.maps.event.trigger(map_obj, "resize");
            map_obj.setCenter(center);
        });
    };
}
google.maps.event.addDomListener(window, "load", mapLoad);