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