google map géolocalisation inversée

**Jasou** · 15/03/2010, 13h12

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

**emmanuel.remy** · 16/03/2010, 00h35

Salut,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Jasou** · 17/03/2010, 09h26

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 :

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

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

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
 
$(".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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Jasou** · 18/03/2010, 15h30

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

mais je suis bloqué à cet endroit ici :

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
 
$(".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.

**Jasou** · 22/03/2010, 10h49

youhouuuuuuuuuuu
j'ai trouvé ^^
ouffffffffffffffffff
enfin

bon en fait j'avais dans un fichier js ce 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
			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

**emmanuel.remy** · 22/03/2010, 11h57

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

**Jasou** · 22/03/2010, 12h00

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

google map géolocalisation inversée

APIs Google

Discussions similaires

Partager

Partager