Bonjour,

Je travaille actuellement sur la création d'un jeu online par navigateur, ça fait plusieurs mois que je travaille dessus : http://warcity.franceserv.com/index.php.
J'en suis au 1/4 du jeu, il est à l'état brut, je suis en train de créer les mécanismes les calculs etc...
Ce n'est pas facile quand on a peu de connaissances mais j'avance.

En ce moment je suis sur un problème de taille, car je découvre comme beaucoup les codes html, php, etc...
Et google map me pose problème. Je suis complètement dans le vent car le javascript n'est pas copain. J'ai donc vraiment besoin d'aide à ce niveau.

Ainsi je vous ai mis ci-joint le code de ma page carte. Je suis arrivé à enregistrer les points coordonnés lat et lng dès l'enregistrement du joueur
et également de reprendre tous les points enregistrés via mysql et les mettre sur la carte pour l'ensemble des joueurs.

marker bleu pour le joueur principal et marker rouge pour les autres joueurs.

Voici ce que je souhaiterais :

1er point - avoir une info bulle lorsque l'on clique sur les markers rouges
à l'intérieur de l'infobulle, que je puisse avoir le nom du joueur
par conséquent dans mon code "username"

2ème point - également ce qui serait super, c'est d'avoir un bouton vers une direction quelconque (ça m'aiderai beaucoup pour la suite de mon programme)

Et c'est vraiment si vous avez un peu de temps à me consacrer, ce qui serait encore plus que super, c'est d'avoir un bouton avec le défilement de la liste des joueurs et lorsque l'on clique sur le nom du joueur, le marker est repéré avec cette activation :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
 //  animation: google.maps.Animation.BOUNCE,
Ainsi le marker repéré, on clique sur ce marker, l'infobulle réagit et on voit le nom du joueur et bien sur le fameux bouton.

Après je pense que je vais pouvoir me débrouiller.
Merci par avance pour votre aide, ça m'aidera énormément.


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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
 
<?php
include"config.php";
 
	if(isset($_SESSION['username']))
{
$dn1 = mysql_fetch_array(mysql_query('select username,lat,lng from users where username="'.$_SESSION['username'].'"'));
 
$lat_perso = htmlentities($dn1['lat'], ENT_QUOTES, 'UTF-8');
$lng_perso = htmlentities($dn1['lng'], ENT_QUOTES, 'UTF-8');
$nom_perso = htmlentities($dn1['username'], ENT_QUOTES, 'UTF-8');
 
$result = mysql_query("SELECT username, lat, lng FROM users WHERE username <> '".$_SESSION['username']."'"); 
$listeDesJoueurs = htmlentities($result['username'], ENT_QUOTES, 'UTF-8');
 
$listeDesPoints='';
while($row = mysql_fetch_array($result)){
  if($listeDesPoints!='') $listeDesPoints.=','; 
  $listeDesPoints.='['.$row['lat'].','.$row['lng'].']'; 
 
  $listeDesJoueurs.='['.$row['username'].']';
 
}
 
echo $listeDesJoueurs;
echo $listeDesPoints;
 
?>	
 
<html>
<head>
               <title>CARTE DU MONDE</title>
 
 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
 
<script type="text/javascript">
function initialize(){
 
	var centreCarte = new google.maps.LatLng(46.227638, 2.213749);
 
     var optionsCarte = {
          zoom: 5,
          center: centreCarte,
          keyboardShortcuts: true,
          scrollwheel: true,
          panControl: true,
          mapTypeControl: true,
          overviewMapControl: true,
          rotateControl: true,
          scaleControl: true,
          streetViewControl: true,  
          zoomControl: true,        
          mapTypeId: google.maps.MapTypeId.TERRAIN                                       
     }
 
     var Carte = new google.maps.Map(document.getElementById("map_canvas"), optionsCarte);
 
     var imageMarqueur = new google.maps.MarkerImage('images/marker_bleu.png', 
	 new google.maps.Size(64, 64),
	 new google.maps.Point(0,0), 
	 new google.maps.Point(9, 33));
 
 
var coordonnees2 = new google.maps.LatLng (<?php echo $lat_perso;?> , <?php echo $lng_perso;?>);
 
    var marqueur2 = new google.maps.Marker({
          position: coordonnees2,
          map: Carte,
          title: "<?php echo $nom_perso?>",
          icon: imageMarqueur
 
     });
 
	 var message = "<?php echo $nom_perso?>";
   var infowindow = new google.maps.InfoWindow({
       content: message,
       size: new google.maps.Size(25,25)
   });
   google.maps.event.addListener(marqueur2, 'click', function() {
       infowindow.open(Carte,marqueur2);
   }); 
 
 
var liste_des_points=[
<?php echo $listeDesPoints; ?>
];
 
var i=0,li=liste_des_points.length;
while(i<li){
  var marqueur1 = new google.maps.Marker({
          position: new google.maps.LatLng(liste_des_points[i][0], liste_des_points[i][1]),
          map: Carte,
          title: "<?php echo $listeDesJoueurs; ?>",//"joueur" +i,
		   // icon: imageMarqueur
		 //  animation: google.maps.Animation.BOUNCE,
 
		  });  
 
//		   var message1 = "<?php echo $listeDesJoueurs;?>";
  // var infowindow1 = new google.maps.InfoWindow({
  //     content: message1,
  //     size: new google.maps.Size(25,25)
 //  });
 
 //  google.maps.event.addListener(marqueur1, 'click', function() {
 //      infowindow1.open(Carte,marqueur1);
 //  }); 
 
  i++;
 
}
 
}
</script>	
</head>
<center>
<h1>LA CARTE DU MONDE</h1><BR>
<body onload="initialize()" >
<div id="map_canvas" style="width:900px; height:450px"></div><br>
<img src="images/marker_bleu.png" /> ma citée
<img src="images/marker_rouge.png"alt="autres joueurs"/> les autres citées<br>
</center>
<a href="index.php">Mon bureau</a><br />
<a href="connexion.php">Se d&eacute;connecter</a>
<?php
}
else
{
?>
<a href="sign_up.php">Inscription</a><br />
<a href="connexion.php">Se connecter</a>
<?php
}
?>
</body>
</html>