Closure error on a variable in loop of Outer Scope

Question

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 on Google Maps, my problem and while trying to add a listner to capture the click on 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 the 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 saw some questions in stackoverflow but I couldn’t fully understand, let alone apply to my code, in case someone could explain to me what I need to do to fix this code and the usefulness of Closure I would be grateful.

Some questions I saw:

Javascript closure Inside loops - simple Practical example

Javascript infamous Loop Issue? [Uplicate]

How to make Object in loop in js with External value in javascript?

Answer 1

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

The problem with your code is that you are always accessing the business variable created in the loop, and not the one where Handler was created.

There are two ways to solve your problem.

One is the following (the details are in the link 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 modification at that point of the code:

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

for:

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

Taking into account that the Marketer itself is passed as context for the Handler click.