JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&amp;ext=.js"></script>
<label>Start</label>&nbsp;
<input id="start" size="50" value="Letchworth" />
<br />"
<label>End</label>&nbsp;&nbsp;
<input id="end" size="50" value="Crawley" />
<input type="button" value="get directions" id="btn" onclick="requestDirections(document.getElementById('start').value, document.getElementById('end').value,0,true);" />
<div id="map_canvas"></div>

CSS

html, body, #map_canvas {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}

JavaScript

var directionDisplay;
var directionsRenderers = [];
var directionsService = new google.maps.DirectionsService();
var map;

function drawMap(midpoint) {
    var mid = midpoint.split(",");
    var start = new google.maps.LatLng(mid[0], mid[1]);
    var myOptions = {
        zoom: 7,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: start,
        mapTypeControl: false
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

function getRendererOptions(main_route) {
    var _colour;
    var _strokeWeight;
    var _strokeOpacity;
    var _suppressMarkers;
    if (main_route) {
        _colour = '#00458E';
        _strokeWeight = 4;
        _strokeOpacity = 1.0;
        _suppressMarkers = false;
    } else {
        _colour = '#ED1C24';
        _strokeWeight = 2;
        _strokeOpacity = 0.7;
        _suppressMarkers = false;
    }

    var polylineOptions = {
        strokeColor: _colour,
        strokeWeight: _strokeWeight,
        strokeOpacity: _strokeOpacity
    };

    var rendererOptions = {
        draggable: false,
        suppressMarkers: _suppressMarkers,
        polylineOptions: polylineOptions
    };

    return rendererOptions;
}

function renderDirections(result, rendererOptions, routeToDisplay) {
    var _colour;
    var _strokeWeight;
    var _strokeOpacity;
    var _suppressMarkers;

    if (routeToDisplay === 0) {
        _colour = '#00458E';
        _strokeWeight = 4;
        _strokeOpacity = 1.0;
        _suppressMarkers = false;
    } else {
        _colour = '#ED1C24';
        _strokeWeight = 4;
        _strokeOpacity = 0.7;
        _suppressMarkers = false;
    }

    // create new renderer object
    var directionsRenderer = new google.maps.DirectionsRenderer({
        draggable: false,
        suppressMarkers: _suppressMarkers,
        polylineOptions: {
            strokeColor: _colour,
            strokeWeight: _strokeWeight,
            strokeOpacity: _strokeOpacity
        }
    });
   ...