Ton problème n'est pas si ardu mais tout est coder en JS donc aucune transmission en JS possible entre les pages (enfin si avec localstorage, les cookies ou via l'url mais c'est pas adapté ici) et surtout aucune transmission possible en JS directement au serveur (et heureusement...).
Donc la solution la plus simple je pense serait d'avoir des champs en type=hidden car tu as l'air plus à l'aise avec PHP que avec JS.
Donc voici comment tu peux faire (j'utilise pour le coup l'objet Directions au lieu de ton utilisation de istanceMatrix) :
ton HTML :
il faut d'abord charger tes librairies Google juste avant ton fichier contenant les fonctions JS :
<script type="text/javascript" src="http://maps.google.com/maps/api/js?language=fr&libraries=places"></script>
puis :
<form method="post" action="traitement.php">
<p><label>Point de départ :</label><br />
<input type="text" name="origin" id="origin" size="50px" class="google-autocomplete" placeholder="Départ"></p>
<p><label>Destination :</label><br />
<input type="text" name="destination" id="destination" size="50px" class="google-autocomplete" placeholder="Arrivée"></p>
<p><input type="radio" value="1" name="horaire" id="radio1" checked="checked" /><label for="radio1"> de 6h à 19h</label></p>
<p><input type="radio" value="2" name="horaire" id="radio2" /><label for="radio2"> de 19h à 6h, les week-ends, les jours fériés</label></p>
<p><input type="button" value="Calculer l'itinéraire" onclick="javascript:calculate()"></p>
<p>Temps : <span id="tps"></span>
<input type="hidden" name="tps" id="tps2" />
</p>
<p>Distance : <span id="dst"></span>
<input type="hidden" name="dst" id="dst2" />
<span id="dst3" style="display:none"></span>
</p>
<p>Estimation du tarif : <span id="tarif"></span></p>
<input type="hidden" name="tarif" id="tarif_hidden" />
<p><input type="button" value="Voir l'estimation" onclick="javascript:tarification()"></p>
<p><input type="submit" value="Réserver"></p>
</form>
puis tes fonctions JS
$(function(){
initAutocomplete();
});
/**
* il faudrait déplacer une partie de cette fonction côté serveur
*/
function tarification(){
var horaire = $("input[type='radio']:checked").val();
var tps = $("#tps2").val();
var dist = $("#dst2").val();
var dist2 = $("#dst3").text();
var nbrkm = (dist/1000);
var nbrkm2 = (dist2/1000);
tps = tps/60;
prixcourse = 0;
if(horaire == 1){
if(nbrkm > 0 && nbrkm < 10)
prixcourse = 35;
else if(nbrkm >= 10 && nbrkm < 20)
prixcourse = 50;
else if(nbrkm >= 20 && nbrkm < 30)
prixcourse = 65;
else if(nbrkm >= 30 && nbrkm < 40)
prixcourse = 80;
else if(nbrkm >= 40 && nbrkm < 50)
prixcourse = 100;
else if(nbrkm >= 50 && nbrkm < 60)
prixcourse = 120;
else if(nbrkm >= 60 && nbrkm < 70)
prixcourse = 140;
else if(nbrkm >= 70 && nbrkm < 80)
prixcourse = 160;
else if(nbrkm >= 80 && nbrkm < 90)
prixcourse = 180;
else if(nbrkm >= 90 && nbrkm < 100)
prixcourse = 200;
else if(nbrkm >= 100)
prixcourse = nbrkm * 2.2;
}
else if(horaire == 2){
if(nbrkm > 0 && nbrkm < 10)
prixcourse = 40;
else if(nbrkm >= 10 && nbrkm < 20)
prixcourse = 57.50;
else if(nbrkm >= 20 && nbrkm < 30)
prixcourse = 74.75;
else if(nbrkm >= 30 && nbrkm < 40)
prixcourse = 92;
else if(nbrkm >= 40 && nbrkm < 50)
prixcourse = 115;
else if(nbrkm >= 50 && nbrkm < 60)
prixcourse = 138;
else if(nbrkm >= 60 && nbrkm < 70)
prixcourse = 161;
else if(nbrkm >= 70 && nbrkm < 80)
prixcourse = 184;
else if(nbrkm >= 80 && nbrkm < 90)
prixcourse = 207;
else if(nbrkm >= 90 && nbrkm < 100)
prixcourse = 230;
else if(nbrkm >= 100)
prixcourse = nbrkm * 2.2;
}
if(nbrkm2 >=20) prixcourse += 10;
$("#tarif").text(Math.round(prixcourse)+" euros");
$("#tarif_hidden").val(Math.round(prixcourse));
}
/**
* calcule l'itinéraire avec le DirectionsService de Google
*/
function calculate(){
var origin = $('#origin').val();
var destination = $('#destination').val();
if(origin && destination){
var request = {
origin : origin,
destination : destination,
travelMode : google.maps.DirectionsTravelMode.DRIVING
}
var directionsService = new google.maps.DirectionsService();
directionsService.route(request, function(response, status){
if(status == google.maps.DirectionsStatus.OK){
setInfos(response);
}
});
}
}
/**
* met à jour les infos du formulaire depuis la réponse du calcul d'itinéraire de Gogle
* @param DirectionsResult response réponse de Google
*/
function setInfos(response){
var route_infos = response.routes[0].legs[0],
total_distance = route_infos.distance,
total_duration = route_infos.duration,
origin = route_infos.start_address,
destination = route_infos.end_address;
$('#dst').text(total_distance.text);
$('#dst2').val(total_distance.value);
$('#tps').text(total_duration.text);
$('#tps2').val(total_duration.value);
$("#tarif").text('');
$("#tarif_hidden").val('');
$('#origin').val(origin);
$('#destination').val(destination);
}
/**
* initialisation de l'autocomplete des champs de recherche d'adresses de Google Places
*/
function initAutocomplete() {
$.each($('.google-autocomplete'), function(index,elem){
new google.maps.places.Autocomplete(
this,
{types: ['geocode']});
});
}
Je t'ai mis en ligne une petite démo :
http://alsacreations.matthieurebillard.fr/029
Tu peux tester, tu as bien toutes tes données...
Ceci dit, je trouve pas ça terrible d'avoir la grille des tarifs en JS, ça serait préférable d'avoir ça côté serveur (soit un tableau en PHP, soit en base de données) et récupérer ces infos via AJAX.
Ca pourrait être vraiment amélioré mais je pense que c'est un bon début...
.
.