Discussion :

[p_m_g]

Bonjour,

je dois mettre en place un petit script qui affichera une liste de marqueurs (villes) avec zoom automatique sur la zone (utilisation de fitBounds et LatLngBounds).
sur autre application j'ai déjà créé un tableau avec les coordonnées gps dedans et ça fonctionne bien.

mais là, je n'ai pas les coordonnées mais j'ai le noms des villes.
donc, je comptais géocoder chaque nom de ville pour récupérer les coordonnées gps et les insérer dans un tableau que je parcours par la suite. sauf que je n'y arrive pas et mon tableau est vide (sauf l'insertion manuelle).

voici le bout de script JS :

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
 
var tableauLieux = []; // Nous crééons 1 tableau qui va indiquer les adresses et autres renseignements à afficher sur la carte
var geocoder;
 
function ckeck_adress(adresse) {
	geocoder = new google.maps.Geocoder();
 
	geocoder.geocode({ 'address': adresse}, function(results, status) {
 
		// Si l'adresse a pu être géolocalisée 
		if(status == google.maps.GeocoderStatus.OK)
		{
			// Récupération de sa latitude et de sa longitude
			Lat = results[0].geometry.location.lat();
			Long = results[0].geometry.location.lng();
 
			tableauLieux.push( new google.maps.LatLng(Lat, Long));
			//tableauLieux.push(results[0].geometry.location);
 
		}
		else
		{
			alert("Le géocodage n\'a pu etre effectue pour la raison suivante: " + status);
		}
	});
}
 
function test() {
	// insertion d'une commune en manuel (paris)
	tableauLieux.push(new google.maps.LatLng(48.8566667, 2.3509871));
 
	<?php
        // on recupère les 3 1ères communes pour le test
        for($i=0; $i < 3; $i++)
        {
        ?>
		ckeck_adress("<?php echo addslashes($tab_com[$i]['nom_com']).", ".$DPT; ?>");
	<?php
        }
        ?>
 
 
var optionsCarte = {
	mapTypeId: google.maps.MapTypeId.ROADMAP
};
maCarte = new google.maps.Map(document.getElementById("map"), optionsCarte);
bounds = new google.maps.LatLngBounds();
//alert(tableauLieux.length);
for (var i = 0; i < tableauLieux.length; i++)
{
	var Lieu = tableauLieux[i];
 
	bounds.extend(Lieu);
 
	var marqueurLieu = new google.maps.Marker({
		position: Lieu,
		map: maCarte,
		title: ""
	});
}
maCarte.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', test);

Merci pour l'aide.

[NoSmoking]

Bonjour,
la fonction passée en paramètre de la méthode geocode est une fonction "callback" qui s'exécutera lorsque geocode renverra une réponse et ce de façon asynchrone, donc pas forcément tout de suite.

De ce fait tu lances x fois la fonction, qui rend donc la main, et le code continu de s'exécuter, d'où le fait que le tableau est vide au moment de la lecture.

Il te faut donc revoir ta façon d'ordonnancer ton code.

Remarque sur le code :

Code :

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

1
2
3
4
5
6
7
8
9
// Si l'adresse a pu être géolocalisée
if(status == google.maps.GeocoderStatus.OK){
	// Récupération de sa latitude et de sa longitude
	Lat = results[0].geometry.location.lat();
	Long = results[0].geometry.location.lng();
 
	tableauLieux.push( new google.maps.LatLng(Lat, Long));
	//tableauLieux.push(results[0].geometry.location);
}

pourquoi décomposer en Lat/Lng pour recompacter en objet LatLng au moment du push? La ligne en commentaire est bien mieux.

[p_m_g]

Merci pour cette 1ère réponse.

il faudrait que je stoppe le code tant que je n'ai pas de retour de la fonction ?

là je ne voit pas trop du coup ?

[p_m_g]

quelqu'un aurait une petite idée sur mon problème ??

[NoSmoking]

que d'impatience!!! important, le reste aussi d'ailleurs

Concernant ton problème
1/ construire la map
2/ faire l'appel à ta fonction dans une boucle
3/ DANS la fonction de callback, et uniquement dans celle ci, afficher le marker et recentrer la carte.

en bonus 62 lignes de pur bonnheur

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
59
60
61
62
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>[Google Maps API v3] Geocoding à la volée</title>
<style type="text/css">
html, body {
  height : 100%;
}
#div_canvas {
  margin : auto;
  width : 600px;
  height : 600px;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=fr"></script>
<script type="text/javascript">
var data =[
  { adresse : 'Bordeaux, FRANCE'},
  { adresse : 'Paris, FRANCE'   },
  { adresse : 'Lille, FRANCE'   },
  { adresse : 'Rennes, FRANCE'  }
];
var geocoder;
var oMap;
var oBounds = new google.maps.LatLngBounds();
 
function initCarte() {
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(45, 3);
  var myOptions = {
    zoom : 8,
    center : latlng = new google.maps.LatLng(45.0, 3.0),
    backgroundColor : '#fff',
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  oMap = new google.maps.Map(document.getElementById("div_canvas"), myOptions);
 
  for( var param=0; param < data.length; param++){
    codeAddress( data[param].adresse);
  }
}
function codeAddress(address){
  geocoder.geocode( { 'address': address}, function(results, status) {
    if( status == google.maps.GeocoderStatus.OK) {
        oBounds.extend(results[0].geometry.location);
      var marker = new google.maps.Marker({
          map : oMap, 
          position: results[0].geometry.location
      });
      oMap.fitBounds( oBounds);
    }
  });
}
google.maps.event.addDomListener(window, 'load', initCarte);
</script>
</head>
<body>
  <div id="div_canvas"></div>
</body>
</html>

pas commentées mais bon

[p_m_g]

Merci beaucoup !!
j'ai comparé avec ce que j'avais fais.
en fait, je n'ajoutais pas chaque point dans la zone (ligne 53 et 61).
je poste mon code dès que j'ai fini celà.