0

Estou trabalhando com a API do google maps para javascript e estou carregando marcadores que representam a posição de entregadores(as motinhas azuis) no mapa, ao clicar em um determinado entregador eu quero que o ícone dele mude, para dar o feedback de seleção ao usuário. Veja a imagem abaixo.

quando não há revendedor selecionado

Para carregar os dados por enquanto estou fazendo uma simulação via uma lista de objetos (depois estes dados serão puchados de um banco).

//classes de teste apagar depois 
        var Revenda = function (nomeFantasia, LatLng, icon) {
            this.nomeFantasia = nomeFantasia;
            this.LatLng = LatLng;
            this.icon = icon;
        }

        var Revendedor = function (nome, LatLng, Revenda, icon) {
            this.nome = nome;
            this.LatLng = LatLng;
            this.Revenda = Revenda;
            this.icon = icon;
        }

        var LatLng1 = {lat: -3.128518, lng: -59.965044}
        var LatLng2 = {lat: -3.120291, lng: -59.970366}
        var LatLng3 = {lat: -3.133789, lng: -59.980237}
        var LatLng4 = {lat: -3.125358, lng: -59.982636}
        var LatLng5 = {lat: -3.120291, lng: -59.981264}
        var LatLng6 = {lat: -3.127956, lng: -59.955013}

        var revenda1 = new Revenda("2 IRMÃOS", LatLng1, '../assets/mapa_revenda.png');
        var revenda2 = new Revenda("3 IRMÃOS", LatLng2, '../assets/mapa_revenda.png');
        var revenda3 = new Revenda("4 IRMÃOS", LatLng3, '../assets/mapa_revenda.png');

        revendasList = [
            revenda1,
            revenda2,
            revenda3
        ];

        var revendedor1 = new Revendedor("José", LatLng4, revenda1, '../assets/mapa_moto_sem_balao.png');
        var revendedor2 = new Revendedor("Maria", LatLng5, revenda2, '../assets/mapa_moto_sem_balao.png');
        var revendedor3 = new Revendedor("João", LatLng6, revenda3, '../assets/mapa_moto_sem_balao.png');

        revendedoresList = [
            revendedor1,
            revendedor2,
            revendedor3
        ];

como eu terei uma quantidade indeterminada de entregadores, eu uso um foreach para criar os marcadores dos entregadores e dentro do foreach adiciono os listeners de clique dos marcadores, e é aí que está o meu problema, ele só adiciona a troca de ícone na última instância percorrida, isso está bugando minha implementação pois mesmo que eu clique em um outro entregador qualquer ele muda o ícone do último entregador da lista, veja a imagem abaixo para entender melhor:

Eu cliquei no icone vermelho

Eu cliquei no icone vermelho e o icone do canto direito que ficou amarelo, o código do clique dos marcadores é este:

 //Dynamic listing of markers
markersList = [];

revendedoresList.forEach(function (revendedorItemList) {
    // The marker, positioned at Uluru
    markerDelivery = new google.maps.Marker({
        position: revendedorItemList.LatLng, 
        map: map,
        icon: revendedorItemList.icon,
        tooltipData: "ENTREGADOR: " + revendedorItemList.nome +
        "<br>REVENDA: " + revendedorItemList.Revenda.nomeFantasia
    });

    markersList.push(markerDelivery);

    google.maps.event.addListener(markerDelivery, 'click', function (e) {
        modalFooterViewControl("none", "flex");
        markerDelivery.setIcon('../assets/mapa_moto_sem_balao_selecionado.png');

    });
});

Já olhei a documentação do google e outras perguntas no StackOverFlow (tanto em pt-BR quando o em inglês) e não achei nada que se encaixe na minha necessidade, se puderem ajudar ficarei extremamente grato.

1 Resposta 1

0

Depois de bater cabeça alguns dias e de muitas pesquisas no stackoverflow da gringa consegui resolver o meu problema, o problema estava na forma como eu estava o usando o setIcon, através da instância do marcador recém criado. Para ser mais preciso neste trecho de código em especifico:

google.maps.event.addListener(markerDelivery, 'click', function (e) {
    modalFooterViewControl("none", "flex");
    markerDelivery.setIcon('../assets/mapa_moto_sem_balao_selecionado.png');
});

Para ficar correto deve-se fazer a chamada do método setIcon() usando a palavra reservada this, então o meu código ficou desta maneira:

google.maps.event.addListener(markerDelivery, 'click', function (e) {
    modalFooterViewControl("none", "flex");
    this.setIcon('../assets/mapa_moto_sem_balao_selecionado.png');
});

viu, simples né. entretanto é valido destacar que sempre que você usa o setIcon, ele reseta a posição dos Labels que estiverem no seu Marker, então tome cuidado com isso, mas para mudar o icone do mapa ao clicar isso será o suficiente. ;-)

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 .