Changing color of a circle of a marker - Google Maps v3

Question

The map correctly loads, the markers in the addresses coming from the bank, until then everything well, then happens a check if it has a marker superimposing 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 searched the community and Google Maps documentation but found nothing, only how to customize 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, there is error in this for, there is another way to do this validation, because the function hasIntersections(). responds well by returning true or false, but as I said, only the last address that marks red, overlaid or not. The change should only be made if it returns 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>

Answer 1

You can change the color through the method setOptions class Circle where circle in the code is the name of its circle object.

circle.setOptions({
    fillColor: '#F5F5F5',
    strokeColor: '#528BE2'
});

Your code will look like this:

cityCircle.setOptions({
    fillColor: '#F5F5F5',
    strokeColor: '#528BE2'
});

As described in documentation, you must pass the object Circleoptions which contains the properties of the circle, for example: fillColor, fillOpacity, Radius, strokeColor and others (as you already know yourself because it is in your code).

Remembering that the variable cityCircle is within the scope of Function setMarkers ie it will not be accessible, so put it together with the variables geocoder ,map Marker and image:

var geocoder;
var map;
var marker;
var image = 'https://www.site.com/assets/images/mark-01.png'; 
var cityCircle;

And down there inside the Function setMarkers change to:

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
});