Affichage dans une boucle

**astroma** · 31/08/2012, 00h05

Bonsoir,

Voila je me permets de venir poster ici mon message suite à une discusion dans le forum javascript. Vous le comprendrez rapidement je ne suis pas un pro mais j'essaye de réaliser un site correctement sur un sujet qui me plait.

Mon problème est le suivant. J'ai un souçi d'affichage suite à l'installation du script de google map. Je cherche une solution à ce problème.

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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html xmlns="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" Charset="UTF-8" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" /><!----- Encodage en UTF-8 de la page ---->
 
 
	<meta charset="utf-8" />
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
 
 
	</head>
 
	<body  onload="initialize()" >
 
<?php
 
 
// ouverture d'une connexion ...
 
 
$resultats=$connexion->query("

select h_id, h_ev,h_lieu, h_lat,h_long from historique limit 0,2
                                                
"); // on va chercher tous les membres de la table qu'on trie par ordre croissant
$resultats->setFetchMode(PDO::FETCH_ASSOC); // on dit qu'on veut que le résultat soit récupérable sous forme d'objet
 
 
                                                
$javascript= '<script type="text/javascript">' .'function initialize() {';      
?>
 <div id="container">
<?php
while( $ligne = $resultats->fetch() ) // on récupère la liste des membres
{
$map = 'map'. $ligne['h_id'];
 
        
// on boucle sur le javascript
$javascript .=
'var latlng'. $ligne['h_id'].  '= new google.maps.LatLng('.$ligne['h_lat'].','.$ligne['h_long'].'); 
                                        var options'.$ligne['h_id']. ' = {
                                          zoom: 13,
                                          center: latlng'. $ligne['h_id'].',
                                          mapTypeId: google.maps.MapTypeId.ROADMAP
                                        };
                                         
var '.'map'. $ligne['h_id'] .'= new google.maps.Map(document.getElementById("'. $map .'"), options'.$ligne['h_id']. ');' .
                                        
                                        'var marker = new google.maps.Marker({'.
                       'position: latlng'.$ligne['h_id'].','.
                       'map: map'.$ligne['h_id'].','.
                       'title: "evenement"'.
                       '});';
// fin boucle javascript
 
// on boucle sur HTML
 
?>
 
        <div id="$map">
            <p>Veuillez patienter pendant le chargement de la carte...</p>
        </div>
 
<?php
                                                
} // fin du while sur les événements id="map'.$ligne['h_id'].'"
 
$javascript .= '} </script>';
 
echo $javascript ;  // on affiche le javascript
 
 
$resultats->closeCursor(); // on ferme le curseur des résultats
?>
    </div>
 
</body>
</html>

Et le html qui en résulte

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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" Charset="UTF-8" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" /><!----- Encodage en UTF-8 de la page ---->
 
 
	<meta charset="utf-8" />
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
 
 
	</head>
 
	<body  onload="initialize()" >
 
 <div id="container">
 
        <div id="$map">
            <p>Veuillez patienter pendant le chargement de la carte...</p>
        </div>
 
 
        <div id="$map">
            <p>Veuillez patienter pendant le chargement de la carte...</p>
        </div>
 
<script type="text/javascript">function initialize() {var latlng1= new google.maps.LatLng(47.5868,1.33143); 
					var options1 = {
					  zoom: 13,
					  center: latlng1,
					  mapTypeId: google.maps.MapTypeId.ROADMAP
					};
 
var map1= new google.maps.Map(document.getElementById("map1"), options1);var marker = new google.maps.Marker({position: latlng1,map: map1,title: "evenement"});var latlng2= new google.maps.LatLng(47.5868,1.33143); 
					var options2 = {
					  zoom: 13,
					  center: latlng2,
					  mapTypeId: google.maps.MapTypeId.ROADMAP
					};
 
var map2= new google.maps.Map(document.getElementById("map2"), options2);var marker = new google.maps.Marker({position: latlng2,map: map2,title: "evenement"});} </script>    </div>
 
</body>
</html>