JSFiddle - React, Tailwind, and code Playground

by Andrey_Vitovtov

HTML

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDzNIyGDobc2t0UwmhweJPEAQP6FLaNqRk&callback=initMap"></script>
 <div id="my_map" style="width:100%;height:600px"></div>

JavaScript

var map, circle, circleOptions, marker;
 
	function initialize() {
    var myLatlng = new google.maps.LatLng(55.7522200, 37.6155600);
    var myOptions = {
        zoom: 11,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
		styles: [
		{
		   "featureType": "water",
		   "stylers": [
		   { "color": "#00C3E9" },
		   { "saturation": 0 }
		   ]
		}
		],
		zoomControl: true,
		scrollwheel: false
    }
	
    map = new google.maps.Map(document.getElementById("my_map"), myOptions);
     
	 var radius = 10;
	 
    circleOptions = {
        fillColor:"#00C3E9",
        fillOpacity:0.5,
        strokeColor:"#F27900",
        strokeOpacity:1,
        strokeWeight:2,
        clickable:false,
		radius: radius*1000
	}
	
	google.maps.event.addListener(map, 'click', function(event) {
           if (marker != undefined) {
				marker.setMap(null);
            }
			
            marker = new google.maps.Marker({
                position:event.latLng,
                clickable:true,
				draggable: true,
				icon: 'images/beachflag_null.png'				
            });
			
            circleOptions.center = event.latLng;
			
			if (circle != undefined) {
                circle.setMap(null);
            }
			
			
			circle = new google.maps.Circle(circleOptions);
            circle.setMap(map);
			
			var latlng = new google.maps.LatLng(55.749860, 37.673670);
			if (distHaversine(latlng, circleOptions.center) < radius) {
				var infowindow1 = new google.maps.InfoWindow({
					content: "текст"
				});
				var marker1 = new google.maps.Marker({
					position:latlng,
					clickable:true,
					map: map,
					title: 'title',
					animation: google.maps.Animation.DROP,
					visible: true,
					icon: 'images/beachflag.png'
				});
				marker1.addListener('click', function() {
					infowindow1.open(map, marker1);
				});
				
			}
        
	}
	);
	
		google.maps.event.addListener(marker, "dragend", function(event) {
			var point =...