JS 関数を実行した後、非表示の型の値をフォームで変更する必要があります。距離の値は正しいようです。しかし、次のページで $_POST['distance'] にアクセスしているときに割り当てが機能していないようで、値を変更せずに 1000 を返します。助けてください。
<script type="text/javascript">
function calcRoute() {
var start = "1255 E University Dr, Tempe, AZ 85281";
var end = "KPMG, 60 E Rio Salado Pkwy, Tempe, AZ 85281";
var request = {
origin:start,
destination:end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
window.distance = result.routes[0].legs[0].distance.value;
alert(window.distance);
directionsDisplay.setDirections(result);
}
});
document().getElementById('distance').value = window.distance;
}
</script>
<button type="button" class="btn" onclick="calcRoute()">calc</button>
<form method="post" action = "getdist.php">
<input type = "hidden" name="distance" id="distance" value="1000">
<input type="submit" value="Submit">
</form>