Variable API google map JS avec bdd

Version imprimable

Bonjour,

Je cale depuis quelques jours � cause d'un petit souci.. Je n'y arrive pas..

Voici mon probl�me : J'utilise l'API google maps pour situer la ville par rapport � mon IP. Ceci en JS.. jusque l� tout va bien :)

Mais ensuite je souhaite utiliser cette variable pour acqu�rir la latitude et la longitude (qui sont inscrits dans ma bdd) sauf que la variable cr�� en JS n'est pas reconnu...

Comment faire? Doit-on �tre contraint d'utiliser Ajax ? j'ai essay� vainement de m'y mettre mais je pige pas encore tout..

Alors si vous avez la solution... je suis preneur ... :)

Voici mon code :
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 <html> <head> <script src="https://www.google.com/jsapi?key=votre cle google api" type="text/javascript"></script> <script type="text/javascript"> function initialize() { var toto = "Ma ville: " + google.loader.ClientLocation.address.city +"<br>"; document.getElementById("test_gloader").innerHTML = toto; } </script> </head> <body onload="initialize()"> <div id="test_gloader">Patientez...</div> <? $serveur = "localhost"; $utilisateur = "root"; $motDePasse = "root"; $base = "mysql"; mysql_pconnect($serveur, $utilisateur , $motDePasse) or die("Impossible de se connecter au serveur de bases de données."); mysql_select_db($base) or die("Base de données non trouvée."); $query2="SELECT * FROM villes_france_free WHERE VILLE = '$toto' "; $result2 = mysql_query ($query2); if ($row2=mysql_fetch_array($result2)) { echo"$row2[latitude]"; echo"$row2[longitude]"; } ?> </body> </html>

25/01/2015, 23h25
ryan

Yop!

Ce passage reste n�buleux apr�s plusieurs lectures:

Citation:

Envoy� par gaticho

Voici mon probl�me : J'utilise l'API google maps pour situer la ville par rapport � mon IP. Ceci en JS.. jusque l� tout va bien

Mais ensuite je souhaite utiliser cette variable pour acqu�rir la latitude et la longitude (qui sont inscrits dans ma bdd) sauf que la variable cr�� en JS n'est pas reconnu...

D'o� sort la variable dont tu parles?
25/01/2015, 23h31
gaticho

Bonjour :)

je parle de la variable "toto" qui est cr�� sous JS dont je veux me servir pour la bdd
26/01/2015, 09h11
ryan

Yop!

La variable toto est cr��e c�t� client � la fin du chargement de la page par le navigateur, et tu voudrais que le code PHP en tienne compte, alors que ce code a �t� interpr�t� c�t� serveur avant d'envoyer le page.

La seule solution pour traiter une variable JS en PHP est d'utiliser AJAX pour appeler le code PHP sur le serveur, qui va traiter la variable et renvoyer une r�ponse que tu pourras utiliser � ton gr�.
26/01/2015, 10h53
gaticho

Bonjour Ryan !

Je me doutais qu'il fallait utiliser Ajax.. Je t'avoue que je suis d�butant, j'ai essay�, j'ai essay� .. mais je n'y arrive pas .. m�me avec tous les tutus que j'ai pu trouver..

Je te demande pas de me faire un code tout fait, mais pourrais tu me donner quelques indices.. ?

merci merci

Yop!

AJAX est bas� sur l'objet XMLHttpRequest et sa capacit� � dialoguer avec un script c�t� serveur.

Dans ton cas, le premier �l�ment du processus est la page qui cr�e la variable toto. Cette variable doit �tre pass� en param�tre � la fonction getCoord() qui va :
- cr�er l'objet XMLHttpRequest
- ensuite faire une requ�te vers un script c�t� serveur en lui passant le param�tre
- et pour finir traiter ce que renvoie le script c�t� serveur

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
 
<html>
<head>
<script src="https://www.google.com/jsapi?key=votre cle google api" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
        var toto = "Ma ville: "  + google.loader.ClientLocation.address.city +"<br>";
        document.getElementById("test_gloader").innerHTML = toto;
        getCoord(toto);
}
 
function getXhr() {
        var xhr = null; 
        if(window.XMLHttpRequest) // Firefox et autres
        {
                xhr = new XMLHttpRequest(); 
        }
        else if(window.ActiveXObject)
        { // Internet Explorer 
                try 
                {
                        xhr = new ActiveXObject("Msxml2.XMLHTTP");
                } 
                catch (e) 
                {
                        xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }
        }
        else 
        { 
                alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
                xhr = false; 
        } 
        return xhr;
}
 
function getCoord(laville) {
        var xhr = getXhr();
        xhr.onreadystatechange = function()
        {
                if(xhr.readyState == 4 && xhr.status == 200)
                {
                        reponse = xhr.responseText;
                        document.getElementById("coordonnees").innerHTML = reponse;
                }
        }       
 
        xhr.open("POST","find_coord_in_db.php",true);
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        xhr.send("ville="+laville);     
}
</script>
</head>
<body onload="initialize()">
<div id='test_gloader'></div>
<div id='coordonnees'></div>
</body>
</html>

La page find_coord_in_db.php :

Code:

1
2
3
4
 
$toto = $_POST["ville"];
.... traitement PHP...
echo $row2["latitude"] . "/" . $row2["longitude"];

Tu devrais alors te retrouver avec la latitude et la longitude s�par�es par un slash dans la div "coordonnees".

Deux conseils:
- lire la doc et comprendre les propri�t�s ( readyState et status ) et les m�thodes (open, setRequestHeader et send) de l'objet XMLHttpRequest
- cr�er un b�te formulaire HTML dont l'action pointe sur ton script PHP, lui transmettre en POST un param�tre valable dans un champ "ville" pour tester le retour de ton script PHP. En cas d'erreur, c'est toujours bon de savoir que �a ne vient pas du script PHP.

Merci Ryan pour toute ton aide !

N�anmoins, j'ai plusieurs questions : (d�sol�, je suis vraiment n�ophyte)

1) J'aimerais que sur la page html, on affiche ce qu'il y a dans le php ( echo $row2["latitude"] . "/" . $row2["longitude"]; )
2) faut-il inclure sur la page html, un include('find_coord_in_db.php') ?

J'ai essay� mais �a ne marche pas, je ne comprends pas..

Voici le code avec tes modifs :

page html

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
 
<html>
<head>
<script src="https://www.google.com/jsapi?key=votre cle google api" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
	var toto = "Ma ville: "  + google.loader.ClientLocation.address.city +"<br>";
	document.getElementById("test_gloader").innerHTML = toto;
	getCoord(toto);
}
 
function getXhr() {
	var xhr = null; 
	if(window.XMLHttpRequest) // Firefox et autres
	{
		xhr = new XMLHttpRequest(); 
	}
	else if(window.ActiveXObject)
	{ // Internet Explorer 
		try 
		{
			xhr = new ActiveXObject("Msxml2.XMLHTTP");
		} 
		catch (e) 
		{
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	else 
	{ 
		alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
		xhr = false; 
	} 
	return xhr;
}
 
function getCoord(laville) {
	var xhr = getXhr();
	xhr.onreadystatechange = function()
	{
		if(xhr.readyState == 4 && xhr.status == 200)
		{
			reponse = xhr.responseText;
			document.getElementById("coordonnees").innerHTML = reponse;
		}
	}	
 
	xhr.open("POST","find_coord_in_db.php",true);
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	xhr.send("ville="+laville);	
}
</script>
</head>
<body onload="initialize()">
<div id='test_gloader'></div>
<div id='coordonnees'></div>
<?
include('find_coord_in_db.php')
 
?>
</body>
</html>

page 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
 
<?
 
$serveur     = "localhost";
$utilisateur = "root";
$motDePasse  = "root";
$base        = "mysql";
 
 
 
mysql_pconnect($serveur, $utilisateur , $motDePasse) 
or die("Impossible de se connecter au serveur de bases de données.");
mysql_select_db($base) 
or die("Base de données non trouvée.");
 
 
 
 
$toto = $_POST["ville"];
$query2="SELECT * FROM villes_france_free WHERE VILLE = '$toto' ";
$result2 = mysql_query ($query2);
 
if ($row2=mysql_fetch_array($result2)) { 
 
 
	echo $row2["latitude"] . "/" . $row2["longitude"];
}
 
 
 
?>

voilou voilou :(

26/01/2015, 13h06
ryan

Yop!

Tu ne dois pas inclure le fichier PHP, il est appel� par la m�thode open de l'objet XMLHttpRequest.

Pour d�boguer:
- comme je te l'�crivais, teste ton code PHP en "stand alone" en l'appelant de fa�on conventionnelle: un FORM html avec un param�tre valable dans un champ appel� "ville".
- teste ton appel AJAX sur un code PHP qui fait un simple echo de ce qu'il re�oit.
- ajoute des alert() ou des console.log (sur Firefox) dans la fonction getCoord pour tester 1) si elle s'ex�cute 2) quelle est la valeur du param�tre qu'elle re�oit 3) quel est le status et le readyState 4) qu'est-ce qu'il y a dans xhr.responseText, etc...
26/01/2015, 13h30
gaticho

Citation:

Envoy� par ryan

Yop!

Tu ne dois pas inclure le fichier PHP, il est appel� par la m�thode open de l'objet XMLHttpRequest.

Pour d�boguer:
- comme je te l'�crivais, teste ton code PHP en "stand alone" en l'appelant de fa�on conventionnelle: un FORM html avec un param�tre valable dans un champ appel� "ville".
- teste ton appel AJAX sur un code PHP qui fait un simple echo de ce qu'il re�oit.
- ajoute des alert() ou des console.log (sur Firefox) dans la fonction getCoord pour tester 1) si elle s'ex�cute 2) quelle est la valeur du param�tre qu'elle re�oit 3) quel est le status et le readyState 4) qu'est-ce qu'il y a dans xhr.responseText, etc...

Merci je vais tester �a.. :) je reviens vers toi dans quelques instants :)
26/01/2015, 13h52
gaticho

Re-Bonjour Ryan :)

Tout marche ! c'est vraiment top !

Merci infiniment pour ton implication et ta g�n�rosit�
26/01/2015, 14h35
ryan

Yop!

Si tout fonctionne, un petit coup de :resolu: alors?
26/01/2015, 14h38
gaticho

done!