JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3&amp;amp;sensor=false"></script>
<div id="map"></div>

CSS

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

JavaScript

var map;
var directionsService;
var bounds = new google.maps.LatLngBounds();
var polyline1 = new google.maps.Polyline({
    path: [],
    strokeColor: "#DD71D8",
    strokeWeight: 1
});
var polyline2 = new google.maps.Polyline({
    path: [],
    strokeColor: "#0000ff",
    strokeWeight: 1
});
var polyline3 = new google.maps.Polyline({
    path: [],
    strokeColor: "#ff0000",
    strokeWeight: 8
});

function loadRoute1() {
    var request = {
        origin: new google.maps.LatLng(30.244517, -97.892271),
        destination: new google.maps.LatLng(30.244517, -97.892271),
        waypoints: [{
            location: new google.maps.LatLng(30.241532, -97.894202)
        }, {
            location: new google.maps.LatLng(30.239549, -97.894567)
        }],
        travelMode: google.maps.TravelMode.DRIVING
    };

    directionsService.route(request, function (result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            result.draggable = true;
            var renderer = new google.maps.DirectionsRenderer({
                draggable: true,
                polylineOptions: {
                    strokeColor: "#DD71D8",
                    strokeWeight: 1
                },
                map: map
            });
            var path = result.routes[0].overview_path;
            var legs = result.routes[0].legs;
            for (i = 0; i < legs.length; i++) {
                var steps = legs[i].steps;
                for (j = 0; j < steps.length; j++) {
                    var nextSegment = steps[j].path;
                    for (k = 0; k < nextSegment.length; k++) {
                        polyline1.getPath().push(nextSegment[k]);
                        bounds.extend(nextSegment[k]);
                    }
                }
            }
            // polyline1.setMap(map);
            if (polyline2.getPath().getLength() > 1) {
                getPolylineIntersection();
            }
            renderer.setDirections(result);
        }
   ...