JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head></head>
<body>
<div id="rec-map" style="width:100%;height:900px;"></div>
<script type="text/javascript">

                    var lines = [];
                    var resultLine = new Array();
                    var polyLineArray = new Array();
                    var locations = new Array();
                    var markers = new Array();
                    var markers_general = new Array();
                    var markersKmArray = new Array();
                    var map = "";


                    window.google.load('visualization', '1', {packages: ['columnchart']});

                    function initMap() {
                        var splitCoord = new Array();
                        var result = new Array();
                        var result_general = new Array();
                        var elevation_array = new Array();
                        var elevation_gpx_array = new Array();
                        var src = "http://c5k.es/media/";
                        var pdis = [["Salida absoluta 5km", "43.3849397417073", "-8.402817547330983", "ico-salida.svg", "#cccccc", "#000000", "SALIDA", "False", 1127], ["Meta absoluta 5km", "43.36925719869608", "-8.415293354330743", "ico-meta.svg", "#cccccc", "#000000", "META", "False", 1126]];
                        var recorridos_json = [{"nombre": "Absoluta", "id": 220, "evento": 1902}, {"nombre": "SUB10 (2010-2011)", "id": 230, "evento": 1902}, {"nombre": "SUB12 (2008-2009)", "id": 231, "evento": 1902}, {"nombre": "SUB14(06-07)/SUB16(04-05)", "id": 233, "evento": 1902}];
                        var lines_json = [{'recorrido': '220', 'color': 'RED', 'id': '343', 'nombre': 'Recorrido'}];
                        var resultLine = [{"sector": false, "repeticiones": 1, "coords":...