Récupérer champ kilométrage Google Map API
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:
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épart</b></td><td><b>Adresse d'arrivé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épart/Arrivé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:
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épart</b></td><td><b>Adresse d'arrivé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");?>
<b><u>Signature de l\'intéressé(e)</u> :<?php
echo htmlentities($signature);
?></b>
</form>
</body>
</html> |
sendmail.php :
Code:
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épart</b></td><td><b>Adresse d\'arrivé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>
<b><u>Signature de l\'intéressé(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:
<span name="route"><div id="directions_panel"></div></span>
mais cela ne fonctionne pas.
Merci pour vos réponses.
Bien cordialement.
