JSFiddle - React, Tailwind, and code Playground

by Abid Shaik

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;extension=.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<h2>Google Maps API Demo ABID</h2>
<input id="AddressTxt" type = "text" placeholder="Address, City, State" value="Raleigh, NC" /> 
<input id="BtnLocate" type = 'button' value="Locate" />
<div id="sliderContainer">
    <div id="slider"></div>
<span id="SliderVal"></span>
</div>    
<br/>


<div id="map"></div>

CSS

h2{
    color:blue; 
    text-align: center;
}
input{
    font-size: 24px;
    color: rgb(136, 27, 29);
}
input[type="text"]
{
    width: 400px;
}
#map{
    width: 750px;
    height: 400px;
}

#sliderContainer{
width:500px; 
padding: 10px;    
}
#SliderVal{
    float:right;
}

JavaScript

/*Google Maps Locate Address DEMO */
$(document).ready(function()
{ 

var map, geocoder, marker, infowindow, circle;
var addressTxt = $("#AddressTxt");     
var BtnLocate = $("#BtnLocate");  
var slider = $("#slider").slider();
var sliderVal = $("#SliderVal");     
var LatLng; 
    
var elevator;
var myOptions = {
    zoom: 16,
    center: new google.maps.LatLng(35.7795897, -78.63817870000003),
    mapTypeId: google.maps.MapTypeId.HYBRID 
};
var circleOptions = {
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map
    };    
    
map = new google.maps.Map($('#map')[0], myOptions);
geocoder = new google.maps.Geocoder(); 
infowindow = new google.maps.InfoWindow();
    
var markers = [];
BtnLocate.on("click", LocateOnMap); 
google.maps.event.addListener(map, 'click', function(event) {
    addMarker(event.latLng);
  });
 slider.on("slide", function(event, ui){
    if(circle)
    {
        var rad = ui.value * 10; 
        circle.set('radius', rad)
        sliderVal.html(rad + " meters"); 
    }
     
 });    
 
   
 function addMarker(location) {
   marker = new google.maps.Marker({
    position: location,
    map: map, 
    draggable: true
  });
  google.maps.event.addListener(marker, 'click', ShowMarkerLocation);
  markers.push(marker);
}
    
 function ShowMarkerLocation(event) {
     alert("Lat : " + event.latLng.lat() + ", Lng : " + event.latLng.lng()); 
}
    
 function LocateOnMap()
 {
     clearMarkers(); //Clear all previously added Markers
     clearCircles(); 
     var address =  addressTxt.val(); 
     geocoder.geocode({'address' : address }, function(result,status){
     if (status == google.maps.GeocoderStatus.OK) {
     map.setCenter(result[0].geometry.location);
     addMarker(result[0].geometry.location); 
     drawBoundary(result[0].geometry.location)   
     
     }
     else{
         alert(address + " Not found")
         }
     }); 

 }

function...