JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

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

CSS

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

JavaScript

var map = null;
var infowindow = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();

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


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

    var infoWindow = new google.maps.InfoWindow();
    map = new google.maps.Map(document.getElementById("map"), mapOptions);
    var lat_lng = new Array();

    var marker = new google.maps.Marker({
        position: map.getCenter(),
        map: map,
        draggable: true
    });
    bounds.extend(marker.getPosition());
    google.maps.event.addListener(marker, "click", function (evt) {
        infowindow.setContent("coord:" + marker.getPosition().toUrlValue(6));
        infowindow.open(map, marker);
    });
    for (var i = 0; i < markers.length; i++) {
        if ((i + 1) < markers.length) {
            var src = new google.maps.LatLng(parseFloat(markers[i].lat),
            parseFloat(markers[i].lng));
            createMarker(src);

            var des = new google.maps.LatLng(parseFloat(markers[i + 1].lat),
            parseFloat(markers[i + 1].lng));
            createMarker(des);
            //  poly.setPath(path);
            service.route({
                origin: src,
                destination: des,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            }, function (result, status) {
                if (status ==...