0

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>
7
  • Adicione o seu código 14/08/2018 às 13:47
  • @AndersonHenrique Feito !
    – ElvisP
    14/08/2018 às 13:55
  • Só pra entender no caso ele carrega branco por exemplo, você quer que com alguma ação ele mude a cor? 14/08/2018 às 14:01
  • Não, o mapa carrega todo, com os marcadores nos endereços que vem do banco, até aí tudo bem, mas depois de verificar se tem um marcador sobrepondo o outro, dentro de um if, é onde quero aplicar a alteração do marcador para outra cor (o circulo), exatamente os valores de strokeColor e fillColor
    – ElvisP
    14/08/2018 às 14:04
  • @EliseuB. da uma olhada na minha resposta 14/08/2018 às 14:06

1 Resposta 1

1

Você pode alterar a cor através do método setOptions da classe Circle onde circle no código é o nome do seu objeto de circulo.

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

No seu código ficará assim:

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

Como descrito na documentação, você deve passar o objeto CircleOptions que contém as propriedades do circulo, como por exemplo: fillColor,fillOpacity,radius,strokeColor e outros(como você mesmo ja sabe pois esta no seu código).

Lembrando que a variável cityCircle está dentro do escopo da function setMarkers ou seja ela não vai ser acessível, então coloque ela junto com as variáveis geocoder ,map marker e image:

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

E la embaixo dentro da function setMarkers altere para:

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
});
6
  • Inseri o código completo, é extenso mas agora tem a condição que mencionei na pergunta.
    – ElvisP
    14/08/2018 às 14:41
  • @EliseuB. vou analisar ja respondo ;) 14/08/2018 às 14:42
  • 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.
    – ElvisP
    14/08/2018 às 16:12
  • Eliseu, estou com dificuldade de simular no meu PC... eu dei a resposta de como mudar a cor, mas não estou conseguindo resolver o problema do seu website :/ 15/08/2018 às 13:15
  • Recebo o erro: Google Maps JavaScript API error: RefererNotAllowedMapError developers.google.com/maps/documentation/javascript/… 15/08/2018 às 13:16

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .