Discussion :

[Mrzikel]

Bonjour tout le monde,

J'ai vraiment besoin d'un coup de main pour utiliser l'api google map et afficher les points de repères dit markers provenant de ma base de donnée exécuté par mysqli dont la requête est la suivante :

Code :

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

1
2
3
4
5
6
7
8
9
10
<?php
require("connect_inc.php");
$req = mysqli_query($db, "SELECT pseudo, latitude_p, longitude_p FROM trip_cal_depart WHERE latitude_p!='' AND longitude_p!='' AND pseudo='castor'");
while($row = mysqli_fetch_array($req, MYSQLI_ASSOC))
        {
        $retour = json_encode($row);// On transforme le tableau PHP en json
        // On retourne le tableau à la fonction appelante
        echo $retour; 
        }
 ?>

J'obtiens bien une réponse en JSON qui est la suivante (par exemple):

Code :

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

1
2
{"pseudo":"Castor","latitude_p":"59.9138688","longitude_p":"4.8036921"}
{"pseudo":"Castor","latitude_p":"50.6313687","longitude_p":"5.7356349"}

Je traite le tout à partir d'une requête AJAX faite en JQUERY pour récupérer le résultat et l'afficher sur google map en exécutant une boucle FOR mais j'ai comme l'impression que la boucle ne veut pas fonctionner,, voici mon code :

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
var lat = 48.852969;
var lon = 2.349903;
var map = null;
function initMap() {
	map = new google.maps.Map(document.getElementById("map"), {
		center: new google.maps.LatLng(lat, lon),
		zoom: 4,
		navigationControl: true,
			navigationControlOptions: {
			style: google.maps.NavigationControlStyle.ZOOM_PAN
		}
	});
	// Nous appelons la fonction ajax de jQuery
	$.ajax({
		// On pointe vers le fichier data_adresse.php
		url : "data_adresse.php",
		dataType : "json",
	}).done(function(json)
	{
 
		// Si on obtient une réponse, elle est stockée dans la variable json
		// On construit l'objet villes à partir de la variable json
 
		 var tabMarkers = [];
		var villes  = json;
		// On parcourt l'objet villes
		for(ville in villes){
			var marker = new google.maps.Marker({
 
				// parseFloat nous permet de transformer la latitude et la longitude en nombre décimal
	position: 
       {
        lat: parseFloat(villes[ville].latitude_p),
        lng: parseFloat(villes[ville].longitude_p)
        },
	title: villes[ville].pseudo,
	map: map
	});	
		tabMarkers.push(marker);}
	});
 
			// Nous ajoutons un marqueur
var marker = new google.maps.Marker({
	// Nous définissons sa position (syntaxe json)
	position: {lat: lat, lng: lon},
	// Nous définissons à quelle carte il est ajouté
	map: map
});
 
}

La requête ajax se fait bien mais je ne comprend pas pourquoi elle ne s'affiche pas sur google map ni même si je fais une console.log dans la boucle. Après je suis débutant et je ne comprend pas tout de ce que je fais.

J'ai bon essayé dans tous les sens ça ne fonctionne pas, je parviens juste à obtenir un point de repère...

Je désespère réellement, à croire que personne ne sait faire ça ou ne me comprend.

C'est pourtant simple, afficher des markers en boucle provenant d'une base de données sql et dont le resultat est converti en format json.


Si vous pouviez m'aider votre aide serait la bienvenue.


Merci et bonne soirée.

[Toufik83]

Bonjour,

La variable $retour dans la boucle actuelle qui récupère les données mysql devrait être un tableau, dans laquelle vous stockez toutes les lignes récupérées par la requête.

Essayez de la déclarer comme un tableau vide avant la boucle, puis après vous la remplissez comme suite :

Code php :

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

1
2
3
4
5
$retour=[];//déclaration
while($row = mysqli_fetch_array($req, MYSQLI_ASSOC)){
   $retour[] = $row;// Notez les crochets [] ici !
}
echo json_encode($retour); //renvoyer le retour en tant que json

Puis du côté JS, utilisez des console.log pour visualiser les données récupérées depuis PHP :

Code :

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

1
2
3
4
$.ajax(.......)
.done(function(json){
    console.log("json reçu :",json);//vous voyez cette ligne dans la console du navigateur ?
})

[Mrzikel]

Merci Toufik83,

Je viens de parvenir à faire mes repères sur la carte google map, c'était bien le tableau le problème, grâce à vous je vais pouvoir avancer sur le reste
Je dois encore pouvoir afficher les pseudo sur les repères ainsi qu'une bulle d'informations pour chaque repères.

Passez une très bonne soirée, et encore merci.