JSFiddle - React, Tailwind, and code Playground
JavaScript
var map, circle, circleOptions, marker, objects_markers, infowindow;
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.png'
});
marker.setMap(null);
circleOptions.center = event.latLng;
if (circle != undefined) {
circle.setMap(null);
}
circle = new google.maps.Circle(circleOptions);
circle.setMap(map);
//Маркеры объектов
objects_markers = [];
infowindow = [];
for (var i = 0; i < objects.length; i++) {
var ll = objects[i].coordinates.split(',');
var latlng = new google.maps.LatLng(ll[0], ll[1]);
var address = objects[i].address;
if (distHaversine(latlng, circleOptions.center) < radius) {
infowindow[i] = new google.maps.InfoWindow({
content: address
});
objects_markers[i] = new google.maps.Marker({
position:latlng,
clickable:true,
map: map,
title: 'title',
animation: google.maps.Animation.DROP,
visible: true,
icon:...