JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<script type="text/javascript"
        src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <h1>you may modify the routes and copy them</h1>
    <div id="map_canvas" style="height:300px;width:300px;"></div>
    <div id="UI" style="visibility:hidden">
      <select>
        <option value="r0">route#1</option>
        <option value="r1">route#2</option>
      </select><input type="button" value="copy route to map2" onclick="fx(this.previousSibling.value)">
    </div>
    <div id="map_canvas2" style="height:300px;width:300px;"></div>

JavaScript

var my={directionsSVC:new google.maps.DirectionsService(),
              maps:{},
              routes:{}};
      
      /**
        * base-class     
        * @param points optional array array of lat+lng-values defining a route
        * @return object Route
        **/                     
      function Route(points)
      {
        this.origin       = null;
        this.destination  = null;
        this.waypoints    = [];
        if(points && points.length>1)
        {
          this.setPoints(points);
        }
        return this; 
      };

      /**
        *  draws route on a map 
        *              
        * @param map object google.maps.Map 
        * @return object Route
        **/                    
      Route.prototype.drawRoute = function(map)
      {
        var _this=this;
        my.directionsSVC.route(
          {'origin': this.origin,
           'destination': this.destination,
           'waypoints': this.waypoints,
           'travelMode': google.maps.DirectionsTravelMode.DRIVING
          },
          function(res,sts) 
          {
              if(sts==google.maps.DirectionsStatus.OK){
              if(!_this.directionsRenderer)
              {
                _this.directionsRenderer 
                 = new google.maps.DirectionsRenderer({ 'draggable':true }); 
                              }
                _this.directionsRenderer.setMap(map);
                _this.directionsRenderer.setDirections(res);
                
                google.maps.event.addListener(_this.directionsRenderer,
                                              'directions_changed',
                                              function()
                                              {
                                                _this.setPoints();
                                              }
                                              );
                          }   
          });
        return _this;
       };

      /**
        * sets map...