Insertion marqueurs cartographie via base de donnée MySQL

Bonjour à tous,

Je souhaite afficher sur mon site web une carte google maps sur laquelle apparaît des marqueurs dont les données sont dans une base de donnée mysql.

J'ai donc un premier fichier php qui convertit les données de ma base en données xml

cartographie.php

Code:

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
<?php if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") 
{
  if (PHP_VERSION < 6) {
    $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
  }
 
  $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);
 
  switch ($theType) {
    case "text":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;    
    case "long":
    case "int":
      $theValue = ($theValue != "") ? intval($theValue) : "NULL";
      break;
    case "double":
      $theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
      break;
    case "date":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;
    case "defined":
      $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
      break;
  }
  return $theValue;
}
}
 
$editFormAction = $_SERVER['PHP_SELF'];
$url = $_SERVER['HTTP_REFERER'];
 
if (isset($_SERVER['QUERY_STRING'])) {
  $editFormAction .= "?" . htmlentities($_SERVER['QUERY_STRING']);
}
function filter($in) {
	$search = array ('@[éèêëÊË]@i','@[àâäÂÄ]@i','@[îïÎÏ]@i','@[ûùüÛÜ]@i','@[ôöÔÖ]@i','@[ç]@i','@[ ]@i','@[^a-zA-Z0-9_]@');
	$replace = array ('e','a','i','u','o','c','_','');
	return preg_replace($search, $replace, $in);
}
 
	$user = "xxxxx";
	$password = "xxxxxx";
	$host = "xxxxxxx";
	$bdd = "cartographie";
	$database = "cartographie";
 
 
 
	// Start XML file, create parent node
 
$dom = new DOMDocument("1.0");
$node = $dom->createElement("markers");
$parnode = $dom->appendChild($node); 
 
// Opens a connection to a MySQL server
 
$connection=mysql_connect ($host, $user, $password);
if (!$connection) {  die('Not connected : ' . mysql_error());} 
 
// Set the active MySQL database
 
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
  die ('Can\'t use db : ' . mysql_error());
} 
 
// Select all the rows in the markers table
 
$query = "SELECT * FROM Donnees ";
$result = mysql_query($query);
if (!$result) {  
  die('Invalid query: ' . mysql_error());
} 
 
header("Content-type: text/xml"); 
 
// Iterate through the rows, adding XML nodes for each
 
while ($row = @mysql_fetch_assoc($result)){  
  // ADD TO XML DOCUMENT NODE  
  $node = $dom->createElement("marker");  
  $newnode = $parnode->appendChild($node);   
  $newnode->setAttribute("NOM_QUARTIER",$row['NOM_QUARTIER']);
  $newnode->setAttribute("VOIE", $row['VOIE']);  
  $newnode->setAttribute("Y_LAT", $row['Y_LAT']);  
  $newnode->setAttribute("X_LONG", $row['X_LONG']);  
  $newnode->setAttribute("ADRESSE", $row['ADRESSE']);
} 
 
echo $dom->saveXML();
 
?>

et voici ma page html qui affiche la carte : index.html

Code:

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
<?php
include 'cartographie.php';
 
	?>
  <head>
 
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
    //<![CDATA[
 
    var customIcons = {
      NORD: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
      },
      SUD: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
      }
    };
 
    function load() {
      var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(44,8558420848251, -0,625796800184256),
        zoom: 13,
        mapTypeId: 'roadmap'
      });
      var infoWindow = new google.maps.InfoWindow;
 
      // Change this depending on the name of your PHP file
      downloadUrl("cartographie.php", function(data) {
        var xml = data.responseXML;
        var Donnees = xml.documentElement.getElementsByTagName("marker");
        for (var i = 1; i < Donnees.length; i++) {
          var name = Donnees[i].getAttribute("NOM_QUARTIER");
          var address = Donnees[i].getAttribute("VOIE");
          var type = Donnees[i].getAttribute("ADRESSE");
          var point = new google.maps.LatLng(
              parseFloat(Donnees[i].getAttribute("Y_LAT")),
              parseFloat(Donnees[i].getAttribute("X_LONG")));
          var html = "<b>" + name + "</b> <br/>" + address;
          var icon = customIcons[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,
            shadow: icon.shadow
          });
          bindInfoWindow(marker, map, infoWindow, html);
        }
      });
    }
 
    function bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
      });
    }
 
    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, request.status);
        }
      };
 
      request.open('GET', url, true);
      request.send(null);
    }
 
    function doNothing() {}
 
    //]]>
 
  </script>
 
  </head>
 
  <body onload="load()">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>
 
</html>

Mon problème est qu'il n'y a qu'un seul marqueur qui s'affiche sur la carte afin que ma base de données en contient beaucoup plus.

Comment puis je corriger mon code?

Merci par avance pour vos réponse!!!