JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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

JavaScript

function initialize() {
    var infos = [];
    var locations = [
        ['Marker 1', 54.08655, 13.39234, 2],
        ['Marker 2', 53.56783, 13.27793, 1]
    ];

    var map = new google.maps.Map(document.getElementById('map-canvas'), {
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL
        }

    });

    var bounds = new google.maps.LatLngBounds();

    for (i = 0; i < locations.length; i++) {
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map,
            content: locations[i][0]
        });
        var infowindow = new google.maps.InfoWindow();
        google.maps.event.addListener(marker, 'click', (function (marker, i, infowindow) {
            return function () {
                console.log('Klick! Marker=' + this.content);
                infowindow.setContent(this.content);
                infowindow.open(map, this);
            };
        })(marker, i, infowindow));
        bounds.extend(marker.position);

        google.maps.event.trigger(marker, 'click');
    }

    map.fitBounds(bounds);

    var listener = google.maps.event.addListenerOnce(map, "idle", function () {
        map.setZoom(8);
    });
}

function loadScript() {
    var script = document.createElement('script');
    script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' + 'callback=initialize';
    document.body.appendChild(script);
}

window.onload = loadScript;