Bonjour à tous !

j'ai vraiment besoin de votre aide. J'ai crée un site avec une carte google , il y a longtemps et depuis j'ai eu beaucoup de boulot et maintenant j'ai remarqué que ma carte ne fonctionne plus suites aux Maj de google ou des navigateurs.

J'ai réussi à la rétablir mais il reste certain bug qui m'echappent vu que je n'ai plus le nez dans les codes depuis bien longtemps.

Ma carte prend ses points gps dans une base SQL, et cré également une liste défilante sur le coté.

Quand je clique sur les marqueurs de la carte : l'infobull apparait mais à la limite rien ne se passe coté liste défilante.
Quand je clique sur un nom de marqueur dans la liste, rien ne se passe sur la carte. Il doit avoir un probleme à ce niveau.

Et je n'arrive pas à centrer l'infobull ....

Si vous pouvez m'aider pour ces deux problemes c'est genial !

Si vous voulez voir le probleme : Lien de la Carte

Fichier XML :

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
<?php
require("Connexion.php");
 
 
/* Connexion au serveur mySQL */
$connexion=mysql_connect ($serveur, $username, $password);
mysql_query("SET NAMES UTF8");
if (!$connexion) {
die("Connexion impossible au serveur SQL : " . mysql_error());
}
/* Sélection de la base de données mySQL */
$db_selected = mysql_select_db($database, $connexion);
if (!$db_selected) {
die ("Utilisation de la base de données impossibe : " . mysql_error());
}
/* Création d'un nouveau document au format XML nommé "documentXML" */
$documentXML = new DOMDocument("1.0");
/* Création d'un nouveau noeud nommé "marqueurs" dans le document XML nommé "documentXML" */
/* Résultat : <marqueurs></marqueurs> (Attention : marqueurs au pluriel)*/
$node = $documentXML->createElement(utf8_encode("marqueurs"));
/* Création d'une nouvelle liste de fils au noeud "marqueurs" */
$parnode = $documentXML->appendChild($node);
/* Construction de la requête et sélection des "marqueur" contenus dans la table "marqueurs" */
$requete =  sprintf("SELECT * FROM lieux WHERE 1");
 
$resultat = mysql_query($requete);
if (!$resultat) {
die("Requête invalide : " . mysql_error());
}
/* Sélection de tous les "marqueur" contenus dans la table "marqueurs" */
/* Création d'une boucle pour la construction de chaque noeud */
while ($ligne = @mysql_fetch_assoc($resultat)){
/* Création d'un nouveau noeud nommé "marqueur" dans le document XML nommé "documentXML" */
/* Ce qui nous donne : <marqueur /> (Attention : marqueur au singulier)*/
$node = $documentXML->createElement("marqueur");
/* Insertion du noeud <marqueur /> dans le noeud parent <marqueurs></marqueurs> */
/* Résultat : <marqueurs><marqueur /></marqueurs> */
$newnode = $parnode->appendChild($node);
/* Ajout dans la balise <marqueur /> d'un attribut nommé "nom" ayant pour valeur $ligne['nom'] */
/* Résultat : <marqueurs><marqueur nom="Musée du compagnonage" /></marqueurs> */
$newnode->setAttribute("latitude", $ligne['latitude']);
 
$newnode->setAttribute("longitude", $ligne['longitude']);
 
$newnode->setAttribute("nom", $ligne['nom']);
 
$newnode->setAttribute("url", $ligne['url']);
 
$newnode->setAttribute("ile", $ligne['ile']);
 
$newnode->setAttribute("notation", $ligne['notation']);
 
$newnode->setAttribute("type", $ligne['type']);
 
$newnode->setAttribute("icone", $ligne['icone']);
 
$newnode->setAttribute("level", $ligne['level']);
 
$newnode->setAttribute("prof", $ligne['prof']);
 
$newnode->setAttribute("gps", $ligne['gps']);
}
/* Affichage du résultat */
echo $documentXML->saveXML();
ensuite voila 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
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
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 
	<head>
		<title>Diving Map</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		   <title> Google Maps Example</title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
    //<![CDATA[
 
	/* Déclaration des variables globales */
		var contenuListe = "";
		var tableaumarqueurs = [];
		var html="";
		var infoWindow = new google.maps.InfoWindow;
		var bounds = new google.maps.LatLngBounds();
 
/* Déclaration de la variable "urlXml" avec le chemin et le nom du fichier XML avec les coordonnées des sites   */
		var urlXml = "genxml.php";
 
 var customIcons = {
      spot: {
        icon: 'vert.png'
      },
      ile: {
        icon: 'ile.png'
      },
	  epave: {
        icon: 'epave.png'
      },
	  avion: {
        icon: 'avion.png'
      }
 
    };
 
 
 function load() {
	var latlng = new google.maps.LatLng(43.211182, 5.327511);
	var options = {
		center: latlng,
		zoom: 12,
		mapTypeId: google.maps.MapTypeId.SATELLITE
	};
 
var map = new google.maps.Map(document.getElementById("map"), options);
 
 
 
      downloadUrl(urlXml, function(data) {
        var xml = parseXml(data);
        marqueurs = xml.documentElement.getElementsByTagName("marqueur");
		contenuListe += '<ol>';
        for (var i = 0; i < marqueurs.length; i++) {
         var level = '<br /><li>Niveau Recommandé : &nbsp; ' + marqueurs[i].getAttribute('level')  + '</li>' ;
		 var notation = '<br /><li>Intéret de la plongée : &nbsp; ' + marqueurs[i].getAttribute('notation') + ' sur 5 ' + '</li>' ;
		 var prof = '<br /><li>Profondeur Maximale : &nbsp; <font color=#FF0000>-' + marqueurs[i].getAttribute('prof') + ' Mètres ' + '</font></li>';
         var gps = '<br /><li>Coordonnées GPS : &nbsp; ' + marqueurs[i].getAttribute('gps') + '</li></ul>' ;
		 var url = '<br /><center><a href="/' +  marqueurs[i].getAttribute('url') + '" target="_blank">Description Complete </a></center>';
		 var type = '</u></strong><br /><ul><li>Type de Plongée : &nbsp; &nbsp; ' + marqueurs[i].getAttribute('type') + '</li>' ;
         var nom = '<strong><u>' +  marqueurs[i].getAttribute('nom');
         var ile = marqueurs[i].getAttribute('ile');
		 var icone = marqueurs[i].getAttribute('icone');
         var point = new google.maps.LatLng(
              parseFloat(marqueurs[i].getAttribute("latitude")),
              parseFloat(marqueurs[i].getAttribute("longitude")));
         html = nom + type + notation + level + prof + gps;
          var icon = customIcons[icone] || {};
          var marqueur= new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon
         });
		 tableaumarqueurs[i]=marqueur;
         bindInfoWindow(marqueur, map, infoWindow, html);
		 contenuListe += '<li><a href="javascript:bindInfoWindow(marqueur,map,infoWindow,html)">' + nom +'</a></li>';
        }
		contenuListe += '</ol>';
		document.getElementById("EmplacementDeLaListe").innerHTML = contenuListe;
      });
    }
 
 
	function bindInfoWindow(marqueurs, map, infoWindow, html) {
      google.maps.event.addListener(marqueurs, 'click', function() {
        infoWindow.setContent(html);
		map.setZoom(16);
        infoWindow.open(map, marqueurs);
 
      });
    }
    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;
 
      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request.responseText, request.status);
        }
      };
 
      request.open('GET', url, true);
      request.send(null);
    }
 
    function parseXml(str) {
      if (window.ActiveXObject) {
        var doc = new ActiveXObject('Microsoft.XMLDOM');
        doc.loadXML(str);
        return doc;
      } else if (window.DOMParser) {
        return (new DOMParser).parseFromString(str, 'text/xml');
      }
    }
 
    function doNothing() {}
    //]]>
 
  </script>
 
  </head>
 
  <body onLoad="load()">
  <div class="EncadrementDeMaCarte">
<div id="Container" style="position:relative; width:100%; height:400px">
    <div id="map" style="float: left; width: 60%;height: 650px; border: none"></div>
	<div id="EmplacementDeLaListe" style="overflow: auto; float: right; position: relative; width: 40%; height: 650px; border: none; background-color: #fff"></div>
</div>
  </body>
 
</html>