Récupérer champ kilométrage Google Map API

**rissenloving** · 27/03/2014, 14h57

Bonjour,

Je suis débutant sur Google Map API V3.

Présentation du petit code :
- Après avoir rentré l'adresse d'un départ et l'adresse d'une arrivée, en cliquant sur Calculer, le kilomètrage s'affiche sur le fichier. "Calculer_avec_googleMapAPI.php"
- Ensuite, je coche le checkbox précisant que j'accepte ces conditions et j'envoi.
- Un popup apparaît, me précisant que ma demande a bien été prise en compte et que je vais être redirigé sur une page récapitulative.
"Calculer_avec_googleMapAPI_confirmation.php"
- En même temps, le fichier sendmail.php, va envoyer un mail récapitulatif des informations qui auront été saisies. (attention de ne pas oublier de rentrer votre adresse email dans le fichier sendmail.php afin de bien le recevoir sur votre boite.

Tout fonctionne mais...

Les trois fichiers sont :
- Calculer_avec_googleMapAPI.php : Affiche la page et affiche le résultat avec un onclick entre le kilométrage d'un départ et l'arrivée
- Calculer_avec_googleMapAPI_confirmation.php : Page récapitulative
- sendmail.php : code permettant la vérification des champs vide et l'envoi du mail.

Problème rencontré :
Quand j'arrive sur la page récapitulative, je souhaite, après avoir validé le petit code, afficher le kilométrage qui est donné par Google Map API.
En effet, l'affichage n'apparaît ni dans la page récapitulative et ni dans l'email alors que les informations de l'adresse de départ et de l'adresse de l'arrivée s'affiche bien.

Ci-dessous, le code des différents fichiers :

Calculer_avec_googleMapAPI.php :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
    <head>
      <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Calculer avec Google Map API</title>
<style type="text/css">
body {
background-color : #E4F1FA;
font-family: arial;
font-size:12px
}
h4{
background-color : #4E6CA0;
color : white
}
h5{
color : #4169E1
}
input {
color:#00f;
background-color:#ddd;
}
#titre {
color:#266DAD
}
#boutton {
color:white;
background-color:#191970
}
#cadre {
border-width:2px;
border-style:solid;
border-color:black
}
select { 
width: 5em 
}
            .titre2 {
                text-align: left;
                font-weight: bold;
                margin: 0 0 5px 0;
            }
            .panel {
                background-color: #E8ECF9;
                border: 1px dashed black;
                padding: 5px;
                margin: 10px 0 10px 0;
            }
 #route {
height: 75px;
width : 600px;
overflow-y: auto;
            }
#bloc { 
background-color:#87CEFA
}
 
</style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
       <script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
 
function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom: 6,
    center: chicago
  }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  directionsDisplay.setMap(map);
}
 
function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var waypts = [];
  var checkboxArray = document.getElementById('waypoints');
  for (var i = 0; i < checkboxArray.length; i++) {
    if (checkboxArray.options[i].selected == true) {
      waypts.push({
          location:checkboxArray[i].value,
          stopover:true});
    }
  }
 
  var request = {
      origin: start,
      destination: end,
      waypoints: waypts,
      optimizeWaypoints: true,
      travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
      var route = response.routes[0];
      var summaryPanel = document.getElementById('directions_panel');	 
      summaryPanel.innerHTML = '';
      // For each route, display summary information.
      for (var i = 0; i < route.legs.length; i++) {
        var routeSegment = i + 1;
        summaryPanel.innerHTML += 'Le parcours de votre domicile à votre lieu de travail est de : <font color="red">' + route.legs[i].distance.text + '</font> <i>(aller simple)</i>.';
      }
    }
  });
}
 
google.maps.event.addDomListener(window, 'load', initialize);
 
    </script>
</head>
<body id="cadre">
<form id="formsuivi" action="sendmail.php" method="post" ENCTYPE="multipart/form-data">
<multiple id="waypoints">
<table>
<tr>
    <td><b>Adresse de d&eacute;part</b></td><td><b>Adresse d'arriv&eacute;e</b></td>
    </tr>
	<tr>
	<td><input type="text" name="de" id="start" /></td><td><input type="text" name="vers" id="end" /></td>
    <td><input type="button" value="Calculer la distance D&eacute;part/Arriv&eacute;e (aller simple)" onclick="calcRoute();"></td>
	</tr>
	</table>
    <div id="directions_panel"></div>
<br />
<hr color="black"/>
<p><input type="checkbox" id="signature" name="signature" value="Signee">En cochant cette case, je reconnais avoir pris connaissance des conditions d'utilisation.
<br />
<br />
<?php echo "<b>Date :</b>".date("d-m-Y");?>
<center>
<input type="submit" name="Submit" value="Envoyer" onsubmit="calcRoute();>
<input type="reset" name="reset" value="Annuler">
</center>
<br />
</form>
</body>
</html>

Calculer_avec_googleMapAPI_confirmation.php :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
    <head>
      <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Calculer avec Google Map API</title>
<style type="text/css">
body {
background-color : #E4F1FA;
font-family: arial;
font-size:12px
}
h4{
background-color : #4E6CA0;
color : white
}
h5{
color : #4169E1
}
input {
color:#00f;
background-color:#ddd;
}
#titre {
color:#266DAD
}
#boutton {
color:white;
background-color:#191970
}
#cadre {
border-width:2px;
border-style:solid;
border-color:black
}
select { 
width: 5em 
}
#bloc { 
background-color:#87CEFA
}
 
</style>
</head>
<body id="cadre">
<multiple id="waypoints">
<?php
        $de = $_POST['de'];
        $vers = $_POST['vers'];
        $signature = $_POST['signature'];
        $sl_caption = 'directions_panel';
        $sl_htmlcaption = 'HTML'
 
?>
<form id="formsuivi" action="sendmail.php" method="post" ENCTYPE="multipart/form-data">
 
<table>
<tr>
    <td><b>Adresse de d&eacute;part</b></td><td><b>Adresse d'arriv&eacute;e</b></td>
    </tr>
	<tr>
	<td><?php
 
echo htmlentities($de);
 
        ?></td><td><?php
 
echo htmlentities($vers);
 
        ?></td>
	</tr>
	</table>
 
    <div id="directions_panel"></div>
<br />
<hr color="black"/>
<p>Je reconnais avoir pris connaissance des conditions d'utilisation.
<br />
<br />
<?php echo "<b>Date :</b>".date("d-m-Y");?>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<b><u>Signature de l\'int&eacute;ress&eacute;(e)</u> :<?php
 
echo htmlentities($signature);
 
        ?></b>
</form>
</body>
</html>

sendmail.php :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
    <head>
      <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Calculer avec Google Map API</title>
<style type="text/css">
body {
background-color : #E4F1FA;
font-family: arial;
font-size:12px
}
h4{
background-color : #4E6CA0;
color : white
}
h5{
color : #4169E1
}
input {
color:#00f;
background-color:#ddd;
}
#titre {
color:#266DAD
}
#boutton {
color:white;
background-color:#191970
}
#cadre {
border-width:2px;
border-style:solid;
border-color:black
}
select { 
width: 5em 
}
#bloc { 
background-color:#87CEFA
}
 
</style>
</head>
<body>
<?php
	$de = $_POST['de'];
 	$vers = $_POST['vers'];
	$signature = $_POST['signature'];
	$date = date("d-m-Y");
 
	if(empty($de) ) {
			echo ("<SCRIPT LANGUAGE='JavaScript'>
		window.alert('Vous devez saisir l\'adresse de votre domicile')
		history.back();
		</SCRIPT>");
	}else if (empty($vers) ) {
			echo ("<SCRIPT LANGUAGE='JavaScript'>
		window.alert('Vous devez saisir l\'adresse de votre lieu de travail')
		history.back();
		</SCRIPT>");
	}else if(empty($signature) ) {
		echo ("<SCRIPT LANGUAGE='JavaScript'>
		window.alert('Vous devez cocher la case pour accepter les conditions d\'utilisation.')
		history.back();
		</SCRIPT>");
		}else{
$strTo = "ADRESSE DU DESTINAIRE";
$strSubject = "Calculer avec Google Map API";
$strFormName = "Google Map API";
$strFormEmail = "";
 
$strMessage = '<multiple id="waypoints">
<table>
<tr>
    <td><b>Adresse de d&eacute;part</b></td><td><b>Adresse d\'arriv&eacute;e</b></td>
    </tr>
	<tr>
	<td>'.$de.'</td><td>'.$vers.'</td>
	</tr>
	</table>
    <div id="directions_panel"></div>
<br />
<hr color="black"/>
<p>Je reconnais avoir pris connaissance des conditions d\'utilisation.
<br />
<br />
<b>Date :'.$date.'</b>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<b><u>Signature de l\'int&eacute;ress&eacute;(e)</u> :</b>'.$signature.'
'; 
 
//*** Uniqid Session ***//
$strSid = md5(uniqid(time()));
 
$strHeader = "";
$strHeader .= "From: ".$strFormName."<".$strFormEmail.">\nReply-To: ".$strFormEmail."";
 
$strHeader .= "MIME-Version: 1.0\n";
$strHeader .= "Content-Type: multipart/mixed; boundary=\"".$strSid."\"\n\n";
$strHeader .= "This is a multi-part message in MIME format.\n";
 
$strHeader .= "--".$strSid."\n";
$strHeader .= "Content-type: text/html; charset=utf-8\n";
$strHeader .= "Content-Transfer-Encoding: 7bit\n\n";
$strHeader .= $strMessage."\n\n";
 
//*** Attachment ***//
 
for($i=0;$i<count($_FILES["fileAttach"]["name"]);$i++){
if($_FILES["fileAttach"]["name"][$i] != ""){
$strFilesName = $_FILES["fileAttach"]["name"][$i];
$strContent = chunk_split(base64_encode(file_get_contents($_FILES["fileAttach"]["tmp_name"][$i])));
$strHeader .= "--".$strSid."\n";
$strHeader .= "Content-Type: application/octet-stream; name=\"".$strFilesName."\"\n";
$strHeader .= "Content-Transfer-Encoding: base64\n";
$strHeader .= "Content-Disposition: attachment; filename=\"".$strFilesName."\"\n\n";
$strHeader .= $strContent."\n\n";
}
}
 
$flgSend = @mail($strTo,$strSubject,null,$strHeader); // @ = No Show Error //
 
if($flgSend)
{	
echo "<script type=\"text/javascript\">alert(\"Votre dossier à bien été envoyé, vous trouverez un recapitilatif.\")</script>";
include("Calculer_avec_googleMapAPI_confirmation.php");
}
else
{
include("Calculer_avec_googleMapAPI_erreur.html");
}
}
?>
</body>
</html>

Désolé pour la lecture mais j'ai préféré mettre le code entier des trois fichiers.

J'espère que vous pourrez trouver une solution car j'ai essayé quelque méthode notamment :
- mettre un span est récupérer la variable route :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<span name="route"><div id="directions_panel"></div></span>

mais cela ne fonctionne pas.

Merci pour vos réponses.
Bien cordialement.

**NoSmoking** · 27/03/2014, 20h06

Bonjour,

Quand j'arrive sur la page récapitulative, je souhaite, après avoir validé le petit code, afficher le kilométrage qui est donné par Google Map API.

il te faut récupérer cette valeur et la passer non ?

La structure de la réponse : The DirectionsResult Object

**rissenloving** · 27/03/2014, 20h53

Bonsoir,

Pas aussi simple, j'ai essayé d'utiliser cette fonction mais elle est à implémenter dans le premier fichier hors je n'ai pas de problème d'affichage de KM sur celui-ci.

Il s'agit d'un onclick sur la même page, j'ai l'impression que le faite d'envoyer le formulaire, RESET automatiquement le <DIV> et ne garde pas la valeur dans le fichier de confirmation et dans l'email.

J'ai également testé avec un onSubmit mais j'ai le même problème.

J'avais également essayé d'implémenter le javascript de l'API de Google MAP dans le fichier de confirmation mais en vain...

Cordialement

**NoSmoking** · 27/03/2014, 22h17

Tu fais une erreur de raisonnement.

La fonction calculRoute() est une fonction asynchrone, le résultat n'est pas rendu immédiatement et lorsque tu fais un submit de ton formulaire celui ci est envoyé avant que la réponse du serveur Google ne revienne, elle se perd.

Lorsque la réponse est de retour il te faut sauvegarder la distance dans un champ caché et soumettre le formulaire si c'est l'action submit déclenchée par le bouton "Envoyer", cela se gère bien avec un flag. Dans ce cas il ne faut pas mettre l'événement sur le BUTTON mais sur la FORM

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<form id="formsuivi" action="sendmail.php" method="get" ENCTYPE="multipart/form-data"  onsubmit="calcRoute(true);">
<!--
la suite
-->
<input type="submit" name="Submit" value="Envoyer">
<input type="reset"  name="reset"  value="Annuler">

on passe en paramètre true, lorsque l'on fait une soumission via le BUTTON submit et pas de paramètre dans les autres cas

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="button" value="Calculer la distance D&eacute;part/Arriv&eacute;e (aller simple)" onclick="calcRoute();">

Dans ta fonction callback il convient de tester si il y a eu passage de paramètre ou non et si oui faire la soumission

en gros

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
      var route = response.routes[0];
      var summaryPanel = document.getElementById('directions_panel');	 
      summaryPanel.innerHTML = '';
      // For each route, display summary information.
      for (var i = 0; i < route.legs.length; i++) {
        var routeSegment = i + 1;
        summaryPanel.innerHTML += 'Le parcours de votre domicile à votre lieu de travail est de : <font color="red">' + route.legs[i].distance.text + '</font> <i>(aller simple)</i>.';
        // sauvegarde valeur de la distance
        document.getElementById('distance').value = route.legs[i].distance.value/1000;
      }
    }
    // soumission du formulaire
    if( flag) document.getElementById('formsuivi').submit();
  });

**rissenloving** · 28/03/2014, 11h11

Bonjour,

Cela marche parfaitement ;-D, merci infiniment NoSmoking.
Ci-dessous le code final des trois fichiers :

Calculer_avec_googleMapAPI.php

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
    <head>
      <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Calculer avec Google Map API</title>
<style type="text/css">
body {
background-color : #E4F1FA;
font-family: arial;
font-size:12px
}
h4{
background-color : #4E6CA0;
color : white
}
h5{
color : #4169E1
}
input {
color:#00f;
background-color:#ddd;
}
#titre {
color:#266DAD
}
#boutton {
color:white;
background-color:#191970
}
#cadre {
border-width:2px;
border-style:solid;
border-color:black
}
select { 
width: 5em 
}
            .titre2 {
                text-align: left;
                font-weight: bold;
                margin: 0 0 5px 0;
            }
            .panel {
                background-color: #E8ECF9;
                border: 1px dashed black;
                padding: 5px;
                margin: 10px 0 10px 0;
            }
 #route {
height: 75px;
width : 600px;
overflow-y: auto;
            }
#bloc { 
background-color:#87CEFA
}
 
</style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
       <script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
 
function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom: 6,
    center: chicago
  }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  directionsDisplay.setMap(map);
}
 
function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var waypts = [];
  var checkboxArray = document.getElementById('waypoints');
  for (var i = 0; i < checkboxArray.length; i++) {
    if (checkboxArray.options[i].selected == true) {
      waypts.push({
          location:checkboxArray[i].value,
          stopover:true});
    }
  }
 
  var request = {
      origin: start,
      destination: end,
      waypoints: waypts,
      optimizeWaypoints: true,
      travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
      var route = response.routes[0];
      var summaryPanel = document.getElementById('directions_panel');    
      summaryPanel.innerHTML = '';
      // For each route, display summary information.
      for (var i = 0; i < route.legs.length; i++) {
        var routeSegment = i + 1;
        summaryPanel.innerHTML += 'Le parcours de votre domicile à votre lieu de travail est de : <font color="red">' + route.legs[i].distance.text + '</font> <i>(aller simple)</i>.';
        // sauvegarde valeur de la distance
        document.getElementById('distance').value = route.legs[i].distance.value/1000;
      }
    }
    // soumission du formulaire
    if( flag) document.getElementById('formsuivi').submit();
  }); 
}
 
google.maps.event.addDomListener(window, 'load', initialize);
 
    </script>
</head>
<body id="cadre">
<form id="formsuivi" action="sendmail.php" method="post" ENCTYPE="multipart/form-data" onsubmit="calcRoute(true);">
<multiple id="waypoints">
<table>
<tr>
    <td><b>Adresse de d&eacute;part</b></td><td><b>Adresse d'arriv&eacute;e</b></td>
    </tr>
	<tr>
	<td><input type="text" name="de" id="start" /></td><td><input type="text" name="vers" id="end" /></td>
    <td><input type="button" value="Calculer la distance D&eacute;part/Arriv&eacute;e (aller simple)" onclick="calcRoute();"></td>
	</tr>
	</table>
    <input type="hidden" id="distance" name="directions_panel">
<div id="directions_panel"></div>
<br />
<hr color="black"/>
<p><input type="checkbox" id="signature" name="signature" value="Signee">En cochant cette case, je reconnais avoir pris connaissance des conditions d'utilisation.
<br />
<br />
<?php echo "<b>Date :</b>".date("d-m-Y");?>
<center>
<input type="submit" name="Submit" value="Envoyer" onsubmit="calcRoute();>
<input type="reset" name="reset" value="Annuler">
</center>
<br />
</form>
</body>
</html>

Calculer_avec_googleMapAPI_confirmation.php

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
    <head>
      <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Calculer avec Google Map API</title>
<style type="text/css">
body {
background-color : #E4F1FA;
font-family: arial;
font-size:12px
}
h4{
background-color : #4E6CA0;
color : white
}
h5{
color : #4169E1
}
input {
color:#00f;
background-color:#ddd;
}
#titre {
color:#266DAD
}
#boutton {
color:white;
background-color:#191970
}
#cadre {
border-width:2px;
border-style:solid;
border-color:black
}
select { 
width: 5em 
}
#bloc { 
background-color:#87CEFA
}
 
</style>
</head>
<body id="cadre">
<?php
        $de = $_POST['de'];
        $vers = $_POST['vers'];
        $directions_panel = $_POST['directions_panel']; 
        $signature = $_POST['signature'];
 
?>
<form id="formsuivi" action="sendmail.php" method="post" ENCTYPE="multipart/form-data">
 
<table>
<tr>
    <td><b>Adresse de d&eacute;part</b></td><td><b>Adresse d'arriv&eacute;e</b></td>
    </tr>
	<tr>
	<td><?php
 
echo htmlentities($de);
 
        ?></td><td><?php
 
echo htmlentities($vers);
 
        ?></td>
	</tr>
	</table>
<p>Le parcours de votre d&eacute;part à votre arriv&eacute;e via Google MAP est de : <font color="red"><?php
 
echo htmlentities($directions_panel);
 
        ?> km</font><i> (aller simple)</i></p>
<hr color="black"/>
<p>Je reconnais avoir pris connaissance des conditions d'utilisation.
<br />
<br />
<?php echo "<b>Date :</b>".date("d-m-Y");?>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<b><u>Signature de l\'int&eacute;ress&eacute;(e)</u> :<?php
 
echo htmlentities($signature);
 
        ?></b>
</form>
</body>
</html>

sendmail.php

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
    <head>
      <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Calculer avec Google Map API</title>
<style type="text/css">
body {
background-color : #E4F1FA;
font-family: arial;
font-size:12px
}
h4{
background-color : #4E6CA0;
color : white
}
h5{
color : #4169E1
}
input {
color:#00f;
background-color:#ddd;
}
#titre {
color:#266DAD
}
#boutton {
color:white;
background-color:#191970
}
#cadre {
border-width:2px;
border-style:solid;
border-color:black
}
select { 
width: 5em 
}
#bloc { 
background-color:#87CEFA
}
 
</style>
</head>
<body>
<?php
        $de = $_POST['de'];
        $vers = $_POST['vers'];
        $directions_panel = $_POST['directions_panel']; 
        $signature = $_POST['signature'];
 
        $date = date("d-m-Y");
 
        if(empty($de) ) {
                        echo ("<SCRIPT LANGUAGE='JavaScript'>
                window.alert('Vous devez saisir l\'adresse de votre domicile')
                history.back();
                </SCRIPT>");
        }else if (empty($vers) ) {
                        echo ("<SCRIPT LANGUAGE='JavaScript'>
                window.alert('Vous devez saisir l\'adresse de votre lieu de travail')
                history.back();
                </SCRIPT>");
        }else if(empty($signature) ) {
                echo ("<SCRIPT LANGUAGE='JavaScript'>
                window.alert('Vous devez cocher la case pour accepter les conditions d\'utilisation.')
                history.back();
                </SCRIPT>");
                }else{
$strTo = "rlchinasamy@gmail.com";
$strSubject = "Calculer avec Google Map API";
$strFormName = "Google Map API";
$strFormEmail = "";
 
$strMessage = '<multiple id="waypoints">
<table>
<tr>
    <td><b>Adresse de d&eacute;part</b></td><td><b>Adresse d\'arriv&eacute;e</b></td>
    </tr>
        <tr>
        <td>'.$de.'</td><td>'.$vers.'</td>
        </tr>
        </table>
<p>Le parcours du lieu de d&eacute; à son arriv&eacute;e via Google MAP est de : <font color="red">'.$directions_panel.' km
</font><i>(aller simple)</i></p>
<hr color="black"/>
<p>Je reconnais avoir pris connaissance des conditions d\'utilisation.
<br />
<br />
<b>Date :'.$date.'</b>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<b><u>Signature de l\'int&eacute;ress&eacute;(e)</u> :</b>'.$signature.'
'; 
 
//*** Uniqid Session ***//
$strSid = md5(uniqid(time()));
 
$strHeader = "";
$strHeader .= "From: ".$strFormName."<".$strFormEmail.">\nReply-To: ".$strFormEmail."";
 
$strHeader .= "MIME-Version: 1.0\n";
$strHeader .= "Content-Type: multipart/mixed; boundary=\"".$strSid."\"\n\n";
$strHeader .= "This is a multi-part message in MIME format.\n";
 
$strHeader .= "--".$strSid."\n";
$strHeader .= "Content-type: text/html; charset=utf-8\n";
$strHeader .= "Content-Transfer-Encoding: 7bit\n\n";
$strHeader .= $strMessage."\n\n";
 
//*** Attachment ***//
 
for($i=0;$i<count($_FILES["fileAttach"]["name"]);$i++){
if($_FILES["fileAttach"]["name"][$i] != ""){
$strFilesName = $_FILES["fileAttach"]["name"][$i];
$strContent = chunk_split(base64_encode(file_get_contents($_FILES["fileAttach"]["tmp_name"][$i])));
$strHeader .= "--".$strSid."\n";
$strHeader .= "Content-Type: application/octet-stream; name=\"".$strFilesName."\"\n";
$strHeader .= "Content-Transfer-Encoding: base64\n";
$strHeader .= "Content-Disposition: attachment; filename=\"".$strFilesName."\"\n\n";
$strHeader .= $strContent."\n\n";
}
}
 
$flgSend = @mail($strTo,$strSubject,null,$strHeader); // @ = No Show Error //
 
if($flgSend)
{       
echo "<script type=\"text/javascript\">alert(\"Votre dossier à bien été envoyé, vous trouverez un recapitilatif.\")</script>";
include("Calculer_avec_googleMapAPI_confirmation.php");
}
else
{
include("Calculer_avec_googleMapAPI_erreur.html");
}
}
?>
</body>
</html>

Bien cordialement

Récupérer champ kilométrage Google Map API [Google Maps]

APIs Google

Discussions similaires

Partager

Partager