JSFiddle - React, Tailwind, and code Playground

HTML

<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>

CSS

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

#map {
  height: 100%;
  float: left;
  width: 70%;
  height: 100%;
}

JavaScript

var waypts = [];
var gaps = newIncLength = 21;
var directionsService;
var directionsDisplay;
var passedData = {};
var timeout = 0;
var bounds;
var map;

function initMap() {
  bounds = new google.maps.LatLngBounds();
  directionsService = new google.maps.DirectionsService;
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: {
      lat: 41.85,
      lng: -87.65
    }
  });
  calculatewaypoint();
}


function calculatewaypoint() {
  for (var i = 0; i < data.length; i++) {
    waypts.push({
      location: parseFloat(data[i].lat) + ',' + parseFloat(data[i].long),
      stopover: false
    });
    if (data.length >= 21) {
      if (i == newIncLength) {
        newIncLength = newIncLength + gaps;
        (function(i, passedData, waypts, origin, dest) {
          var id = '';
          id = drawingRoute(passedData, timeout, waypts, origin, dest);
          timeout = timeout + 1000;
        })(i, passedData, waypts, waypts[0], waypts[waypts.length - 1]);
        waypts = [];
      }
      if (i == (data.length - 1)) {
        (function(i, passedData, waypts, origin, dest) {
          var id = '';
          id = drawingRoute(passedData, timeout, waypts, origin, dest);
          timeout = timeout + 1000;
        })(i, passedData, waypts, waypts[0], waypts[waypts.length - 1]);
        waypts = [];
      }
    }
  }
}

function drawingRoute(passedData, timeout, wayptss, origin, dest) {
  setTimeout(function() {
    directionsService.route({
      origin: parseFloat(orig.lat) + ',' + parseFloat(orig.long),
      destination: parseFloat(destine.lat) + ',' + parseFloat(destine.long),
      waypoints: wayptss,
      optimizeWaypoints: false,
      travelMode: 'DRIVING'
    }, function(response, status) {
      console.log(response)
      if (status === 'OK') {
        var directionsDisplay = new google.maps.DirectionsRenderer({preserveViewport: true});
        directionsDisplay.setMap(map);
        directionsDisplay.setDirections(response);
 ...