[ Google Map ] Liste défilante de marqueurs

diving-seller · 7 Février 2011

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 :


<?php
require("Connexion.php");  // J'utilise les ident 


/* 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 */
$documentXML = new DOMDocument("1.0");
/* Création d'un nouveau noeud nommé "marqueurs" dans le document XML*/
/* Résultat : <marqueurs></marqueurs> */
$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 = _AT_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();

Et voila la carte :

<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é :   ' + marqueurs[i].getAttribute('level')  + '</li>' ;
		 var notation = '<br /><li>Intéret de la plongée :   ' + marqueurs[i].getAttribute('notation') + ' sur 5 ' + '</li>' ;
		 var prof = '<br /><li>Profondeur Maximale :   <font color=#FF0000>-' + marqueurs[i].getAttribute('prof') + ' Mètres ' + '</font></li>';
         var gps = '<br /><li>Coordonnées GPS :   ' + 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 :     ' + 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>

Votre aide sera mon miracle !

weboblog · 8 Février 2011

Bonjour Diving-Seller,

J'ai regardé un peu ton code et voici quelques commentaires / actions qui pourraient résoudre ton problème :

1_ Déclarer ta map avec tes variables globales: var map;

et conserver son instanciation dans ta fonction load: map = new google.maps.Map(document.getElementById("map"), options);

Cette première étape t'évitera de passer la variable "map" à tes fonctions, notamment l'appel à ta fonction "bindInfoWindow".

2_ Ajouter 2 variables globales, à savoir :

var html = [];

var m = 0;

3_ Remplacer html = nom + type + notation + level + prof + gps par html[m] = nom + type + notation + level + prof + gps;

4_ Remplacer :

var marqueur = new google.maps.Marker({

map: map,

position: point,

icon: icon.icon

});

Par

var marqueur = new google.maps.Marker({

map: map,

position: point,

infobulle : html[m],

icon: icon.icon

});

5_ Remplacer :

tableaumarqueurs=marqueur;

bindInfoWindow(marqueur, map, infoWindow, html);

contenuListe += '<li><a href="javascript:bindInfoWindow(marqueur,map,infoWindow,html)">' + nom +'</a></li>';

Par

tableaumarqueurs.push(marqueur);

google.maps.event.addListener(marqueur, 'click', function() {

infoWindow.setContent(this.infobulle);

map.setCenter(this.position);

infoWindow.open(map, this);

});

contenuListe += '<li><a href="javascript:bindInfoWindow('+m+')">' + nom +'</a></li>';

6_ Modifier ta fonction bindInfoWindow comme ci-dessous:

function bindInfoWindow(m) {

infoWindow.setContent(html[m]);

map.setCenter(tableaumarqueurs[m].position);

infoWindow.open(map, tableaumarqueurs[m]);

}

Pour information, tu peux aussi sortir la création de ton marker "ILE" de la boucle en le mettant avant par exemple.

Cdlt,

diving-seller · 8 Février 2011

Merci énormement de ton aide !!!! :thumbsup:

Le probleme avance plutôt bien !

Quand je clique sur les marqueurs , la reaction est celle attendue : c'est parfait.

la où ca change c'est que maintenant le clique dans la liste du coté , m'ouvre toujours le meme marqueur " Les tunnels " , le dernier marqueur de la liste.

Au moins deja il y a une reaction apres le clique , mais il doit pas transmettre le bon. Lien nouveau de l'erreur

je remet le code modifié :


/* Déclaration des variables globales */
		var contenuListe = "";
		var tableaumarqueurs = [];
	    var html = [];
		var map;
        var m = 0;
		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
	};

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é :   ' + marqueurs[i].getAttribute('level')  + '</li>' ;
		 var notation = '<br /><li>Intéret de la plongée :   ' + marqueurs[i].getAttribute('notation') + ' sur 5 ' + '</li>' ;
		 var prof = '<br /><li>Profondeur Maximale :   <font color=#FF0000>-' + marqueurs[i].getAttribute('prof') + ' Mètres ' + '</font></li>';
         var gps = '<br /><li>Coordonnées GPS :   ' + 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 :     ' + 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[m] = nom + type + notation + level + prof + gps;
          var icon = customIcons[icone] || {};
          var marqueur = new google.maps.Marker({
map: map,
position: point,
infobulle : html[m],
icon: icon.icon
});

		 tableaumarqueurs.push(marqueur);
google.maps.event.addListener(marqueur, 'click', function() {
infoWindow.setContent(this.infobulle);
map.setZoom(16);
map.setCenter(this.position);
infoWindow.open(map, this);
});
contenuListe += '<li><a href="javascript:bindInfoWindow('+m+')">' + nom +'</a></li>';

        }
		contenuListe += '</ol>';
		document.getElementById("EmplacementDeLaListe").innerHTML = contenuListe;
       });
    }
	function bindInfoWindow(m) {
infoWindow.setContent(html[m]);
map.setCenter(tableaumarqueurs[m].position);
map.setZoom(16);
infoWindow.open(map, tableaumarqueurs[m]);
};
    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() {}
    //]]>

Modifié 8 Février 2011 par diving-seller

weboblog · 8 Février 2011

Effectivement, j'ai oublié de te faire incrémenter la variable "m".

Ajoute juste m++; après contenuListe += '<li><a href="javascript:bindInfoWindow('+m+')">' + nom +'</a></li>';

Ça devrait être bon.

Cdlt,

diving-seller · 10 Février 2011

Ca marche du tonnerre !

Merci énormement pour ton aide ! Je vais pouvoir continuer mes projets

Notamment mettre des onglets dans les infosbulles , mais dans l'API v3 ca n'a pas l'air possible :s

Connexion

[ Google Map ] Liste défilante de marqueurs

Sujets conseillés

diving-seller

weboblog

diving-seller

weboblog

diving-seller

Veuillez vous connecter pour commenter

Parcourir

Activité