JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=geometry,places&amp;ext=.js"></script>
<div id="dvMap" style="width: 500px; height: 500px"></div>

JavaScript

var directionsDisplay = [];
var directionsService = [];
var map = null;
var bounds = null;

function calcRoute() {

  map = new google.maps.Map(document.getElementById('dvMap'), mapOptions);
  var msg ="41.077354,-81.511337:41.080647,-81.516579:41.077435,-81.521561:41.075253,-81.521492:41.074604,-81.520309:41.07415,-81.516335:41.073158,-81.514931:41.070534,-81.516563:41.066677,-81.516502:41.063942,-81.516502:41.06514,-81.513458:41.067383,-81.513412:41.069546,-81.513397:41.070778,-81.513382:41.072514,-81.512619:41.071106,-81.507614:41.073326,-81.506195";
  var input_msg=msg.split(":");
  var locations = new Array();      

  for (var i = 0; i < input_msg.length; i++) {
    var tmp_lat_lng =input_msg[i].split(",");
    locations.push(new google.maps.LatLng(tmp_lat_lng[0], tmp_lat_lng[1])); 
  }


  var mapOptions = {
  center: locations[0],
  zoom: 12,
  mapTypeId: google.maps.MapTypeId.ROADMAP  
  }

  var i =locations.length;
  var index =0;

  while(i !=0 ){

        if(i<3){
          var tmp_locations =new Array();
          for (var j=index;j<locations.length;j++) {
            tmp_locations.push(locations[index]);
          }
        drawRouteMap(tmp_locations); 
        i=0; 
        index=locations.length;  
       }

        if( i>= 3 && i<=10) {
           console.log("before :fun < 10: i value "+i+" index value"+index);
           var tmp_locations =new Array();
           for (var j=index;j<locations.length;j++) {
             tmp_locations.push(locations[j]);
           }
        drawRouteMap(tmp_locations);
        i=0;
        index=locations.length;
        console.log("after fun < 10: i value "+i+" index value"+index);
        }

        if(i > 10) {
        console.log("before :fun > 10: i value "+i+" index value"+index);
        var tmp_locations =new Array();
        for (var j=index;j<index+10;j++) {
         tmp_locations.push(locations[j]);
        }
        drawRouteMap(tmp_locations);
        i=i-10; 
        index =index+10;
       ...