JSFiddle - React, Tailwind, and code Playground

by OmarIsComing

HTML

<div id='map'></div>

  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDVBU8xYg4ulXg3HkO7hMjEPKTLVpsUgh0"></script>

CSS

#map {
  height: 600px;
}

JavaScript

function busMaps() {
  var infowindow = new google.maps.InfoWindow();

  var snap_path = [];
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: {lat: 51.954807, lng: -1.318343},
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });


  myCoords = {
    route1: [
      new google.maps.LatLng(52.068903, -1.260588),
      new google.maps.LatLng(52.027057, -1.149292),
      new google.maps.LatLng(51.996436, -1.162611),
      new google.maps.LatLng(51.997970, -1.209802),
      new google.maps.LatLng(51.994775, -1.251997),
      new google.maps.LatLng(52.017494, -1.309684),
      new google.maps.LatLng(51.981498, -1.321367),
      new google.maps.LatLng(51.954807, -1.318343),
      new google.maps.LatLng(51.924264, -1.324991),
      new google.maps.LatLng(51.854053, -1.317165),
      new google.maps.LatLng(51.816201, -1.279594)
    ],
    route2: [
      new google.maps.LatLng(51.904426, -1.059206),
      new google.maps.LatLng(51.896698, -1.150888),
      new google.maps.LatLng(51.872638, -1.185954),
      new google.maps.LatLng(51.846437, -1.210338),
      new google.maps.LatLng(51.824472, -1.239081),
      new google.maps.LatLng(51.796790, -1.182005),
      new google.maps.LatLng(51.793961, -1.175405),
      new google.maps.LatLng(51.757714, -1.221619),
      new google.maps.LatLng(51.760187, -1.224629),
      new google.maps.LatLng(51.748485, -1.245116),
      new google.maps.LatLng(51.767480, -1.259988),
      new google.maps.LatLng(51.769385, -1.262244),
      new google.maps.LatLng(51.773602, -1.259178),
      new google.maps.LatLng(51.769385, -1.262244)
    ]
  };
  var polys = new google.maps.Polyline({
    map: map,
    strokeColor: "#5555FF"
  });

  Object.keys(myCoords).forEach(function (key) {

    var service = new google.maps.DirectionsService();

    for (var j = 0; j < myCoords[key].length - 1; j++) {
      console.log(key, myCoords[key][j]);

      service.route( { origin: myCoords[key][j], destination:...