The map loads correctly, the markers in the addresses that come from the database, so far so good, then a check happens if it has a marker overlapping the other, inside a if , I want to change the color of the circle, exactly the values of strokeColor and fillColor within the condition.
I researched the Google Maps community and documentation but found nothing, just how to customize it at load time, and not how to change after the bookmarks already loaded on the map.
I noticed that the code is changing to red, but only the last address of the array has an error in that of of, there is another way to do this validation, because the hasIntersections () function. responds well by returning true or false, but as I said, only the last address that marks red, superimposed or not. The change should only be made if true.
<div id="mapa" style="height: 600px; width: 100%"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBkKQ9rh8Aimtsbn-Br6ppYwT8qbg6OCfw"><script>vargeocoder;varmap;varmarker;varimage='https://www.site.com/assets/images/mark-01.png';varlocations=[[.....],[.....],[.....]];varlocations2=[[.....],[.....],[.....]];Number.prototype.toRadians=function(){returnthis*(Math.PI/180.0);};functiondistance(lat0,long0,lat1,long1){//convertergrauspararadianosvarrlat0=lat0.toRadians();varrlong0=long0.toRadians();varrlat1=lat1.toRadians();varrlong1=long1.toRadians();vardeltaLat=(rlat1-rlat0);vardeltaLong=(rlong1-rlong0);vara=Math.pow(Math.sin(deltaLat/2),2)+Math.pow(Math.sin(deltaLong/2),2)*Math.cos(rlat0)*Math.cos(rlat1);return(2*Math.asin(Math.sqrt(a)))*6378137;}functionhasIntersections(circle0,circle1){varcenter0=circle0.getCenter();varcenter1=circle1.getCenter();varmaxDist=circle0.getRadius()+circle1.getRadius();varactualDist=distance(center0.lat(),center0.lng(),center1.lat(),center1.lng());returnmaxDist>=actualDist;}functioninitMap(){varlatlng=newgoogle.maps.LatLng(-84.568808,-100.418683);varoptions={zoom:4,center:latlng,mapTypeId:google.maps.MapTypeId.ROADMAP};map=newgoogle.maps.Map(document.getElementById("mapa"), options);
geocoder = new google.maps.Geocoder();
marker = new google.maps.Marker({
map: map,
zoom: 4
});
marker.setPosition(latlng);
setMarkers(map,locations);
setMarkers(map,locations2);
}
circles = [];
circles2 = [];
function setMarkers(map,locations) {
var marker = null;
var i = null;
for (i = 0; i < locations.length; i++) {
var loan = locations[i][0]
var lat = locations[i][1]
var long = locations[i][2]
var add = locations[i][3]
latlngset = new google.maps.LatLng(lat, long);
var marker = new google.maps.Marker({
map: map,
title: loan,
position: latlngset,
icon: image
});
var cityCircle = new google.maps.Circle({
map: map,
zoom: 4,
center: new google.maps.LatLng(lat, long),
radius: 750,
strokeColor: "#818c99",
fillColor: "#ffffff",
fillOpacity: 0.50
});
circles.push(cityCircle);
map.setCenter(marker.getPosition());
var content = "<h5>" + loan + '</h5>' + "<strong>Endereço:</strong> " + add;
var infowindow = new google.maps.InfoWindow()
google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){
return function() {
infowindow.setContent(content);
infowindow.open(map,marker);
};
})(marker,content,infowindow));
}
var marker = null;
var i = null;
for (i = 0; i < locations2.length; i++) {
var loan = locations2[i][0]
var lat = locations2[i][1]
var long = locations2[i][2]
var add = locations2[i][3]
latlngset = new google.maps.LatLng(lat, long);
var marker = new google.maps.Marker({
map: map,
title: loan,
position: latlngset,
icon: image
});
cityCircle = new google.maps.Circle({
map: map,
zoom: 6,
center: new google.maps.LatLng(lat, long),
radius: 750,
strokeColor: "#229A1F",
fillColor: "#49DA45",
fillOpacity: 0.50
});
circles2.push(cityCircle);
map.setCenter(marker.getPosition());
var content = "<h5>" + loan + '</h5>' + "<strong>Endereço:</strong> " + add;
var infowindow = new google.maps.InfoWindow()
google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){
return function() {
infowindow.setContent(content);
infowindow.open(map,marker);
};
})(marker,content,infowindow));]
}
for ( var circle1 of circles ) {
for ( var circle2 of circles2 ) {
if( hasIntersections(circle1, circle2) === true ) {
cityCircle.setOptions({
map: map,
zoom: 4,
center: new google.maps.LatLng(lat, long),
radius: 750,
fillColor: '#ba1e21',
strokeColor: '#ba1e21',
fillOpacity: 0.50
});
}
}
}
}
$(document).ready(function(){
$('body').attr('onload', 'initMap();');
});
</script>