adding address in list of google marker

Question

good afternoon! I have a list of markers that is plotted on google maps, I need to show the address when I click on the marker Using the code below it shows the address of the last marker

function updatePontos() { 

        markers = new Array();          
        var v = '#{TrPontoTaxiSB.pontosListTaxi}'.replace("[","").replace("]","");                          
        var arr2 = v.split(",");

        for (val2 of arr2) {
            if (val2 != "") {
                var pts = val2.split(";");
                var infowindow = new google.maps.InfoWindow();
                var marker = new google.maps.Marker({
                    position: {lat: parseFloat(pts[1]), lng: parseFloat(pts[2])},
                    draggable: false,
                    raiseOnDrag: false,
                    map: map,                       
                    title: pts[0],
                    icon: '#{facesContext.externalContext.requestContextPath}/resources/images/taxi_50.png'
                });
                google.maps.event.addListener(marker, 'click', function() {
                      infowindow.setContent(pts[4] + " <br />" + pts[5] + " <br />" + pts[6]);
                      infowindow.open(map, this);
                    });                                     
                markers.push(marker);                   
            }
        }                       
    }

Does anyone know how to show the address according to the selected marker?

see [Google Maps JS API v3 - Simple Multiple Marker Example](https://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example), accepted answer solves your issue with function closure. — geocodezip, Jul 14 '17 at 20:14

MySidesTheyAreGone · Answer 1 · 2017-07-14T20:25:10.437

First of all, it looks like you don't now what the scope of "var" is. Here's something that should help you.

You need to understand what "infowindow" points to in your code when the event listener is executed. Since the variable is not re-declared at every iteration of the loop, it will always point to the last infoWindow you created, no matter what marker you click on. You also need to take advantage of the fact that inside the even listener "this" points to the marker the user clicked.

To solve the actual problem, you need to understand closures too.

This is the first solution that came to my mind, there's probably a more elegant solution but at least this one has some resemblance to your own code. I can't test it, so let me know if and how it fails.

function updatePontos() { 

    var markers = [];
    var infowindows = [];   
    var count = 0;       
    var v = '#{TrPontoTaxiSB.pontosListTaxi}'.replace("[","").replace("]","");                          
    var arr2 = v.split(",");
    var pts;

    for (val2 of arr2) {
        if (val2 != "") {
            pts = val2.split(";");
            infowindows[count] = new google.maps.InfoWindow();
            infowindows[count].setContent(pts[4] + " <br />" + pts[5] + " <br />" + pts[6]);
            markers[count] = new google.maps.Marker({
                position: {lat: parseFloat(pts[1]), lng: parseFloat(pts[2])},
                draggable: false,
                raiseOnDrag: false,
                map: map,
                title: pts[0],
                icon: '#{facesContext.externalContext.requestContextPath}/resources/images/taxi_50.png'
            });
            markers[count]._infoWindowIndex = count;
            google.maps.event.addListener(markers[count], 'click', function() {
              infowindows[this._infoWindowIndex].open(map, this);
            });
        }
        count++;
    }                       
}

edit: changed leftover references to marker to markers[count]

Thank you very much! It worked, I just had to change the 'markers [count]' to 'var marker' My problem now is that the balloons do not close. I need to find a way to close the last open balloon. — Gustavo Menezes, Jul 14 '17 at 19:56
Sorry, it didn't work becasue I left some references to "marker" when I should have changed them to "markers[count]". I updated the code. — MySidesTheyAreGone, Jul 14 '17 at 20:27
Look, I'll be brutal; if you think using "var marker" in my code above was a valid fix, you don't have what it takes to do this. You need to study JS more, starting from the pages I linked. Sorry for being so blunt. — MySidesTheyAreGone, Jul 14 '17 at 20:28

adding address in list of google marker

1 Answers1