[Google Maps] Google Maps et MySQL

Google Maps et MySQL

Bonjour,

Je ne suis pas sur d'être au bon endroit ...
Je vous explique mon problème, je dois afficher plusieurs markers sur un map de google map avec des coordonnées provenant d'une bdd mysql.

Dans mon code seul le dernier point s'affiche :

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
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='fr'>
	<head>
		<link rel='stylesheet' type='text/css' href='/Styles/Cartes.css'>
		<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' />
		<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=true'></script>
		<script type='text/javascript' src='carte.js'></script>
	</head>
	<body>
	<h1>Logicar</h1>
	<?php include('connexionBdd.php');
        // Afficher nom du lieu, latitude et longitude
        $req1 = $bdd->prepare("SELECT nom_lieu, latitude_gps, longitude_gps FROM carte ;");
        $req1->execute();
        while ($donnees = $req1->fetch()) {
            $afficheReq1 = array(
                ' ' . $donnees['nom_lieu'] . ' ' . $donnees['latitude_gps'] . ' ' . $donnees['longitude_gps'] . '');
            foreach ($afficheReq1 as $element) {
			$nom_lieu = $donnees['nom_lieu'] ;
			$lat = $donnees['latitude_gps'] ;
			$longi = $donnees['longitude_gps'] ;
 
            } 
        }
		?>
		<script>
			window.onload = function() {
				InitTab(8);
				var maCarte = new Carte(10, 48, 2, 'ROADMAP');
				maCarte.addMarker('<b>marqueur 1/1</b>', '<?php echo $nom_lieu ; ?>', 'http://labs.google.com/ridefinder/images/mm_20_green.png', <?php echo $lat ; ?>, <?php echo $longi ?>, 1, 1, true);
				}
		</script>
 
 
		<div id='map' class='map' style='width:80%; height:75%' >
		</div>

Bonjour,
je pense qu'il faut que tu regardes le code HTML généré pour y voir plus clair.

Avec la doc de Google j'ai réussi, enfin à afficher les points de ma base.

Maintenant, il me faut lier ces points issus de la bdd mysql et y afficher l'itinéraire donc si vous avez des tutos sympa je suis preneur.

:koi: J'ai un peu de mal à suivre le fil de cette discussion pourtant bien courte.

Si elle est vraiment résolue, pense aux petits copains qui pourraient trouver avantage de ta solution!

J'ai pas été très explicite je l'accorde. Pour le code je mets ma solution (basé sur ce tuto : https://developers.google.com/maps/a...v3?hl=fr&csw=1) :

Il faut reprendre la base de données et 4 fichiers :

le fichier de connexion à la bdd :

phpmysql_dbinfo.php

Code:

1
2
3
4
5
<?php
$username="root";//username de connexion à phpmyadmin
$password="password";//mdp de phpmyadmin
$database="nomBdd";//nom de la bdd
?>

le fichier qui génère le xml :

phpmysqlajax_genxml.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
<?php  
 
require("phpsqlajax_dbinfo.php"); 
 
$dom = new DOMDocument("1.0");
$node = $dom->createElement("markers");
$parnode = $dom->appendChild($node); 
 
$connection=mysql_connect ('localhost', $username, $password);
if (!$connection) {  die('Not connected : ' . mysql_error());} 
 
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
  die ('Can\'t use db : ' . mysql_error());
} 
 
$query = "SELECT * FROM markers WHERE 1;
$result = mysql_query($query);
if (!$result) {  
  die('Invalid query: ' . mysql_error());
} 

header("Content-type: text/xml"); 

while ($row = @mysql_fetch_assoc($result)){   
  $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();

le fichier ajax :

phpmysqlajax_function.js

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
//<![CDATA[
 
    //j'ai rajouté logement
    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'
      },
      logement: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_yellow.png'
      }
    };
 
    function load() {
      var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(47.6145, -122.3418),//seattle coordonnées
        zoom: 13,
        mapTypeId: 'satellite'
      });
      var infoWindow = new google.maps.InfoWindow;
 
      downloadUrl("phpsqlajax_genxml.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() {}
 
    //]]>

Et pour finir le fichier qui gère l'affichage :

phpmysqlajax_map_v3.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!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>Test</title>
	<!-- Appel des fichiers js -->
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
	<script type="text/javascript" src="phpsqlajax_function.js"></script>
  </head>
 
  <!-- Fonction load() de phpsqlajax_function.js : initialisation de la carte -->
  <body onload="load()">
 
	<div id="panel"></div>
 
    <div id="map" style="width: 500px; height: 300px"></div>
 
	<!-- Type de marker -->
	<img src='http://labs.google.com/ridefinder/images/mm_20_blue.png'/> Restaurant |
	<img src='http://labs.google.com/ridefinder/images/mm_20_red.png'/> Bar |
	<img src='http://labs.google.com/ridefinder/images/mm_20_yellow.png'/> Logement

J'ai essayé de revenir à la version de l'api google maps car j'avais modifié pas mal de choses.