JSFiddle - React, Tailwind, and code Playground

by kalmarsh80

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script>
<body>
    <div id="map" style="width: 300px; height: 300px;"></div>
</body>

JavaScript

var map = null;
var mapOptions = null;

function initialize(mapOptions) {
    map = new google.maps.Map(document.getElementById("map"), mapOptions);
}

function updateTheMap(lat, lng, radius) {
    // Point where to search  
    var searchArea = new google.maps.LatLng(lat, lng);

    // Draw a circle around the radius
    var circle = new google.maps.Circle({
        center: searchArea,
        //radius: parseFloat(document.getElementById("distance").value) * 1609.3, //convert miles to meters
        radius: radius,
        strokeColor: "#0000FF",
        strokeOpacity: 0.5,
        strokeWeight: 1,
        fillColor: "#0000FF",
        fillOpacity: 0.2
    });
    circle.setMap(map);
    var marker = new google.maps.Marker({
        icon: {
            path: google.maps.SymbolPath.CIRCLE,
            strokeColor: "white",
            scale: 5
        },
        position: searchArea,
        map: map
    });
    marker.setMap(map);
}
$(document).ready(function () {
    mapOptions = {
        center: new google.maps.LatLng(48.463150, -123.312172),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        zoom: 17,
        disableDefaultUI: true,
        zoomControl: false,
        scaleControl: false,
        scrollwheel: false,
        disableDoubleClickZoom: true,
        streetViewControl: false,
        panControl: false,
        overviewMapControl: false,
        keyboardShortcuts: false,
        draggable: false
    };
    initialize(mapOptions);


    updateTheMap(48.463150, -123.312172, 120);
    setTimeout(function () {
        mapOptions = {
            center: new google.maps.LatLng(48.464150, -123.313172),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            zoom: 14,
            disableDefaultUI: true,
            zoomControl: false,
            scaleControl: false,
            scrollwheel: false,
            disableDoubleClickZoom: true,
            streetViewControl: false,
            panControl: false,
            overviewMapControl:...