JSFiddle - React, Tailwind, and code Playground

by sarathsprakash

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;extension=.js"></script>
<div id="googleMap" style="width:500px;height:380px;"></div>

JavaScript

var dlat;
var dlng;
var lat1;
var lat2;
var lng1;
var lng2;
var mapProp = {
  center:new google.maps.LatLng(51.508742,-0.120850),
  zoom:10,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };
var map=new google.maps.Map(document.getElementById("googleMap")
  ,mapProp);
var circle =  new google.maps.Circle({
  center:new google.maps.LatLng(51.508742,-0.120850),
  radius:20000,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2,
  fillColor:"#0000FF",
  fillOpacity:0.2,
    draggable:true,
    editable:true
});
circle.setMap(map);
var marker=new google.maps.Marker({
  position:new google.maps.LatLng(51.508742,-0.120850),
    draggable:true
  });

marker.setMap(map);
google.maps.event.addListener(marker,'dragend',function(e) {
    var pos=e.latLng;
      dlat = pos.lat();
      dlng= pos.lng();
});
google.maps.event.addListener(circle,'radius_changed',function(e) {
     lat2=this.getBounds().getSouthWest().lat();
     lng2= this.getBounds().getSouthWest().lng();
     lat1 = this.getBounds().getNorthEast().lat();
     lng1= this.getBounds().getNorthEast().lng();
     if(dlat<=lat1 && dlat>=lat2)
     {
         if(dlng<=lng1 && dlng>=lng2)
             alert("hi");
     }
});
google.maps.event.addListener(circle,'center_changed',function() {
      alert(this.getCenter());
});