0

Estou desenvolvendo uma aplicação aonde recebo uma lista de empresas e suas localização (latitude e longitude), então eu tenho que plotar todas essas localizações no Google Maps, o meu problema e ao tentar adicionar um listner para capturar o click nesses markers e então abrir uma infoWindow.

Meu código:

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);
        }

O erro ocorre na seguinte parte do código no objeto empresaMark:

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

O erro é o seguinte :

Closure on a variable in loop of outer scope

Eu andei lendo sobre Closure e vi algumas perguntas no stackoverflow mas não consegui entender completamente, e muito menos aplicar ao meu código, caso alguém consiga me explicar o que preciso fazer para arrumar esse código e a utilidade das Closure eu ficaria grato.

Algumas perguntas que eu vi:

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?

1 Resposta 1

1

Aqui respondi uma pergunta parecida com a sua. Uma das soluções, inclusive, é a mesma.

O problema no seu código é que você sempre está acessando a variável empresaMarke do contexto em que seu click handler foi criado, esta variável, ao final da execução do loop, sempre apontará para o último marker criado no loop, e não aquele em que o handler foi criado.

Existem duas formas para resolver seu problema.

Uma é a seguinte(os detalhes estão no link que coloquei acima):

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]))

}

A segunda seria fazer uma modificação nesse ponto do código:

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

para:

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

Levando em conta que o próprio marker é passado como contexto para o click handler.

1
  • 1
    Funcionou perfeitamente, muito obrigado por explicação me ajudou muito. 31/07/2017 às 14:14

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 .