JSFiddle - React, Tailwind, and code Playground

HTML

<div class="gmapa">
    <script>
        var infoCentros = [{
            "nombre": "El nombre 0",
            "texto": "Lorem ipsum sit met hamet amid0",
            "lugar": "Toledo",
            "coordinador": {
                "nombre": "Ana M\u00aa del Mar Alonso Fern\u00e1ndez",
                "email": "[email protected]"
            },
            "responsable": {
                "nombre": "Ana M\u00aa del Mar Alonso Fern\u00e1ndez",
                "email": "[email protected]"
            },
            "cordenadas": {
                "lat": 39.150544196,
                "long": -4.8019412125
            }
        }, {
            "nombre": "El nombre 1",
            "texto": "Lorem ipsum sit met hamet amid1",
            "lugar": "Toledo",
            "coordinador": {
                "nombre": "Ana M\u00aa del Mar Alonso Fern\u00e1ndez",
                "email": "[email protected]"
            },
            "responsable": {
                "nombre": "Ana M\u00aa del Mar Alonso Fern\u00e1ndez",
                "email": "[email protected]"
            },
            "cordenadas": {
                "lat": 39.150544196,
                "long": -4.7019412125
            }
        }, {
            "nombre": "El nombre 2",
            "texto": "Lorem ipsum sit met hamet amid2",
            "lugar": "Toledo",
            "coordinador": {
                "nombre": "Ana M\u00aa del Mar Alonso Fern\u00e1ndez",
                "email": "[email protected]"
            },
            "responsable": {
                "nombre": "Ana M\u00aa del Mar Alonso Fern\u00e1ndez",
                "email": "[email protected]"
            },
            "cordenadas": {
                "lat": 39.150544196,
                "long": -4.6019412125
            }
        }, {
            "nombre": "El nombre 3",
            "texto": "Lorem ipsum sit met hamet amid3",
            "lugar": "Toledo",
            "coordinador": {
                "nombre": "Ana M\u00aa del Mar Alonso...

SCSS

.gmapa {
    position:relative;
    padding-bottom:50%;
    #mapa {
        position:absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        
    }
    
}

JavaScript

$sescam_ventana = {
    init: function () {
        this.mapa();
    },
    mapa: function () {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = '//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=$sescam_ventana.mapSetup';
        document.body.appendChild(script);
    },
    mapSetup: function () {
        var styles = [
        /*
			{
				stylers: [
					{ saturation: -100 }
				]
			},{
				featureType: "road",
				elementType: "geometry",
				stylers: [
					{ visibility: "simplified" }
				]
			},{
				featureType: "poi.business",
				elementType: "labels",
				stylers: [
					{ visibility: "simplified" }
				]
			}
		*/
        ];
        var styledMap = new google.maps.StyledMapType(styles, {
            name: "SESCAM"
        }); //
        var mapOptions = {
            zoom: 16,
            scrollwheel: false,
            center: new google.maps.LatLng(39.6177074, 4.9725879),
            mapTypeControlOptions: {
                mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
            }
        }
        var handleMarkerClick = function (marker, index) {
            var $navigationMenu = jQuery('<div>');
            jQuery('.menu-item').each(function (i) {
                var $button = jQuery('<button>');
                $button.text(jQuery(this).text());
                $button.addClass(jQuery(this).data('class'));
                $navigationMenu.append($button);
            });
            if (typeof infowindow === 'undefined') {
                infowindow = new google.maps.InfoWindow({
                    height: 380
                });
            }
            var centro = infoCentros[index] //helpful data
            infowindow.setContent(
                '<div class="sescam-info-window">' +
                '<h3>' + centro.nombre + '</h3>' +
                '<p>' + centro.lugar + '</h3>' +
                '<p class="titulo">Coordinador</p>' +
            ...