Affichage d'une carte après choix via liste Ajax

**MadChan** · 05/07/2016, 16h07

Bonjour à tous,
Mon problème est le suivant. Je suis en train de créer un outil web permettant la visualisation de données. L'utilisateur peut choisir ce qu'il veut voir en choisissant dans une première liste déroulante une date (qui correspond à une date de chantier) puis une fois le choix validé, une deuxième liste apparaît pour sélectionner la ville qu'il souhaite visualisée (plusieurs date possible pour des villes différentes).
J'aimerai qu'une fois ces deux choix fait, une carte google maps s'affiche avec des markers sur chaque points correspondant aux infos précédente. J'ai les deux codes. Mais je n'arrive pas à les lier.
Actuellement la carte s'affiche dès qu'on a sélectionné une date. Je ne sais pas comment faire.
Voici les pages de codes :
Membre.php (page sur lequel on affiche les résultats)

Code php :

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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<?php
include('config.php')
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <link rel="stylesheet" href="style.css" />
		 <script src="http://maps.googleapis.com/maps/api/js"> </script>	 
        <title>Espace membre</title>
 
    </head>
    <body>
        <div class="content">
<?php
//On affiche un message de bienvenue, si l'utilisateur est connecté, on affiche son nom
?>
<header>
<?php
$req = pg_query ("SELECT * FROM client WHERE id_users = '".$_SESSION['userid']."'");
$res = pg_fetch_array($req);
?>
<h1> Bienvenue <?php if(isset($_SESSION['mail'])){echo ($res[1]);} ?>,<br /></h1>
<p> Cette page vous est consacrée et vous pourrez voir les données qui vous concernent. </p>
<p> Le contenu que vous aller voir est relatif aux informations que nous avons acquéris suite à votre(vos) demande(s) </p>
<?php
//Si l'utilisateur est connecté, on lui donne un lien pour modifier ses informations, pour voir ses messages et un pour se déconnecter
if(isset($_SESSION['mail']))
{
?>
<a href="edit_infos.php">Modifier mes informations personnelles</a><br />
<a href="deconnexion.php">Se déconnecter</a>
<?php
}
else
{
//Sinon, on lui donne un lien pour se deconnecté
?>
<a href="connexion.php">Retour</a><br />
<?php
}
?>
                </div>
 
<!------------------------------------ Requête AJAX pour la mise à jour des listes liées------------------------------------>
<div id="formulaire">
<form method="post" name="liste">
<label>Date : </label>
<select name="date" id="date" onchange="Parcelle(this.value);">
<option value="vide">- - - Choisissez une date - - -</option>
 
<?php
 
//Connexion à la base de données
$bdd =pg_connect("host=localhost port=5432 dbname=postgres user=postgres password=Chantran01");
 
// On recherche le users associé a ces identifiants
$search = pg_query("SELECT * FROM users WHERE email = '".$_SESSION['mail']."'")or die (pg_last_error());
$result = pg_fetch_array($search);
print ($result[0]);
 
// On cherche le client associé aux identifiants
$search = pg_query("SELECT * FROM client WHERE id_users = '$result[0]'")or die (pg_last_error());
$result = pg_fetch_array($search);
 
//On sélectionne toutes les dates correspondantes au client
$selectdate = pg_query("SELECT * FROM chantier WHERE id_client = '$result[0]' ORDER BY date") or die (pg_last_error());
while($donnees = pg_fetch_array($selectdate))
{
    echo '<option value="'.$donnees['id'].'"';
    if(isset($_POST['date']) && $_POST['date']==$donnees['id']){echo " selected";}
    echo '>'.$donnees['date'].'</option>';
}
?>
</select><br/>
 
<!-- Dans ce bloc sera affiché la liste des Parcelles -->
<div id="blocParcelle">
<?php
/*Pour garder la sélection de la seconde liste, on l'inclue directement dans la page lors de la validation du formulaire*/
if(isset($_POST['date'])){
//on créer une variable utilisé dans la page "traitement.php"
$include = 1;
//on inclue la page
include('traitement.php');
}
?>
</div>
<!-- Fin du bloc des parcelles-->
 
<label>Valider : </label>
<input type="submit" name="Valider" value="Valider"/>
<input type="reset" name="Effacer" value="Effacer"/>
</form>
 <?php
//Le formulaire a été posté
if(isset($_POST["Valider"])){
//date  vide
    if(isset($_POST["date"]) && $_POST["date"] == 'vide'){
        echo '<div id="erreur">Veuillez sélectionner une date!</div>';
    }
//parcelle vide
    else if(isset($_POST["parcelle"]) && $_POST["parcelle"] == 'vide'){
        echo '<div id="erreur">Veuillez sélectionner une parcelle!</div>';
    }
//Tout est ok
    else{
		$bdd =pg_connect("host=localhost port=5432 dbname=postgres user=postgres password=Chantran01");
        //On va chercher le 
        $affichedate = pg_query("SELECT date FROM chantier WHERE id='".$_POST['date']."'") or die (pg_last_error());
	    $donneesdate = pg_fetch_array($affichedate);
 
        //On va chercher la parcelle sélectionnée
		$afficheparcelle = pg_query("SELECT ville FROM parcelle WHERE id_chantier='".$id_from_date."'") or die (pg_last_error());
        $donneesparcelle = pg_fetch_array($afficheparcelle);
 
		$latitude = array();
		$longitude = array();
		$humidite = array();
		$result = pg_query('SELECT * FROM point') or die (pg_last_error());
 
		while ($data = pg_fetch_array($result))
		{	
			$latitude[] = $data['lat'];
			$longitude[] = $data['long'];
			$humidite[] = $data ['teta'];
		}
 
    }
?>
<script>
 
function initialize()
	{
		var mapProp = {
			center:new google.maps.LatLng(50.8103691,4.5038622),
			zoom:8,
			mapTypeId:google.maps.MapTypeId.ROADMAP
		};
 
		var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
 
<?php
	$i = 0;
	for ($i = 0; $i<sizeof($latitude);$i++)
	{
		// echo ($latitude[$i])." ";
		// echo ($longitude[$i])." ";
		// echo ($humidite[$i])." " ; 
	?>
		var latitude = <?php echo $latitude[$i] ; ?>;
		//console.log(latitude);
		var longitude = <?php echo $longitude[$i] ; ?>;
		//console.log(longitude);
		var humidite = <?php echo $humidite[$i] ; ?>;
		//console.log(humidite);
		var myCenter=new google.maps.LatLng(latitude,longitude);
		//console.log(myCenter);
 
		var marker=new google.maps.Marker({
			position:myCenter,
			title : ''+humidite
		});
 
		// var infowindow = new google.maps.InfoWindow({
			// content : 'Ma position est'+ myCenter
		// });
		// google.maps.event.addListener(marker,'click', function(){
			// infowindow.open(map,marker);
		// });
 
		marker.setMap(map);
		<?php
	}
	?>
	}
	google.maps.event.addDomListener(window, 'load', initialize);
 
</script>
<div id="googleMap" style="width:500px;height:380px;"></div>
<?php
 
}
?>
</div> </div>
 
<!------------------------------------ FIN ------------------------------------>
 
		</section>
        </body>
</html>

traitement.php (qui traite les info de la première liste)

Code php :

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
<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="UTF-8">
        <title>
			Traitement
        </title>
		<link rel="stylesheet" href="style.css" />
	</head>
    <body>
<?php
//Numéro de la date
if(isset($_POST["date"]) && $_POST["date"] != 'vide'){
 
if(!isset($include)){
	//On indique le Content-Type utilisé
	header('Content-Type: text/html; charset="iso-8859-1"');
 
 
	//Connexion à la base de données
	$bdd =pg_connect("host=localhost port=5432 dbname=postgres user=postgres password=Chantran01");
 
 
	}
 
	if (!isset($id_from_date)){
		$id_from_date=Null;
	}
 
	$id_from_date=$_POST['date'];
 
	pg_close($bdd);
?>
 
<label>Choix de la parcelle du chantier : </label>
<select method = "POST" name="parcelle" id="parcelle" >
<option value="vide">- - - Choisissez une ville - - -</option>
<?php 
$bdd =pg_connect("host=localhost port=5432 dbname=postgres user=postgres password=Chantran01");
//On sélectionne toutes les parcelles correspondant à la date choisie
$selectville = pg_query("SELECT ville FROM parcelle WHERE id_chantier='".$id_from_date."'") or die (pg_last_error());
while($donnees = pg_fetch_array($selectville))
{
    echo '<option value="'.$donnees['id'].'"';
    if(isset($_POST['parcelle']) && $_POST['parcelle']==$donnees['ville']){
		echo " selected";
	}
	echo '>'.$donnees['ville'].'</option>';
}
?>
</select><br/>
<?php }
pg_close($bdd); ?>
</body>
</head>

Merci d'avance pour votre aide !

**NoSmoking** · 11/07/2016, 22h22

Bonjour,

Actuellement la carte s'affiche dès qu'on a sélectionné une date.

il te faut dans ce cas mettre l'affichage de la carte dans la fonction que tu appelles sur ton 2^éme choix, celui des villes.

Tu peux regarder pour le principe
Créer des listes déroulantes liées entre elles sans utiliser Ajax

**MadChan** · 27/07/2016, 16h01

Bonjour a tous,

Depuis tous ce temps je n'ai toujours pas résolu mon probleme. Avis aux gentilles personnes prêtes a donner un peu de leur temps pour me simplifier la fin de mon stage.
Je n'arrive pas a afficher ma carte "google.maps" après avoir selectionner la date PUIS la ville a partir des listes liées ajax.

Quelqu'un peu mettre son nez dedans svp ?
Pour l'instant la carte se charge avec les marqueurs après avoir selectionné la date

les pages de codes sont les suivantes :
page membre.php

Code php :

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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<?php
include('config.php')
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <link rel="stylesheet" href="style.css" />
		 <script src="http://maps.googleapis.com/maps/api/js"> </script>	 
        <title>Espace membre</title>
 
    </head>
    <body>
        <div class="content">
<?php
//On affiche un message de bienvenue, si l'utilisateur est connecté, on affiche son nom
?>
<header>
<?php
$req = pg_query ("SELECT * FROM client WHERE id_users = '".$_SESSION['userid']."'");
$res = pg_fetch_array($req);
?>
<h1> Bienvenue <?php if(isset($_SESSION['mail'])){echo ($res[1]);} ?>,<br /></h1>
<p> Cette page vous est consacrée et vous pourrez voir les données qui vous concernent. </p>
<p> Le contenu que vous aller voir est relatif aux informations que nous avons acquéris suite à votre(vos) demande(s) </p>
<?php
//Si l'utilisateur est connecté, on lui donne un lien pour modifier ses informations, pour voir ses messages et un pour se déconnecter
if(isset($_SESSION['mail']))
{
?>
<a href="edit_infos.php">Modifier mes informations personnelles</a><br />
<a href="deconnexion.php">Se déconnecter</a>
<?php
}
else
{
//Sinon, on lui donne un lien pour se deconnecté
?>
<a href="connexion.php">Retour</a><br />
<?php
}
?>
                </div>
 
<!------------------------------------ Requête AJAX pour la mise à jour des listes liées------------------------------------>
<div id="formulaire">
<form method="post" name="liste">
<label>Date : </label>
<select name="date" id="date" action ="membre.php" onchange="Parcelle(this.value);">
<option value="vide">- - - Choisissez une date - - -</option>
 
<?php
 
//Connexion à la base de données
$bdd =pg_connect("host=localhost port=5432 dbname=postgres user=postgres password=Chantran01");
 
// On recherche le users associé a ces identifiants
$search = pg_query("SELECT * FROM users WHERE email = '".$_SESSION['mail']."'")or die (pg_last_error());
$result = pg_fetch_array($search);
print ($result[0]);
 
// On cherche le client associé aux identifiants
$search = pg_query("SELECT * FROM client WHERE id_users = '$result[0]'")or die (pg_last_error());
$result = pg_fetch_array($search);
 
//On sélectionne toutes les dates correspondantes au client
$selectdate = pg_query("SELECT * FROM chantier WHERE id_client = '$result[0]' ORDER BY date") or die (pg_last_error());
while($donnees = pg_fetch_array($selectdate))
{
    echo '<option value="'.$donnees['id'].'"';
    if(isset($_POST['date']) && $_POST['date']==$donnees['id']){echo " selected";}
    echo '>'.$donnees['date'].'</option>';
}
?>
</select><br/>
 
<!-- Dans ce bloc sera affiché la liste des Parcelles -->
<div id="blocParcelle">
<?php
/*Pour garder la sélection de la seconde liste, on l'inclue directement dans la page lors de la validation du formulaire*/
if(isset($_POST['date'])){
//on créer une variable utilisé dans la page "traitement.php"
$include = 1;
//on inclue la page
include('traitement.php');
}
?>
</div>
<!-- Fin du bloc des parcelles-->
 
<label>Valider : </label>
<input type="submit" name="Valider" value="Valider"/>
<input type="reset" name="Effacer" value="Effacer"/>
</form>
 <?php
//Le formulaire a été posté
if(isset($_POST["Valider"])){
//date  vide
    if(isset($_POST["date"]) && $_POST["date"] == 'vide' && isset($_POST["parcelle"]) && $_POST["parcelle"] == 'vide'){
        echo '<div id="erreur">Veuillez sremplir tous les champs</div>';
    }
//Tout est ok
    else{
		$bdd =pg_connect("host=localhost port=5432 dbname=postgres user=postgres password=Chantran01");
        //On va chercher le 
        $affichedate = pg_query("SELECT date FROM chantier WHERE id='".$_POST['date']."'") or die (pg_last_error());
	    $donneesdate = pg_fetch_array($affichedate);
 
        //On va chercher la parcelle sélectionnée
		$afficheparcelle = pg_query("SELECT ville FROM parcelle WHERE id_chantier='".$id_from_date."'") or die (pg_last_error());
        $donneesparcelle = pg_fetch_array($afficheparcelle);
 
		$latitude = array();
		$longitude = array();
		$humidite = array();
		$result = pg_query('SELECT * FROM point') or die (pg_last_error());
 
		while ($data = pg_fetch_array($result))
		{	
			$latitude[] = $data['lat'];
			$longitude[] = $data['long'];
			$humidite[] = $data ['teta'];
		}
 
    }
?>
<script>
 
function initialize()
	{
		var mapProp = {
			center:new google.maps.LatLng(50.8103691,4.5038622),
			zoom:8,
			mapTypeId:google.maps.MapTypeId.ROADMAP
		};
 
		var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
 
<?php
	$i = 0;
	for ($i = 0; $i<sizeof($latitude);$i++)
	{
		// echo ($latitude[$i])." ";
		// echo ($longitude[$i])." ";
		// echo ($humidite[$i])." " ; 
	?>
		var latitude = <?php echo $latitude[$i] ; ?>;
		//console.log(latitude);
		var longitude = <?php echo $longitude[$i] ; ?>;
		//console.log(longitude);
		var humidite = <?php echo $humidite[$i] ; ?>;
		//console.log(humidite);
		var myCenter=new google.maps.LatLng(latitude,longitude);
		//console.log(myCenter);
 
		var marker=new google.maps.Marker({
			position:myCenter,
			title : ''+humidite
		});
 
		// var infowindow = new google.maps.InfoWindow({
			// content : 'Ma position est'+ myCenter
		// });
		// google.maps.event.addListener(marker,'click', function(){
			// infowindow.open(map,marker);
		// });
 
		marker.setMap(map);
		<?php
	}
	?>
	}
	google.maps.event.addDomListener(window, 'load', initialize);
 
</script>
<div id="googleMap" style="width:500px;height:380px;"></div>
<?php
 
}
?>
</div> </div>
 
<!------------------------------------ FIN ------------------------------------>
 
		</section>
        </body>
</html>

page traitement.php

Code php :

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
<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="UTF-8">
        <title>
			Traitement
        </title>
		<link rel="stylesheet" href="style.css" />
	</head>
    <body>
<?php
//Numéro de la date
if(isset($_POST["date"]) && $_POST["date"] != 'vide'){
 
if(!isset($include)){
	//On indique le Content-Type utilisé
	header('Content-Type: text/html; charset="iso-8859-1"');
 
 
	//Connexion à la base de données
	$bdd =pg_connect("host=localhost port=5432 dbname=postgres user=postgres password=Chantran01");
 
 
	}
 
	if (!isset($id_from_date)){
		$id_from_date=Null;
	}
 
	$id_from_date=$_POST['date'];
 
	pg_close($bdd);
?>
 
<label>Choix de la parcelle du chantier : </label>
<select method = "POST" name="parcelle" id="parcelle" >
<option value="vide">- - - Choisissez une ville - - -</option>
<?php 
$bdd =pg_connect("host=localhost port=5432 dbname=postgres user=postgres password=Chantran01");
//On sélectionne toutes les parcelles correspondant à la date choisie
$selectville = pg_query("SELECT ville FROM parcelle WHERE id_chantier='".$id_from_date."'") or die (pg_last_error());
while($donnees = pg_fetch_array($selectville))
{
    echo '<option value="'.$donnees['id'].'"';
    if(isset($_POST['parcelle']) && $_POST['parcelle']==$donnees['ville']){
		echo " selected";
	}
	echo '>'.$donnees['ville'].'</option>';
}
?>
</select><br/>
<?php }
pg_close($bdd); ?>
</body>
</head>

Merci :/

**MadChan** · 28/07/2016, 10h18

Bon, alors après de nombreuse crises de nerfs tout fonctionne comme je veux

A une prochaine !!

Affichage d'une carte après choix via liste Ajax

AJAX

Discussions similaires

Partager

Partager