google map géolocalisation inversée

Version imprimable

Bonjour à tous développeurs et développeuses de tous bords.

Voilà je suis à la recherche d'une solution pour localiser un endroit grace à google map. J'ai fait pas mal de recherche avant de poster ici.
J'ai dans ma base de données les latitutes et longitudes tel que : lat : 50.2900072348598 long : 2.80428163201338.
En fait ces coordonnées sont récupéré par une requete SQL.

Sur ma page j'ai une liste de personnes avec un identifiant, tel que :

Code:

<a href="#" class="id_employe" id="11">Dupond-René</a>

La récupération de l'identifiant se fait avec une fonction jquery qui renvoi ledit identifiant pour récupérer les valeurs. J'arrive bien à avoir les coordonnées, mais c'est là que je bloque. Je ne voit pas comment réintroduire ces nouvelles données dans la fonction javascript de la page qui est :
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 <script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(50.2900072348598, 2.80428163201338); var myOptions = { zoom: 12, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var marker = new google.maps.Marker({ position: latlng, map: map, title: "Technicien" }); var cercle = new google.maps.Circle({ // créer un cercle autour du marqueur center: latlng, // position du marqueur map: map, // style de carte fillColor: "#0066CC", // Couleur de l'intérieur du cercle strokeColor: "#0033CC", // Couleur du rebord strokeWeight: 2, // Épaisseur du rebord radius:2000 // Distance en mètre par rapport au centre trouvé(ici 2km) }); } </script>
Sans pour autant recharger la page, pour que la gmap se centre automatiquement sur le positionnement de la personne choisi sur la liste.
Si quelqu'un pouvait m'aider, ou m'éclairer vers une autre voie que celle ci je suis preneur.
Je vous remercie d'avance pour votre aide et pour vos réponses futures.

15/03/2010, 23h35
emmanuel.remy
Salut,

Une fois que tu as récupéré tes coordonnées, tu dois pouvoir faire un:
Code:

1 2 3 var latlng = new google.maps.LatLng(latitude,longitude); map.setCenter(latlng);
Il faut bien sûr que ta variable map soit accessible, donc ne la déclare pas locale à ta fonction initialize.

ERE

Bonjour et merci de m'avoir répondu.
Hier j'ai avancé et j'ai trouvé une solution. Je vais peut etre mettre un peu plus de code pour expliquer un peu mieux ce que je fais ^^.
Alors j'ai un index.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
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
 
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<script type="text/javascript" src="./js/jquery.js"></script>
			<script type="text/javascript" src="./js/jquery.carrousel.js"></script>
			<!--jCarousel library-->
			<script type="text/javascript" src="./js/carrousel/jquery.jcarousel.pack.js"></script>
			<!--jCarousel core stylesheet-->
			<link rel="stylesheet" type="text/css" href="./js/carrousel/jquery.jcarousel.css" />
			<!--jCarousel skin stylesheet-->
			<link rel="stylesheet" type="text/css" href="./css/carrousel/skin.css" />
 
			<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
			<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
			<script type="text/javascript">
			var latitude = "";
			var longitude = "";
 
			function addLoadEvent(lat,lon) 
			{
				latitude = lat;
				longitude = lon;
				var script = document.createElement("script");
				script.type = "text/javascript";
				script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize&lati="+lat+"&longi="+lon;
				adresse =  "http://maps.google.com/maps/api/js?sensor=false&callback=initialize&lati="+lat+"&longi="+lon;
 
				document.body.appendChild(script);
			}
 
 
			function initialize()
			{
 
				var latlng = new google.maps.LatLng(latitude , longitude);
				var myOptions = {
					zoom: 12,
					center: latlng,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				};
				var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 
				var marker = new google.maps.Marker({
					position: latlng,
					map: map,
					title: "personne"
				});
 
				// affichage des informations se rapportant au technicien.
				var infowindow = new google.maps.InfoWindow({
					content: "<?php echo "<b>".$result[0]->nom_emp.' '.$result[0]->prenom_emp .'</b><br />Tel.: '.$result[0]->numtel_emp ; ?>"
				});
 
				google.maps.event.addListener(marker, 'click', function() {
				  infowindow.open(map,marker)
				});
 
				var cercle = new google.maps.Circle({ // créer un cercle autour du marqueur
					center: latlng,				// position du marqueur
					map: map,					// style de carte
					fillColor: "#0066CC",		// Couleur de l'intérieur du cercle
					strokeColor: "#0033CC",		// Couleur du rebord
					strokeWeight: 2,			// Épaisseur du rebord
					radius:2000 				// Distance en mètre par rapport au centre trouvé(ici 2km)
				});
			}
			</script>
	</head>
	<body>
                 <div class="global">
		<a href="index.php" class="lien"></a>
		<div id="menu_top"><?php require_once('menu/menu_haut.php'); ?></div>
		<div class="sousmenu"></div>
		<div id="menu_gauche"><?php require_once('menu/menu_gauche.php'); ?></div>
 
		<div id="contenu">
 
		</div>
 
	</div>
 
		<div id="footer">
			Ce qu'on peut mettre dans un footer ^^
		</div>
 
	</body>
</html>

Dans cette div contenu on fait appel à la page php concernée

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
 
<?php
 
$proprio = $_COOKIE['login'];	// id connecté
 
// on recherche toutes les personnes.
$sql = "" résultat etc...
 
 
if(count($result) != 0)
{	
	$list .= '	<div id="wrap">
					<ul id="mycarousel" class="jcarousel jcarousel-skin-tango">';
	foreach($result as $enq)
	{
			$list .= '	<li>
							<a href="#" class="id_personne" id='identifiant'>nom prénom</a>
						</li>';
	}
 
	$list .= '		</ul>
				</div>
				';
	echo $list;
}
 
	echo '<div id="map_canvas"></div>';
 
?>

Et donc lorsque je clique sur un élément de la liste la fonction jquery se met "en route" :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
$(".id_employe").click(function () {
 
		var id = $(this).attr("id");
 
		$.ajax(
		{
			async:true,
			type: "GET",
			url: "carte.php",
			data: "id_personne="+id,
			success: function(msg) 
			{ 
				$('#map_canvas').html(msg);
			}
		});
	})

Et dans Carte.php j'ai ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
$proprio = $_COOKIE['login'];	// id responsable connecté
 
$cc = $_GET['id_personne'];
 
	if($cc)
	{
		// on recherche toutes les personnes qui sont relié à ce responsable.
		$sql = "...";
 
		echo "<br />lat : ".$resultat_requete['latitude']." <br />long : ".$resultat_requete['longitude']."<br />";
	}

Et c'est à ce moment là que je bloque. Je vois comment envoyer la requete pour avoir mes coordonnées, mais je ne sais pas comment renvoyer les données récupéré grace à la requete vers ma page, et qui mettra à jour le javascript de ma page et donc la carte.

Bon j'espère que ce n'est pas trop "sale" mais le code n'est pas fini ^^

Bon
J'ai avancé encore je suis pas loin du résultat que j'escompte.

mais je suis bloqué à cet endroit ici :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
$(".id_employe").click(function () {
 
		var id = $(this).attr("id");
 
		//alert("identifiant : " + id);
 
		$.ajax(
		{
			async:true,
			type: "GET",
			url: "pages/services/gestion_geolocalisation/carte.php",
			data: "id_tech="+id,
			success: function myCallback(response) { 
				// alert("réponse : " + response);
				//;
				// var msg = $.getScript("js/carte.js", response, addLoadEvent);
				// alert("message : " + msg);
				$('#map_canvas').html("message : " + msg);
			} 
		});
	})

En faisant celà j'ai les coordonnées qui apparaissent là ou il y a normalement la googlemap, mais là non j'ai juste les coordonnées qui apparaissent.

youhouuuuuuuuuuu
j'ai trouvé ^^
ouffffffffffffffffff
enfin :)

bon en fait j'avais dans un fichier js ce 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
			var latitude = "";
			var longitude = "";
 
			function addLoadEvent(response) 
			{
				var coord = response.split(',');
					latitude = coord[0];
					longitude = coord[1];
 
				var script = document.createElement("script");
				script.type = "text/javascript";
				script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize&lati="+latitude+"&longi="+longitude;
				adresse =  "http://maps.google.com/maps/api/js?sensor=false&callback=initialize&lati="+latitude+"&longi="+longitude;
 
 
				document.body.appendChild(script);
			}
 
 
			function initialize()
			{
				if(latitude=="")
				{
					var latlng = new google.maps.LatLng(50.2900072348598, 2.80428163201338);
				}
				else
				{
					var latlng = new google.maps.LatLng(latitude , longitude);
				}
				var myOptions = {
					zoom: 12,
					center: latlng,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				};
				var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 
				var marker = new google.maps.Marker({
					position: latlng,
					map: map,
					title: "Technicien"
				});
				/*
				// affichage des informations se rapportant au technicien.
				var infowindow = new google.maps.InfoWindow({
					content: "<?php echo "<b>".$result[0]->nom_emp.' '.$result[0]->prenom_emp .'</b><br />Tel.: '.$result[0]->numtel_emp ; ?>"
				});
				*/
				google.maps.event.addListener(marker, 'click', function() {
				  infowindow.open(map,marker)
				});
 
				var cercle = new google.maps.Circle({ // créer un cercle autour du marqueur
					center: latlng,				// position du marqueur
					map: map,					// style de carte
					fillColor: "#0066CC",		// Couleur de l'intérieur du cercle
					strokeColor: "#0033CC",		// Couleur du rebord
					strokeWeight: 2,			// Épaisseur du rebord
					radius:2000 				// Distance en mètre par rapport au centre trouvé(ici 2km)
				});
			}

Ce qui me permet donc de faire ce que je recherchais, à savoir le rafraichissement de la google map en fonction de l'identifiant de façon dynamique grâce à jquery :) :pc:

22/03/2010, 10h57
emmanuel.remy

Re,

Je ne comprends pas pourquoi tu es obligé de recréer un objet Map étant donné qu'il existe la fonction setCenter.

Mais bon si cela fonctionne...

Et je pense que tu devrais ramener tes coordonnées au format JSON et utiliser $.getJSON; ce serait beaucoup plus simple.

Bon dev,

ERE
22/03/2010, 11h00
Jasou

Merci de ces informations en plus, ca me permettra d'améliorer tout ceci ^^