JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>

<div id="map" style="width: 100%;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; height: 300px;border:1px solid #666;margin-bottom:1em;box-shadow: 0px 0px 10px #333;">
    ohh
</div>

JavaScript

// Create and return Google map
function createMap(){
    var mapOptions = {
         zoom: 12,
         minZoom: 3,
         center: new google.maps.LatLng(48.858169, 2.294422),
         mapTypeId: google.maps.MapTypeId.ROADMAP, //On indique qu'il s'agit d'une "carte routière"
         zoomControlOptions: {
             style: google.maps.ZoomControlStyle.LARGE,
             position: google.maps.ControlPosition.RIGHT_BOTTOM
         },
         panControl: false,
         mapTypeControl: false,
         streetViewControl: false
     }; // var mapOptions
    
    return new google.maps.Map(document.getElementById("map"), mapOptions);
}

// Extract and return data array (traitement fichier XML)
function extractData(){
    var data = [
        {id: 0, nom: "Tour Eiffel", point: {lat: 48.858169, lng: 2.294422}, groupe: "grp1"}, 
        {id: 1, nom: "Arc de Triomphe", point: {lat: 48.8738, lng: 2.295}, groupe: "grp2"}, 
        {id: 2, nom: "Montmartre", point: {lat: 48.8688547, lng: 2.3432932}, groupe: "grp2"}
    ]
    
    return data
}

// Create markers and infoboxes, return markers array
function createMarker(map, markers){
    var newMarkers = [], nbMarkers = markers.length;
    
    for (var i = 0; i < nbMarkers; i++) {
        var id = markers[i].id;
        var nom = markers[i].nom;
        var groupe = markers[i].groupe;
        var point = new google.maps.LatLng(parseFloat(markers[i].point.lat), parseFloat(markers[i].point.lng));
        var html = '<a href="" id="' + id + '" style="color: #fff">' +
            '<div style="text-align: left; font-family: arial; font-size: 12px;">' +
            '"<b>' + nom + '</b>"' +
            '</div>' +
            '</a>';
        var marker = new google.maps.Marker({map: map, draggable: true, position: point, visible: true});

        // infobox
        boxText = document.createElement("div");
        boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background:#333; " +
                          ...