Не удается получить данные GMaps геокодирования

Question

У меня есть скрытое поле внутри формы:

<form> 
    <input id="distance" name="km" type="hidden"> 
</form> 

И я просто хочу, чтобы заполнить это поле с расстоянием между 2 адреса, выбранного пользователем. Затем я просто представляю его с помощью формы и делаю с ним сервер. Здесь я называю calculateDistance FUNC:

$('#my_form_id').on("submit", function (e) { 
    calculateDistance(); 
    // other stuff 
    return true; 
}); 

Это, как я пытаюсь получить расстояние:

function calculateDistance() { 
    var startPoint = $('#main_from_route_input').val(); 
    var endPoint = $('#main_to_route_input').val(); 
    var geocoderStart = new google.maps.Geocoder(); 
    var geocoderEnd = new google.maps.Geocoder(); 
    var coordsStart, coordsEnd; 

geocoderStart.geocode({'address': startPoint}, function (response, status) { 
    if(status != google.maps.GeocoderStatus.OK){ 
     alert('Geocode of first address failed: ' + status); 
    } 
    coordsStart = response[0].geometry.location; 

    geocoderEnd.geocode({'address': endPoint}, function (response, status) { 
     if(status != google.maps.GeocoderStatus.OK){ 
      alert('Geocode of second address failed: ' + status); 
     } 
     coordsEnd = response[0].geometry.location; 
     var distance = (google.maps.geometry.spherical.computeDistanceBetween(coordsStart, coordsEnd)/1000).toFixed(2); 
     $('#distance').val(distance); 
    }); 
}); 
} 

Я пришел с верхним раствором. Но я даже не вхожу в функции обратного вызова. Когда я отлаживаю и получаю обратный вызов, он просто пропускается. Код кажется правильным (так же, как и в других ответах). В чем проблема?

Я получаю значения адресов как 'Copenhagen, Denmark' и 'Berlin, Germany', например. Я попытался сделать это, как в предложениях snipet для кода Google, следующим образом: 'Copenhagen,+Denmark' (пустое место заменено на +), но оно не работает.

Answer 1

Вопросы:

1. вы ничего не можете вернуться из асинхронной функции обратного вызова, необходимо использовать данные внутри функции обратного вызова.
2. вы отправляете форму перед геокодированными результатами возвращаются (возвращение ложного в onsubmit функции, а затем отправить форму сразу вся обработка обратного вызова завершена.
3. Вы расчет прямого расстоянию линии (computeDistanceBetween) и сравнение что на расстоянии вождения

proof of concept fiddle

фрагмент кода:.

var geocoder; 
 
var map; 
 

 
function initialize() { 
 
    map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    calculateDistance(); 
 
} 
 

 
function calculateDistance() { 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    var path = []; 
 
    var startPoint = $('#main_from_route_input').val(); 
 
    var endPoint = $('#main_to_route_input').val(); 
 
    var geocoderStart = new google.maps.Geocoder(); 
 
    var geocoderEnd = new google.maps.Geocoder(); 
 
    var coordsStart, coordsEnd; 
 

 
    geocoderStart.geocode({ 
 
    'address': startPoint 
 
    }, function(response, status) { 
 
    if (status != google.maps.GeocoderStatus.OK) { 
 
     alert('Geocode of first address failed: ' + status); 
 
    } 
 
    coordsStart = response[0].geometry.location; 
 
    bounds.extend(coordsStart); 
 
    var startMark = new google.maps.Marker({ 
 
     position: coordsStart, 
 
     map: map, 
 
     title: "start" 
 
    }); 
 
    path.push(coordsStart); 
 
    geocoderEnd.geocode({ 
 
     'address': endPoint 
 
    }, function(response, status) { 
 
     if (status != google.maps.GeocoderStatus.OK) { 
 
     alert('Geocode of second address failed: ' + status); 
 
     } 
 
     coordsEnd = response[0].geometry.location; 
 
     bounds.extend(coordsEnd); 
 
     var endMark = new google.maps.Marker({ 
 
     position: coordsEnd, 
 
     map: map, 
 
     title: "end" 
 
     }); 
 
     path.push(coordsEnd); 
 
     var polyline = new google.maps.Polyline({ 
 
     path: path, 
 
     map: map 
 
     }); 
 
     var distance = (google.maps.geometry.spherical.computeDistanceBetween(coordsStart, coordsEnd)/1000).toFixed(2); 
 
     $('#distance').val(distance); 
 
     map.fitBounds(bounds); 
 
    }); 
 
    }); 
 
} 
 

 
google.maps.event.addDomListener(window, "load", initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 500px; 
 
    width: 500px; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script> 
 
<form> 
 
    <input id="distance" name="km"> 
 
    <input id="main_from_route_input" value="Copenhagen, Denmark" /> 
 
    <input id="main_to_route_input" value="Berlin, Germany" /> 
 
</form> 
 
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>