Necessita de ajuda Geocodificação reversa para mensagem de acréscimo para GLatLng coordenar

Question

Meu código : http://jsbin.com/epuxu

Com a ajuda de SO, eu consegui obter endereços geocodificados e seus pinos de acordo colocados no mapa. O problema é que não posso selecionar as coordenadas, a fim de acrescentar uma div #message a ele no mapa porque eu não tenho as coordenadas mais.

Eu suspeito que eu estou fazendo algo errado nesta seção:

/* Message
--------------------*/
$("#message").appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE));

    function displayPoint(marker, index){
        $("#message").hide();

        var moveEnd = GEvent.addListener(map, "moveend", function(){
            var markerOffset = map.fromLatLngToDivPixel(marker.getLatLng());
            $("#message")
                .fadeIn()
                .css({ top:markerOffset.y, left:markerOffset.x });

            GEvent.removeListener(moveEnd);
        });
        map.panTo(marker.getLatLng());
    }

funciona quando eu uso o original coordenar código (este é comentada em jsbin):

var markers = [
    [39.729308,-121.854087],
    [39.0,-121.0]
    ];

    for (var i = 0; i < markers.length; i++) {
        var point = new GLatLng(markers[i][0], markers[i][1]);
        marker = new GMarker(point);
        map.addOverlay(marker);
        markers[i] = marker;
    }

mas preciso de ajuda fazê-la funcionar com este código atual:

function showAddress(markers) {
    if (geocoder) {
        geocoder.getLatLng(markers,
            function(point) {
                if (!point) {
                    alert(markers + " not found");
                } else {
                    marker = new GMarker(point);
                    map.addOverlay(marker);
                    markers[i] = marker;
                }
            }
        );
    }
}

for (var i = 0; i < markers.length; i++) {
    showAddress(markers[i]);
}

Eu estou meio novo para utilizar a API do Google Maps, portanto, qualquer visão sobre o que estou fazendo de errado seria muito útil. Graças =]

Answer 1

Eu tenho medo que havia algumas coisas erradas com o seu código: P

Eu tive que fazer um pouco de cirurgia plástica, mas aqui está o resultado: http://jsbin.com/atofe

A seguir, uma descrição das alterações que fiz. Deixe-me saber se você precisar de ajuda em nada a compreensão.

---

<script type="text/javascript">
  document.write(marker);
</script>

Eu tinha que comentar isso, uma vez que estava causando um erro. Eu estou supondo que você deixou lá por engano.

<script type="text/javascript">
  // document.write(marker);
</script>

---

var markers = [
  ["624 Nord Ave #20, Chico CA"],
  ["200 Nord Ave, Chico CA"],
  ["100 Nord Ave, Chico CA"],
  ["5th and Ivy, Chico CA"]
];

Uma vez que estamos usando endereços em vez de coordenadas, você não precisa (na verdade, você não porque ele só complica as coisas devem) encapsular cada corda em uma matriz. Eu também renomeou para addresses para torná-la mais clara e evitar conflitos com os marcadores de reais (mais sobre isso mais tarde).

var addresses = [
  "624 Nord Ave #20, Chico CA",
  "200 Nord Ave, Chico CA",
  "100 Nord Ave, Chico CA",
  "5th and Ivy, Chico CA"
];

---

function showAddress(markers) {
  if (geocoder) {
    geocoder.getLatLng(markers,
      function(point) {
        if (!point) {
          alert(markers + " not found");
        } else {
          marker = new GMarker(point);
          map.addOverlay(marker);
          markers[i] = marker;
        }
      }
    );
  }
}

for (var i = 0; i < markers.length; i++) {
  showAddress(markers[i]);
}


/* Add Markers to List
--------------------*/
$(markers).each(function(i,marker){
  $("<li>")
    .html(i+" - "+marker)
    .click(function(){
      displayPoint(marker, i);
    })
    .appendTo("#list");
  GEvent.addListener(marker, "click", function(){
    displayPoint(marker, i);
  });
});

Este é o lugar onde eu tive que fazer o maior número de alterações. Você fez um par de erros significativos aqui.

Primeiro, você re-utilizado a variável markers quando você deveria ter usado um novo nome. No processo, você escreveu sobre a matriz de strings de endereço e incompreendido onde as coisas foram armazenados (É por isso que rebatizou a matriz de seqüências de endereço para addresses).

Em segundo lugar, você tentou adicionar os marcadores à lista antes o geocoder realmente devolvido a sua resposta. Eu acho que você não percebeu que getLatLng é uma função assíncrona, então ele executa a função de retorno somente após o geocodificador retorna sua resposta. Desde que você não esperar a resposta, ele tornou a seção "adicionar marcadores a lista" inútil como os marcadores ainda não tinha sido recuperada.

Assim, para corrigir esses problemas me mudei a seção "Adicionar marcadores a lista" dentro da nova função handleGeocoderResponse. Isso garante que os marcadores são adicionados à lista apenas após a resposta geocodificador é devolvido. Eu também tive que usar um duplo fechamento uma vez que somos usando um loop juntamente com uma função assíncrona.

function handleGeocoderResponse(addr, j) {
  /*
    These are closures. We have to return a function
    that contains our Geocoder repsonse handling code
    in order to capture the values of "addr" and "j"
    as they were when they were passed in.  
  */
  return (function(point) {

    if (!point) {
      alert(addr + " not found");
    }
    else {
      var marker = new GMarker(point);
      map.addOverlay(marker);

      /* Add markers to list
      ------------------------*/
      $("<li>")
        .html(j + " - " + addr)
        .click(function(){
          displayPoint(marker, j);
        })
        .appendTo("#list");

      GEvent.addListener(marker, "click", function(){
        displayPoint(marker, j);
      });
    }

  });
}

for (var i = 0; i < addresses.length; i++) {
  if (geocoder) {
    var address = addresses[i];
    geocoder.getLatLng(
      address,
      handleGeocoderResponse(address, i)
    );
  }
}

Answer 2

Eu não tenho certeza o que exatamente você está procurando. Por "#message div", que quer dizer com um janela de informações como este ? Se assim for, você poderia fazer algo entre as linhas do seguinte (Observe a linha GEvent.addListener()):

/* Geocoded Addresses
--------------------*/
var markers = [
 ["624 Nord Ave #20, Chico CA"],
 ["200 Nord Ave, Chico CA"],
 ["100 Nord Ave, Chico CA"],
 ["5th and Ivy, Chico CA"]
];

function showAddress(markers) {
 if (geocoder) {
  geocoder.getLatLng(markers,
   function(point) {
    if (!point) {
     alert(markers + " not found");
    } else {
     marker = new GMarker(point);
     GEvent.addListener(marker, 'click', function() {
      marker.openInfoWindowHtml('<strong>Awesome place</strong><br>746 Blah street<br>1337 Awesomeville');
     });
     map.addOverlay(marker);
     markers[i] = marker;
    }
   }
  );
 }
}

for (var i = 0; i < markers.length; i++) {
 showAddress(markers[i]);
}

Experimente! , ir clicar em um marcador! :)