3

Estoy intentando usar geocododer para convertir datos de códigos postales en coordenadas. He instanciado la función dos veces para separar los marcadores (en un loop for) y el pinpoint principal. Una vez cargados los valores de todas las coordenadas, intento calcular la distancia entre cada marcador y el pinpoint principal.

El problema es que debido a que geocoder carga los valores de las coordenadas asíncronamente, muchas veces intenta hacer la operación final sin haber cargado algunas de las coordenadas, devolviendo NaN.

¿Hay alguna manera de forzar a la ultima operación a que se realice una vez se ha cargado todas las coordenadas?

Os dejo con el script.

<script>
    var map = new google.maps.Map(document.getElementById('map'), {
        scrollwheel: true,
        zoom: 14,
        disableDefaultUI: true,
        controls:false,
        styles: [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}]
    });
    var geocoder = new google.maps.Geocoder;
    geocodeAddress(geocoder, map);


    function geocodeAddress(geocoder, resultsMap) {
        var event = $('.event-location').text();
        var siteLoc = new Array();
        var siteLocs = $('.campsite-loc');
        siteLocs.each(function() {
            var siteLocation = $(this).text();
            siteLoc.push(siteLocation); 
        });
        var eventLat;
        var eventLng;
        var siteLat;
        var siteLng;

        geocoder.geocode({'address': event}, function(results, status) {
            if (status === google.maps.GeocoderStatus.OK) {
            resultsMap.setCenter(results[0].geometry.location);
            resultsMap.setZoom(15);
            var event = new google.maps.Marker({
                map: resultsMap,
                icon: '/assets/images/event.png',
                position: results[0].geometry.location
            });
            eventLat = results[0].geometry.location.lat();
            eventLng =  results[0].geometry.location.lng();
            } else {
            alert('Geocode was not successful for the following reason: ' + status);
            }

        });
        ffor (i=0; i < siteLoc.length; i++) {
        geocoder.geocode({'address': siteLoc[i]}, function(results, status) {
            if (status === google.maps.GeocoderStatus.OK) {
                var site = new google.maps.Marker({
                    map: resultsMap,
                    icon: '/assets/images/site1.png',
                    position: results[0].geometry.location
                });
                siteLat = results[0].geometry.location.lat();
                siteLng = results[0].geometry.location.lng();
                var x = eventLat;
                var y = eventLng;
                console.log(x,y,siteLat,siteLng);
                var distance = google.maps.geometry.spherical.computeDistanceBetween(new google.maps.LatLng(x,y), new google.maps.LatLng(siteLat,siteLng));
                var distanceKm = (distance/1000).toFixed(1);
                if (isNaN(distanceKm)) {
                    $('.distance-loc').text(0.3);
                } else {
                    $('.distance-loc').text(distanceKm);
                }
                $('.event-main-container').on('click',function() {
                    resultsMap.setCenter(results[0].geometry.location);
                });
            } else {
                alert('Geocode was not successful for the following reason: ' + status);
            }

        });
    }
    </script>

Gracias por vuestra ayuda!!

1
  • 1
    Supongo que el ffor es un fallo tipográfico a la hora de escribir la pregunta y que realmente está bien en tu código
    – Alvaro Montoro
    el 15 mar. 2016 a las 13:11

1 respuesta 1

1

El problema estaría en esta parte del bucle for:

var x = eventLat;
var y = eventLng;
console.log(x,y,siteLat,siteLng);
var distance = google.maps.geometry.spherical.computeDistanceBetween(new google.maps.LatLng(x,y), new google.maps.LatLng(siteLat,siteLng));

como eventLat y eventLng se calculan para el pinpoint principal de forma asíncrona, podría darse el caso de que cuando se calcula la distancia para los marcadores, esas variables aún no tengan valor y por eso aparezcan como NaN.

Una posible solución: mueve el bucle for dentro del resultado del pinpoint. De este modo te asegurarás de que eventLat y eventLng ya estarán definidas y no deberías tener problemas:

geocoder.geocode({'address': event}, function(results, status) {
  if (status === google.maps.GeocoderStatus.OK) {
    resultsMap.setCenter(results[0].geometry.location);
    resultsMap.setZoom(15);
    var event = new google.maps.Marker({
      map: resultsMap,
      icon: '/assets/images/event.png',
      position: results[0].geometry.location
    });
    eventLat = results[0].geometry.location.lat();
    eventLng =  results[0].geometry.location.lng();
  } else {
    alert('Geocode was not successful for the following reason: ' + status);
  }

  // en este punto ya tienes los valores de eventLat y eventLng
  for (i=0; i < siteLoc.length; i++) {
    geocoder.geocode({'address': siteLoc[i]}, function(results, status) {
      if (status === google.maps.GeocoderStatus.OK) {
        var site = new google.maps.Marker({
          map: resultsMap,
          icon: '/assets/images/site1.png',
          position: results[0].geometry.location
        });
        siteLat = results[0].geometry.location.lat();
        siteLng = results[0].geometry.location.lng();
        var x = eventLat;
        var y = eventLng;
        console.log(x,y,siteLat,siteLng);
        var distance = google.maps.geometry.spherical.computeDistanceBetween(new google.maps.LatLng(x,y), new google.maps.LatLng(siteLat,siteLng));
        var distanceKm = (distance/1000).toFixed(1);
        if (isNaN(distanceKm)) {
          $('.distance-loc').text(0.3);
        } else {
          $('.distance-loc').text(distanceKm);
        }
        $('.event-main-container').on('click',function() {
          resultsMap.setCenter(results[0].geometry.location);
        });
      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }

    });
  }

});

Un inconveniente de esta solución es que el primer punto principal (pinpoint) hará esperar a todos los demás para ser mostrados. Pero de una manera u otra, tendrán que esperar a que el primero se genere para calcular la distancia de todos modos.

1
  • Pues al final era eso. Muchas gracias Alvaro. el 16 mar. 2016 a las 19:17

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.