JSFiddle - React, Tailwind, and code Playground

by grant

HTML

<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script src="https://www.google.com/jsapi"></script>
<div style="width: 512px; text-align: center">Add points by clicking on the map or entering an address</div>
  <div id="map_canvas" style="border: 1px solid black; width:512px; height:400px"></div>
  <table style="width:512px;">
  <tr>
    <td>Address: <input type="text" id="address" size="15" onkeypress="return addressKeyHandler(event)"/></td>
    <td style="text-align: center">
      Mode of travel:
      <select id="mode" onchange="updateElevation()">
        <option value="direct">Direct</option>
        <option value="driving">Driving</option>
        <option value="bicycling">Bicycling</option>
        <option value="walking">Walking</option>
      </select>
    </td>
    <td style="text-align: right">
      <input type="button" value="Clear points" onclick="reset()"/>
    </td>
  </tr>
  </table>
  <table style="width:512px; font-size: small;">
    <tr>
      <td style="text-align: center"><a href="#" onclick="loadExample(1); return false">Mount Everest</a></td>
      <td style="text-align: center"><a href="#" onclick="loadExample(2); return false">Challenger Deep</a></td>
      <td style="text-align: center"><a href="#" onclick="loadExample(3); return false">Death Valley</a></td>
      <td style="text-align: center"><a href="#" onclick="loadExample(4); return false">Grand Canyon</a></td>
      <td style="text-align: center"><a href="#" onclick="loadExample(5); return false">Uluru</a></td>
    </tr>
  </table>
  <div id="chart_div" style="width:512px; height:200px" onmouseout="clearMouseMarker()"></div>

CSS

body {
  font-family: sans-serif
}
#map_canvas {
  margin: 5px 0px 5px 0px;
}

JavaScript

window.onload=function()
  {
  var map = null;
  var chart = null;
  
  var geocoderService = null;
  var elevationService = null;
  var directionsService = null;
  
  var mousemarker = null;
  var markers = [];
  var polyline = null;
  var elevations = null;
  
  var SAMPLES = 256;
  var examples = [{
    // Lombard St
    latlngs: [
      [37.801000, -122.426499],
      [37.802051, -122.419418],
      [37.802729, -122.413989]
    ],
    mapType: google.maps.MapTypeId.ROADMAP,
    travelMode: 'driving'
  },{
    // Mount Everest
    latlngs: [
      [27.973323, 86.908035],
      [28.020614, 86.960906]
    ],
    mapType: google.maps.MapTypeId.TERRAIN,
    travelMode: 'direct'
  },{
    // Challenger Deep
    latlngs: [
      [9.764009, 143.076632],
      [11.932658, 142.373507]
    ],
    mapType: google.maps.MapTypeId.SATELLITE,
    travelMode: 'direct'
  },{
    // Death Valley
    latlngs: [
      [37.040952, -117.300314],
      [35.896862, -116.654868],
      [35.972751, -116.270689]
    ],
    mapType: google.maps.MapTypeId.TERRAIN,
    travelMode: 'driving'
  },{
    // Grand Canyon
    latlngs: [
      [36.012196, -112.100348],
      [36.221866, -112.098975],
    ],
    mapType: google.maps.MapTypeId.TERRAIN,
    travelMode: 'direct'
  },{
    // Uluru
    latlngs: [
      [-25.34696, 131.022323],
      [-25.34060, 131.045927]
    ],
    mapType: google.maps.MapTypeId.SATELLITE,
    travelMode: 'direct'
  }];
  // Load the Visualization API and the piechart package.
  google.load("visualization", "1", {packages: ["columnchart"]});
  
  // Set a callback to run when the Google Visualization API is loaded.
  google.setOnLoadCallback(initialize);
  
  function initialize() {
    var myLatlng = new google.maps.LatLng(15, 0);
    var myOptions = {
      zoom: 1,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.TERRAIN
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    chart = new...