Error Closure on a variable in loop of outer scope

Question

Error Closure on a variable in loop of outer scope

Navigation

#1 by (1 votes)

0

I'm developing an application where I get a list of companies and their location (latitude and longitude), so I have to plot all these locations in Google Maps , my problem and when trying to add a listner to capture the click in these markers and then open a infoWindow .

My code:

empresaMark;
empresasMarkers = [];

    for (var i = 0; i < empresas.length; i++) {

            empresaMark = new google.maps.Marker({
                position: { lat: Number(empresas[i].Latitude), lng: Number(empresas[i].Longitude) },
                map: map,
                title: empresas[i].Nome,
                icon :'../Content/imagens/Icones/Markers/building-marker.png'
            });
             empresaMark.info = new google.maps.InfoWindow({
                    content: '<IMG BORDER="0" class="img img-rounded" style="height:55px;width:55px;margin-right:10px;object-fit: cover" ALIGN="Left" SRC='
                        + empresaMark.LinkFoto + '>'
                        + empresaMark.Nome
             });

        empresaMark.addListener('click', function() {
                empresaMark.info.open(map, empresaMark);
            });
            empresaMarkers.push(empresaMark);
        }

The error occurs in the following part of the code in object empresaMark :

empresaMark.addListener('click', function() {
                empresaMark.info.open(map, empresaMark);
            });

The error is as follows:

Closure on a variable in loop of outer scope

I've been reading about Closure and I've seen some questions in stackoverflow but I could not fully understand, much less apply to my code if someone can explain to me what I need to do to fix this code and the usefulness of% how would i be grateful.

Some questions I've seen:

JavaScript closure inside loops - simple practical example

Javascript infamous Loop issue? [duplicate]

How to make object in loop in js with external value in javascript?

javascript

asked by anonymous 31.07.2017 / 15:34

1 answer

Tags in a table for each? Google maps: map does not render via call javascript / jQuery

score 1 · Accepted Answer

Here I answered a question similar to yours. One of the solutions is the same.

The problem in your code is that you are always accessing the companyMarke variable from the context in which your click handler was created. This variable, at the end of the loop execution, will always point to the last marker created in the , rather than the one in which the handler was created.

There are two ways to solve your problem.

One is the following (the details are in the link that I put above):

for (var i = 0; i < empresas.length; i++) {
  (function(empresa){
            var empresaMark = new google.maps.Marker({
            position: { lat: Number(empresa.Latitude), lng: Number(empresa.Longitude) },
            map: map,
            title: empresa.Nome,
            icon :'../Content/imagens/Icones/Markers/building-marker.png'
        });
         empresaMark.info = new google.maps.InfoWindow({
                content: '<IMG BORDER="0" class="img img-rounded" style="height:55px;width:55px;margin-right:10px;object-fit: cover" ALIGN="Left" SRC='
                    + empresaMark.LinkFoto + '>'
                    + empresaMark.Nome
         });

        empresaMark.addListener('click', function() {
            empresaMark.info.open(map, empresaMark);
        });
        empresaMarkers.push(empresaMark);
   }(empresas[i]))

}

The second would be to make a change at this point in the code:

 empresaMark.addListener('click', function() {
            empresaMark.info.open(map, empresaMark);
 });

To:

 empresaMark.addListener('click', function() {
      this.info.open(map, empresaMark);
 });

Taking into account that the marker itself is passed as context for the click handler.