Afficher des points sur la carte

**Drola** · 02/05/2016, 22h19

Salut à tous !

Mon but est d'afficher des points sur une carte Google Maps. Ces points sont définis par leur Latitude + Longitude (stockés eux-même dans une base de données MySQL). J'ai donc trouvé ce "tuto" réalisé par Google : https://developers.google.com/maps/a.../phpsqlajax_v3

Que j'ai suivi à la lettre (en modifiant les requêtes mysql par mysqli). J'arrive à afficher la carte mais pas les points.

Nom : Capture.JPG
Affichages : 1203
Taille : 45,0 Ko

Nom : Capture.JPG
Affichages : 1203
Taille : 45,0 Ko

Voici mon index.php :

Code javascript :

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
 
<!DOCTYPE html >
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>PHP/MySQL & Google Maps Example</title>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAyPdVDkDK_Ztb5cU3ReWypGQ_5vWAi5yw"
            type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
 
    var customIcons = {
      restaurant: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
      },
      bar: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
      }
    };
 
    function load() {
      var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(47.6145, -122.3418),
        zoom: 13,
        mapTypeId: 'roadmap'
      });
      var infoWindow = new google.maps.InfoWindow;
 
      // Change this depending on the name of your PHP file
      downloadUrl("phpdownload.php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("name");
          var address = markers[i].getAttribute("address");
          var type = markers[i].getAttribute("type");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + name + "</b> <br/>" + address;
          var icon = customIcons[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon
          });
          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>

Voici mon fichier phpdownload.php :

Code php :

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
 
<?php
 
require("phpsqlajax_dbinfo.php");
 
// 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=mysqli_connect('localhost', $username, $password);
if (!$connection) {  die('Not connected : ' . mysql_error());}
 
// Set the active MySQL database
 
$db_selected = mysqli_select_db($connection, $database);
if (!$db_selected) {
  die ('Can\'t use db : ' . mysql_error());
}
 
// Select all the rows in the markers table
 
$query = "SELECT * FROM markers WHERE 1";
$result = mysqli_query($connection, $query);
if (!$result) {
  die('Invalid query: ' . mysql_error());
}
 
header("Content-type: text/xml");
 
// Iterate through the rows, adding XML nodes for each
 
while ($row = @mysqli_fetch_assoc($result)){
  // ADD TO XML DOCUMENT NODE
  $node = $dom->createElement("marker");
  $newnode = $parnode->appendChild($node);
  $newnode->setAttribute("name",$row['name']);
  $newnode->setAttribute("address", $row['address']);
  $newnode->setAttribute("lat", $row['lat']);
  $newnode->setAttribute("lng", $row['lng']);
  $newnode->setAttribute("type", $row['type']);
}
 
echo $dom->saveXML();
 
?>

Mon fichier phpsqlajax_dbinfo.php :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<?php
$username="root";
$password="";
$database="markers";
?>

Et enfin mon fichier phpsqlajax_genxml.php :

Code php :

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
 
<?php
 
require("phpsqlajax_dbinfo.php");
 
// 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=mysqli_connect('localhost', $username, $password);
if (!$connection) {  die('Not connected : ' . mysql_error());}
 
// Set the active MySQL database
 
$db_selected = mysqli_select_db($connection, $database);
if (!$db_selected) {
  die ('Can\'t use db : ' . mysql_error());
}
 
// Select all the rows in the markers table
 
$query = "SELECT * FROM markers WHERE 1";
$result = mysqli_query($connection, $query);
if (!$result) {
  die('Invalid query: ' . mysql_error());
}
 
header("Content-type: text/xml");
 
// Iterate through the rows, adding XML nodes for each
 
while ($row = @mysqli_fetch_assoc($result)){
  // ADD TO XML DOCUMENT NODE
  $node = $dom->createElement("marker");
  $newnode = $parnode->appendChild($node);
  $newnode->setAttribute("name",$row['name']);
  $newnode->setAttribute("address", $row['address']);
  $newnode->setAttribute("lat", $row['lat']);
  $newnode->setAttribute("lng", $row['lng']);
  $newnode->setAttribute("type", $row['type']);
}
 
echo $dom->saveXML();
 
?>

Voici ce que génère mon fichier genxml quand je l'exécute via navigateur :

Nom : Capture1.JPG
Affichages : 1128
Taille : 114,3 Ko

Cela fait des heures et des heures que je galère dessus, si quelqu'un veut bien prendre un peu de son temps pour résoudre mon souci, ça serait sympa ! ^^

Merci d'avance.

Invité · 03/05/2016, 13h28

Dans ta fonction downloadUrl() , écris un console.log(data) , est ce que ta console affiche les datas lors de l'appui sur F5?

**NoSmoking** · 03/05/2016, 15h55

Bonjour,
c'est effectivement la première chose à faire vérifier ce que l'on reçoit.

Dans ton cas il semblerait que tu n'utilises pas le bon fichier pour la récupération des données en base, d'après le lien mis il semble que le fichier phpsqlajax_genxml2.php soit plus indiquer car il prend en compte les caractères spéciaux comme &, « & », au travers de sa fonction parseToXML. Tu peux regarder du coté de htmlentities également.

PS : regarde à quoi ressemble le fichier devant être généré https://github.com/googlemaps/js-sam...ctedoutput.xml, je le mets ci-dessous (ligne 3)

Code xml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<markers>
    <marker name="Pan Africa Market" address="1521 1st Ave, Seattle, WA" lat="47.608940" lng="-122.340141" type="restaurant" />
    <marker name="Buddha Thai &amp; Bar" address="2222 2nd Ave, Seattle, WA" lat="47.613590" lng="-122.344391" type="bar" />
    <marker name="The Melting Pot" address="14 Mercer St, Seattle, WA" lat="47.624561" lng="-122.356445" type="restaurant" />
    <marker name="Ipanema Grill" address="1225 1st Ave, Seattle, WA" lat="47.606365" lng="-122.337654" type="restaurant" />
    <marker name="Sake House" address="2230 1st Ave, Seattle, WA" lat="47.612823" lng="-122.345673" type="bar" />
    <marker name="Crab Pot" address="1301 Alaskan Way, Seattle, WA" lat="47.605961" lng="-122.340363" type="restaurant" />
    <marker name="Mama&amp;apos;s Mexican Kitchen" address="2234 2nd Ave, Seattle, WA" lat="47.613976" lng="-122.345467" type="bar" />
    <marker name="Wingdome" address="1416 E Olive Way, Seattle, WA" lat="47.617214" lng="-122.326584" type="bar" />
    <marker name="Piroshky Piroshky" address="1908 Pike pl, Seattle, WA" lat="47.610126" lng="-122.342834" type="restaurant" />
</markers>

Afficher des points sur la carte

APIs Google

Discussions similaires

Partager

Partager