Variable API google map JS avec bdd

**gaticho** · 25/01/2015, 22h06

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 :

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
 
 
<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>

**ryan** · 25/01/2015, 23h25

Yop!

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

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?

**gaticho** · 25/01/2015, 23h31

Bonjour

je parle de la variable "toto" qui est cr�� sous JS dont je veux me servir pour la bdd

**ryan** · 26/01/2015, 09h11

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�.

**gaticho** · 26/01/2015, 10h53

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

**ryan** · 26/01/2015, 12h12

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 html :

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
 
<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 php :

S�lectionner tout - Visualiser dans une fen�tre � part

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.

**gaticho** · 26/01/2015, 12h39

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 :

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
 
<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 :

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
 
<?
 
$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

**ryan** · 26/01/2015, 13h06

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...

**gaticho** · 26/01/2015, 13h30

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