JSFiddle - React, Tailwind, and code Playground

by amenadiel

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3&amp;libraries=geometry"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/routeboxer/src/RouteBoxer.js"></script>
<div id="panel">
   <b>start: </b>
   <input type="text" id="start" name="start" maxlength="30" onchange="calcRoute();" value="New York, NY"/>
   <b>end: </b>
   <input type="text" id="end" name="end" maxlength="30" onchange="calcRoute();" value="Los Angeles, CA"/>
</div> 
<div id="map"></div>

CSS

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

JavaScript

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map = null;
var boxpolys = null;
var routeBoxer = null;
var distance = null; // km
var gmarkers = [];
var infowindow = new google.maps.InfoWindow();

function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    var chicago = new google.maps.LatLng(41.891224, -87.638675);
    var mapOptions = {
        zoom: 7,
        center: chicago
    }

    map = new google.maps.Map(document.getElementById('map'), mapOptions);
    directionsDisplay.setMap(map);
    routeBoxer = new RouteBoxer();

    /* === markers === */
    var locations = [
        ['1', 40.577651, -82.200443],
        ['2', 40.760976, -93.911868],
        ['3', 39.110017, -111.116458],
        ['4', 27.036116, -81.717045],
        ['5', 34.104058, -117.444583],
        ['6', 44.790790, -121.443607], ];

    var marker, i;

    for (i = 0; i < locations.length; i++) {
        var marker = new google.maps.Marker({
            // map: map,
            title: locations[i][0],
            position: new google.maps.LatLng(locations[i][1], locations[i][2])
            //visible: false,  //true for all, but hidden
            // icon: 'img/the_icon.png'
        });
        gmarkers.push(marker);
    }
    calcRoute();
}


function calcRoute() {
    // Clear any previous route boxes from the map
  clearBoxes();

  // Convert the distance to box around the route from miles to km
  distance = /* parseFloat(document.getElementById("distance").value) */ 20 * 1.609344;

    var start = document.getElementById('start').value;
    var end = document.getElementById('end').value;
    var request = {
        origin: start,
        destination: end,
        travelMode: google.maps.TravelMode.DRIVING
    };
    directionsService.route(request, function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
                  // Box...