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.