JSFiddle - React, Tailwind, and code Playground

by dipeshbeckham

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
<div id="map_canvas" style="height: 400px; width: 400px;" />
<table>
    <tr><td align='center'>
  	<div id="radius_entry">
	 Address: <input type="text" size="30" id="addressInput" name="address" />
	 Radius: <input type="text" size="5" id="radius" name="radius" value="10"/>
	 <select id="radius_unit">
	 	<option value="mi">Miles</option>
	 	<option value="km">KM</option>
	 	<option value="ft">Feet</option>
	 	<option value="m">Meters</option>
	 </select>
	 Circle: <input id="fill_color" style="width:60px;" class="color" value="aaaaaa" />
	 Border: <input id="stroke_color" style="width:60px;" class="color" value="000000" />
	 <br/>
	 <input type="submit" value="New Circle" onclick="showAddress();"/>
	 <input type="submit" value="Edit Circle" onclick="modifyActiveCircle();"/>
	 <input type="submit" value="Remove Circle" onclick="deleteActiveCircle();"/>

  	</div>
    <div id="info"></div>
</td></tr>
</table>

JavaScript

var geocoder = null,
    map = null,
    lastClickTime, clckTimeOut, circles = [],
    active_circle = null,
    loaded = !1;

function init() {
    var a = document.getElementById("map_canvas");
    map = new google.maps.Map(a, {
        center: new google.maps.LatLng(40, -84),
        zoom: 1,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    geocoder = new google.maps.Geocoder;
    google.maps.event.addListener(map, "click", function (a) {
        mapClick(a.latLng)
    });
    google.maps.event.addListener(map, "dblclick", function (a) {
        mapClick(a.latLng)
    });
    input_circles && createInitialCircles(map, input_circles);
    loaded = !0;
    saveLink()
}

function mapClick(a) {
    var b = (new Date).getTime();
    if (10 > b - lastClickTime) return 0;
    lastClickTime = b;
    clckTimeOut ? (window.clearTimeout(clckTimeOut), clckTimeOut = null) : clckTimeOut = window.setTimeout(function () {
        singleClick(a)
    }, 500)
}

function singleClick(a) {
    window.clearTimeout(clckTimeOut);
    clckTimeOut = null;
    createCircleTool(map, a, "Circle #" + circles.length)
}

function showAddress() {
    var a = $("input#addressInput").val();
    geocoder && geocoder.geocode({
        address: a
    }, function (b, f) {
        !b || f != google.maps.GeocoderStatus.OK ? alert(a + " not found") : (point = b[0].geometry.location, createCircleTool(map, point, a))
    })
}

function createCircleTool(a, b, f, e) {
    var c = new DistanceWidget(a, b, f, e);
    google.maps.event.addListener(c, "distance_changed", function () {
        displayInfo(c);
        setInputRadius(c)
    });
    google.maps.event.addListener(c, "position_changed", function () {
        displayInfo(c)
    });
    circles.push(c);
    active_circle && active_circle.set("active", !1);
    active_circle = c;
    saveLink();
    loaded && 1 == circles.length && zoomToAllCircles()
}

function createInitialCircles(a, b) {
    len = b.length;
    for (i = 0; i < len; i++)...