JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<table>
  <tr>
    <td>
      <div id="map-canvas"></div>
    </td>
    <td>
      <div id="directions-panel"></div>
    </td>
  </tr>
</table>

CSS

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

#map-canvas {
  height: 600px;
  width: 100%;
  vertical-align: top;
}

#directions-panel {
  width: 100%;
  height: 600px;
  position: relative;
}

table,
tbody,
tr {
  width: 100%;
  height: 100%;
}

td {
  width: 50%;
  height: 100%;
}

JavaScript

function calculate() {
  var request = {
    origin: origin,
    waypoints: waypts,
    destination: destination,
    travelMode: google.maps.TravelMode.DRIVING
  };
  directionsDisplay.setPanel(document.getElementById('directions-panel'));
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}

// global variables
var origin = null;
var destination = null;
var waypts = [];
var infowindow = new google.maps.InfoWindow();
var directionsDisplay = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();
var features_added = 0;

function initialize() {
  // Create a simple map.
  features = [];
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 4,
    center: {
      lat: -28,
      lng: 137.883
    }
  });
  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById('directions-panel'));
  google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
  });
  // process the loaded GeoJSON data.
  google.maps.event.addListener(map.data, 'addfeature', function(e) {
    if (e.feature.getGeometry().getType() === 'Point') {
      features_added++;
      map.setCenter(e.feature.getGeometry().get());
      // set the origin to the first point
      if (!origin) origin = e.feature.getGeometry().get();
      // set the destination to the second point
      else waypts.push({
        location: e.feature.getGeometry().get(),
        stopover: true
      });
      setTimeout(function() {
        features_added--;
        if (features_added <= 0) google.maps.event.trigger(map, 'data_idle');
      }, 500);
    }
  });
  google.maps.event.addListenerOnce(map, 'data_idle', function() {
    if (!destination) {
      destination = waypts.pop();
      destination = destination.location;
      // calculate the directions once both origin and destination...