JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    
    <head>
        <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>
        <title>Creating and Using an InfoBox</title>
    </head>
    
    <body style="padding:1em">
        <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;"></div>
    </body>

</html>

JavaScript

///////////////////////// Affichage de la carte ///////////////////////////////////////////////////////////////////////////

 (function showMap() {
     document.getElementById("map").style.display = "block";
     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

     map = new google.maps.Map(document.getElementById("map"), mapOptions);

     //navigator.geolocation.getCurrentPosition(showPosition);

     ///////////




     function initMarkers(map, markers) {

         var newMarkers = [],
             marker;

         for (var i = 0; i < markers.length; i++) {
             /*
          var id = markers[i].getAttribute("id");
	      var nom = markers[i].getAttribute("pseudo");
	      var avatar = markers[i].getAttribute("avatar");
          var ville = markers[i].getAttribute("ville");
	      var zipcode = markers[i].getAttribute("zipcode");
	      var pays = markers[i].getAttribute("pays");
          var groupe = markers[i].getAttribute("groupe");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html =  '<a href="profil.php?ID='+ id +
                      '" style="color: rgba(0,0,0,0.8)">'+
                      '<div style="text-align: left; font-family: arial; font-size: 12px;">'+
		  			  '<img src="http://localhost:8888/mobile/photos/avatars/' + avatar + 
                      '" class="avatar" alt="avatar" style="margin: 0 10px 0 0;">' +
		  				"<b>" + nom + "</b> <br/>" +...