Change color of a marker circle - Google Maps v3

0

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>
    
asked by anonymous 14.08.2018 / 15:39

1 answer

1

You can change the color using the setOptions method of class Circle where circle in code is the name of your 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 CircleOptions that contains circle properties, such as fillColor, fillOpacity, radius, strokeColor, and others (as you yourself already know as it is in your code).

Remembering that the variable cityCircle is within the scope of the function setMarkers or 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 below the inside 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
});
    
14.08.2018 / 16:06