JSFiddle - React, Tailwind, and code Playground

by miecz kwo

HTML

<!DOCTYPE html> 
<html> 
  <head> 
    <title>ZigZagged Directions Example</title> 

    <meta charset="UTF-8"> 
    <style type="text/css"> 
      html, body, #map_canvas {
        margin: 0;
        padding: 0;
        height: 100%;
      }
    </style> 
    <script type="text/javascript"
        src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript"> 
      var map;
      function initialize() {

        // map options
        var myOptions = {
          zoom: 8,
          center: new google.maps.LatLng(-34.397, 150.644),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        // the map
        map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

        // directions service
        directionsService = new google.maps.DirectionsService();

        // Define our origin position, the start of our trip.
        originPosition = new google.maps.LatLng('37.66258', '-121.87058');

        // Define 8 waypoints to place between the origin and the destination
        waypoint1 = new google.maps.LatLng('37.65638', '-121.87750');
        waypoint2 = new google.maps.LatLng('37.64333', '-121.88174');
        waypoint3 = new google.maps.LatLng('37.63676', '-121.88447');
        waypoint4 = new google.maps.LatLng('37.60746', '-121.87343');
        waypoint5 = new google.maps.LatLng('37.57868', '-121.87702');
        waypoint6 = new google.maps.LatLng('37.56368', '-121.90382');
        waypoint7 = new google.maps.LatLng('37.54175', '-121.92334');
        waypoint8 = new google.maps.LatLng('37.51806', '-121.94201');

        // push the waypoints defined above into an array
        wayPointArray = new Array();
    wayPointArray.push({location: waypoint1, stopover: false});
    wayPointArray.push({location: waypoint2, stopover: false});
    wayPointArray.push({location: waypoint3, stopover: false});
    wayPointArray.push({location: waypoint4, stopover: false});
   ...