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>
<title>Travel modes in directions</title>
<form id="testForm">
  <select name="tripId">
    <option value=""></option>
  </select>
</form>
<div id="floating-panel">
  <b>Mode of Travel: </b>
  <select id="mode">
    <option value="DRIVING">Driving</option>
  </select>
</div>
<div id="map"></div>

CSS

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto', 'sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

JavaScript

var map;
var gmarkers = [];

function initMap() {
  var directionsDisplay = new google.maps.DirectionsRenderer({
    suppressMarkers: true
  });
  var directionsService = new google.maps.DirectionsService;
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 14,
    center: {
      lat: 12.9577129,
      lng: 77.6764937
    } // Starting Point Marathahalli
  });
  directionsDisplay.setMap(map);

  calculateAndDisplayRoute(directionsService, directionsDisplay);

}
google.maps.event.addDomListener(window, 'load', initMap);

function calculateAndDisplayRoute(directionsService, directionsDisplay) {
  var selectedMode = document.getElementById('mode').value;

  /* configure waypoints */
  var waypts = [];
  waypts.push({
    location: {
      lat: 12.9583665,
      lng: 77.6635659
    }, // HAL
    stopover: true
  }, {
    location: {
      lat: 12.9630167,
      lng: 77.6268656
    },
    stopover: true
  });

  directionsService.route({
    origin: {
      lat: 12.9577129,
      lng: 77.6764937
    }, // Haight.
    destination: {
      lat: 12.9868068,
      lng: 77.6070679
    }, // Ending Point Shivaji Nagar.
    travelMode: google.maps.TravelMode[selectedMode],
    waypoints: waypts
  }, function(response, status) {
    if (status == 'OK') {
      directionsDisplay.setDirections(response);
      RenderCustomDirections(response, status);
      console.log(response);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}

function RenderCustomDirections(response, status) {
  if (status == google.maps.DirectionsStatus.OK) {
    waypts = [];
    var bounds = new google.maps.LatLngBounds();
    var route = response.routes[0];
    startLocation = new Object();
    endLocation = new Object();

    var path = response.routes[0].overview_path;
    var legs = response.routes[0].legs;
    for (i = 0; i < legs.length; i++) {
      if (i == 0) {
        startLocation.latlng = legs[i].start_location;
       ...