O mapa carrega corretamente, os marcadores nos endereços que vem do banco, até aí tudo bem, depois acontece uma verificação se tem um marcador sobrepondo o outro, dentro de um if, quero alterar a cor do circulo, exatamente os valores de strokeColor e fillColor dentro da condição.
Pesquisei na comunidade e na documentação do Google Maps mas não encontrei nada, somente como personalizar em tempo de carregamento, e não como alterar depois dos marcadores já carregados no mapa.
Notei que o código está mudando pra vermelho, só que apenas o último endereço do array, tem erro nesse for of, tem outro jeito de fazer essa validação, pois a função hasIntersections(). responde bem retornando true ou false, mas como disse, só o último endereço que marca vermelho, sobreposto ou não. Deveria ser feita a alteração apenas se retornasse 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>
var geocoder;
var map;
var marker;
var image = 'https://www.site.com/assets/images/mark-01.png';
var locations = [[.....],[.....],[.....]];
var locations2 = [[.....],[.....],[.....]];
Number.prototype.toRadians = function() {
return this * (Math.PI / 180.0);
};
function distance(lat0, long0, lat1, long1){
// converter graus para radianos
var rlat0 = lat0.toRadians();
var rlong0 = long0.toRadians();
var rlat1 = lat1.toRadians();
var rlong1 = long1.toRadians();
var deltaLat = (rlat1-rlat0);
var deltaLong = (rlong1-rlong0);
var a = 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;
}
function hasIntersections(circle0,circle1){
var center0 = circle0.getCenter();
var center1 = circle1.getCenter();
var maxDist = circle0.getRadius()+circle1.getRadius();
var actualDist = distance(center0.lat(),center0.lng(),center1.lat(),center1.lng());
return maxDist>=actualDist;
}
function initMap() {
var latlng = new google.maps.LatLng(-84.568808, -100.418683);
var options = {
zoom: 4,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.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>