The google maps marker does not change the icon correctly when clicked

Question

I’m working with the API of google maps for javascript and I’m carrying markers that represent the position of deliveries (the blue motilas) on the map, when I click on a particular deliverer I want his icon to change, to give the feedback of selection to the user. See the image below.

To load the data for now I am doing a simulation via a list of objects (then this data will be collected from a database).

//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
        ];

how I’ll have a indeterminate amount of deliveries, I use a foreach to create delivery markers and within the foreach add the listeners click the markers, and that’s where my problem is, it just add the icon change in the last instance covered, this is bugging my implementation because even if I click on any other delivery guy it changes the icon of the last delivery guy on the list, see the image below to better understand:

I clicked on the icon red and the icon in the right-hand corner yellow, the bookmark click code is this:

 //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');

    });
});

I have already looked at the google documentation and other questions in Stackoverflow (both in en-BR and in English) and I did not find anything that fits my need, if you can help I will be extremely grateful.

Answer 1

After hitting head a few days and many searches in the gringa stackoverflow I managed to solve my problem, the problem was in the way I was using the setIcon, through the newly created marker instance. To be more precise in this code snippet in specific:

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

To be correct, call the setIcon() method using the reserved word this, then my code got this way:

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

You see, simple right. however it is worth noting that whenever you use setIcon, it resets the position of the labels that are in your Marker, so be careful with this, but to change the icon of the map by clicking it will be enough. ;-)