JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"></script>
<div id="map-canvas"></div>

CSS

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

JavaScript

var map;

function initialize() {
    // Create a simple map.
    map = new google.maps.Map(document.getElementById('map-canvas'), {
        zoom: 4,
        center: {
            lat: 52.030656,
            lng: 8.528849
        }
    });
    var mc = new MarkerClusterer(map);
    map.data.addListener('addfeature', function (e) {
        var geo = e.feature.getGeometry();
        if (geo.getType() === 'Point') {

            mc.addMarker(new google.maps.Marker({
                position: geo.get(),
                title: e.feature.getProperty('name')
            }));
            map.data.remove(e.feature);
        }
    })

    // Load a GeoJSON from the same server as our demo.
    map.data.addGeoJson({
        "type": "FeatureCollection",
            "features": [{
            "type": "Feature",
            "properties": {
                "name": "Bielefeld"
            },
                "geometry": {
                "type": "Point",
                "coordinates": [8.528849, 52.030656]
            }
        }, {
            "type": "Feature",
            "properties": {
                "name": "Herford"
            },
                "geometry": {
                "type": "Point",
                "coordinates": [8.676780, 52.118003]
            }
        }, {
            "type": "Feature",
            "properties": {
                "name": "Guetersloh"
            },
                "geometry": {
                "type": "Point",
                "coordinates": [8.383353, 51.902917]
            }
        }]
    });

}

google.maps.event.addDomListener(window, 'load', initialize);