JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;key=AIzaSyC_4S8_k_89e3E2cdjaXhILrMBnN-l4PXU"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id='map'></div>

CSS

#map{
    width:400px;
    height:400px;
}

JavaScript

$(function () {
    
    //The list of points to be connected
var markers = [
    {
        "title": 'Duero',
        "lat": '40.480243',
        "lng": '-3.866172',
        "description": '1'
    },
    {
        "title": 'Reyes Catolicos',
        "lat": '40.477997',
        "lng": '-3.870865',
        "description": '2'
    },
    {
        "title": 'Guadarrama',
        "lat": '40.478998',
        "lng": '-3.878755',
        "description": '3'
    }
    
];
   
   
    var map;

    var mapOptions = {
        center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
        zoom: 15	,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var path = new google.maps.MVCArray();
    var service = new google.maps.DirectionsService();

    var infoWindow = new google.maps.InfoWindow();
    var map = new google.maps.Map(document.getElementById("map"), mapOptions);
    var poly = new google.maps.Polyline({
        map: map,
        strokeColor: '#F3443C'
    });
    var lat_lng = new Array();
    
    path.push(new google.maps.LatLng(markers[0].lat, markers[0].lng));
    for (var i = 0; i < markers.length; i++) {
        if ((i + 1) < markers.length) {
            var src = new google.maps.LatLng(markers[i].lat, markers[i].lng);
            var des = new google.maps.LatLng(markers[i+1].lat, markers[i+1].lng);
            
            poly.setPath(path);
            service.route({
                origin: src,
                destination: des,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            }, function (result, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
                        path.push(result.routes[0].overview_path[i]);
                    }
                }
            });
        }
    }
    });