JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script>
<body onload="initialize();">
    <div id="map" style="width: 380px; height: 200px;"></div>Keyword:
    <input type="text" id="keyword" value="coffee" />
    <input type="submit" onclick="route()" />
     <h2>Results</h2>

    <ul id="places"></ul>
</body>

JavaScript

var map = null;
	    var boxpolys = null;
	    var directions = null;
	    var infowindow;
	    var service;
	    var markersArray = []; //marker array

	    // the following five functions are copied/adapted from an answer to this SO question:
	    // http://stackoverflow.com/questions/849211/shortest-distance-between-a-point-and-a-line-segment
	    function sqr(x) { return x * x }
		function dist2(v, w) { return sqr(v.x - w.x) + sqr(v.y - w.y) }
		function distToSegment2(p, v, w) {
		  return dist2(getClosestPoint(p,v,w));
		}
		function getClosestPoint( p, v, w ) {
		  var l2 = dist2(v, w);
		  if (l2 === 0) return v;	// line is actually a point; just return one ofthe two points
		  var t = ((p.x - v.x) * (w.x - v.x) + (p.y - v.y) * (w.y - v.y)) / l2;
		  // point is closest to v, return v
		  if (t < 0) return v;
		  // point is closest to w, return w
		  if (t > 1) return w;
		  // point is closets to some midpoint, return that
		  return { x: v.x + t * (w.x - v.x), y: v.y + t * (w.y - v.y) };
		}
		function distToSegment(p, v, w) { return Math.sqrt(distToSegmentSquared(p, v, w)); }


		// the following two functions are coppied/adapted from an answer to this SO question:
		// http://stackoverflow.com/questions/14560999/using-the-haversine-formula-in-javascript
		Number.prototype.toRad = function() {
		   return this * Math.PI / 180;
		}
		// geographic distance courtesy the haversine formula
		function geoDistanceKm(p1,p2) {
			var R = 6371; // km 
			var x1 = p2.lat()-p1.lat();
			var dLat = x1.toRad();  
			var x2 = p2.lng()-p1.lng();
			var dLon = x2.toRad();  
			var a = Math.sin(dLat/2) * Math.sin(dLat/2) + 
                Math.cos(p1.lat().toRad()) * Math.cos(p2.lat().toRad()) * 
                Math.sin(dLon/2) * Math.sin(dLon/2);  
			var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
			return R * c;
		}

	    function initialize() {
	        // Default the map view to the continental U.S.
	        var mapOptions = {
	            center: new...