afficher plusieurs marker sur une carte

**l'coy** · 25/02/2011, 16h03

Bonjour à tous,

voilà j'ai écris un code afin de créer des Marker et des événements associés, mais le soucis c'est qu'il n'affiche que le premier marker avec le dernier message.

Et je ne sais pas du tout comment y remédier.

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
 
//Fonction qui permet de créer des marqueurs
function CreationDeMarqueur (pts,message){
	alert(pts);
	//message contenu dans l'infobulle
        var contenuInfoBulle = message;
	//création de l'infobulle
	var infoBulle = new google.maps.InfoWindow({
	content: contenuInfoBulle
	})
	//création des option du marqueur
	var optionsMarqueur = {
	  position: pts1,
	  map: maCarte,
          title: "Titre de mon premier marqueur"
	}
	// création du Marqueur
	var marqueur = new google.maps.Marker(optionsMarqueur);
	//Créer un événement au click sur le marqueur voulu
	google.maps.event.addListener(marqueur, 'rightclick', function() {
	infoBulle.open(maCarte, marqueur);
	});
return marqueur;
}
 
//Point1
var pts1 = new google.maps.LatLng(48.85846111697847, 2.2944045066833496);
CreationDeMarqueur (pts1,"j'ai réussi");
 
var pts2 = new google.maps.LatLng(43.717917,7.754516);
 
CreationDeMarqueur (pts2,"j'ai tout réussi");
 
 
// avec la base de données
 
<?php
                  
  // On affiche chaque entrée une à une
while ($donnees = $reponse->fetch())
{
?>
  // marqueur pts
var pts3 = new google.maps.LatLng('<?php echo $donnees['latitude']; ?>','<?php echo $donnees['longitude'] ; ?>');
 
CreationDeMarqueur(pts3, '<?php echo $donnees['Description']; ?>');
 
<?php
                
}
 
$reponse->closeCursor(); // Termine le traitement de la requête
                        
?>

Si je met que un marker il s'affiche au bon endroit avec le bon message, mais dès qu'il y en a plus qu'un marker, alors il y a toujours un seul marker qui s'affiche mais avec le dernier message passé en paramètre.

Merci de bien vouloir m'aider.

**Amnesiak** · 08/03/2011, 15h07

Salut à toi,

Dans ta fonction, tu fais référence à "pts1" qui est donc globale... Ne serait-ce pas plutôt "pts" ?

Code :

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

1
2
3
4
5
6
7
//création des option du marqueur
var optionsMarqueur = {
  position: pts,
  map: maCarte,
  title: "Titre de mon premier marqueur"
}

**NoSmoking** · 11/03/2011, 13h37

Bonjour, je dirais à brûle pourpoint que tu t'y prends maladroitement pour créer tes markers.

Il me semble préférable de créer un tableau d'objets comportant les différentes données que tu veux exploiter.
exemple :

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
var tMarker = [
  { lat : 44.837368,
    lon : -0.576144,
    title : 'Bordeaux'
  },
  { lat :45.767299,
    lon : 4.834329,
    title : 'Lyon'
  },
  {lat :43.297612,
   lon : 5.381042,
   title : 'Marseille'
  },
  {
    lat : 48.856667,
    lon :  2.350987,
    title : 'Paris'
  }
];

Par la suite il te suffit de créer tes markers dans une boucle.
exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function createMarqueur( tab, map){
  var oLatLng, oMarker, data;
  var i, nb = tab.length;
 
  for( i = 0; i < nb; i++){
    data = tab[i];
    oLatLng = new google.maps.LatLng( data.lat, data.lon);
    oMarker = new google.maps.Marker({
      position : oLatLng,
      map : map,
      title : data.title
    });
  }
}

avec un appel à ta fonction de la manière suivante

Code :

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

1
2
  // creation des marqueurs
  createMarqueur( tMarker, map);

ou map est la map créer pour affichage dans la fonction initialize.

**renaud26** · 01/04/2011, 19h39

Bonjour à tous,

J'ai un peu la même question, sauf que moi, j'ai au départ un tableau PHP...
Comment je peux faire pour le passer à JS ?

Ou il y a une autre soluce ?
Je veux bien des tuyaux...

**gdlmus** · 23/04/2011, 22h01

Bonjour @ tous,

Je suis aussi à la recherche de la solution que demande renaud26...

Comment passer une array dimentionelle de php vers javascript.

J'ai essayé avec echo '<script type='text/javascript'> etc' mais cela ne fonctionne pas...

Merci pour une éventuelle idée.

-= Guy =-

**Bovino** · 23/04/2011, 23h24

Comment utiliser en JavaScript un tableau PHP ?

**gdlmus** · 23/04/2011, 23h43

Merci Bovino,

Mais cela ne fonctionne pas pour un tableau multidimensionnel de type:

Code :

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

 $points[$count] = Array( $row['latitude'], $row['longitude'], $row['city_name']  );

Données extraites d'une mySQL BDD.

Et on continue les recherches.

Merci.

-= Guy =-

**renaud26** · 24/04/2011, 07h32

Bonjour,

Si c'est pour passer des coordonnées à une API GoogleMap et afficher les différents points sur la carte, voici comment j'ai fait, au final :

1- Télécharge cette classe : http://www.phpinsider.com/php/code/GoogleMapAPI/

Puis dans la page où tu veux afficher la carte :

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
 
<?php
require('GoogleMapAPI.class.php');
$map = new GoogleMapAPI('map','restaurants');
$map->setAPIKey('ici-ta-clef-API-googleMap');
//taille de la map
$map->setHeight("600"); //hauteur
$map->setWidth("700"); //largeur
//réglages divers, voir la doc de la classe
$map->disableTypeControls();
$map->setMapType('map'); // default
$map->disableDirections();
$map->enableZoomEncompass();
$map->enableOverviewControl();
$infos_resto = "";
foreach($points as $datas){ // ce bon vieux tableau PHP
 
$longitude = $datas['PR'][0];	
$latitude = $datas['PR'][1];
 
//données pour l'infobulle des markers
$nom_resto = $datas['PR'][2];
$adresse_resto = $datas['PR'][3];
$adresse2_resto = $datas['PR'][4];
$lieu_dit = $datas['PR'][5];
$code_postal_resto = $datas['PR'][6];
$ville_resto = $datas['PR'][8];
 
//formatage des infobulles adresses qu'on passera en param à la classe
$infos_resto = $nom_resto . "<br>" . $adresse_resto . "<br>";
if($adresse2_resto != "" && $adresse2_resto != " "){
	$infos_resto .= $adresse2_resto . "<br>";
}
if($lieu_dit != ""){
	$infos_resto .= $lieu_dit."<br>";
}
$infos_resto .= $code_postal_resto . " " . $ville_resto;
 
if($longitude != "" && $latitude != ""){
    $map->addMarkerByCoords($longitude, $latitude, $infos_resto);
}
}
?>

Puis la partie 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
63
64
65
66
67
68
69
70
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Liste des Restaurants</title>
<link rel="stylesheet" type="text/css" href="googleMap.css">
<style>
v:* {     
behavior:url(#default#VML);   
}   /*pour les infobulles de la carte*/   
#gmapmarker {      
font: normal small verdana, arial, helvetica, sans-serif;       
font-size: 10pt;    
margin: 0px;    
width: 400px;       
height: 80px;      
overflow:auto;   
}
 
#gmapmarker p{      
margin : 0;     
padding : 2px 0 2px 0;   
}
 
#gmapmarker a {
text-decoration: none; 
color: #0066CC; 
background-color: transparent;
}
 
#gmapmarker a:hover {
color: #F60; 
background-color: transparent;
}
 
#gmapmarker h1 {    
font-weight: bold;      
font-size: 13px;        
color: #369;        
border-bottom: 2px solid #369;      
padding : 2px;      
margin : 0;   
}
</style>
 
<?php
$map->printHeaderJS(); 
$map->printMapJS(); 
//charge les fonctions JS nécessaires dans le HEAD
?>
</head>
 
<body style="background-color:#FFF; margin:0px" onload="onLoad()">
<table border="1" width="700" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<?php $map->printMap(); ?>
//affiche la carte
</td>
</tr>
<tr>
<td class="normal">
<?php //$map->printSidebar(); ?> 
// ça, c'est si tu veux une zone sous la carte qui reprend toutes les adresses.
</td>
</tr>
</table>
</body>
</html>

Et ça affiche une jolie carte avec les markers des adresses, les infobulles...
Voila, j'espère que ça peut t'aider.
Bonne journée.

afficher plusieurs marker sur une carte

APIs Google

Discussions similaires

Partager

Partager