JeuWeb - Crée ton jeu par navigateur
Google Maps - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : Google Maps (/showthread.php?tid=7415)

Pages : 1 2

Google Maps - xanthius - 09-07-2015

Bonsoir,
désolé pour le message à une heure très tardive mais j'ai décidé de me replonger dans le code de google MAPS, code que je n'avais pas fini de modifier, je voulais rajouter des infosbulles mais n'avais pas fini par manque de résultats..
Donc en m'aidant de divers tuto j'ai pu tenter de reprendre là où je n'arrivais pas à savoir mettre en place des infosbulles à chaque marqueurs.
Le soucis actuel est que les infobulles s'affichent bien mais n'affichent que la dernière valeur de la BD voici le code :
Code PHP :
<?php

 

   while($dn1 = mysqli_fetch_array($sql))

   {    

   ?>

   

        var marqueur = new google.maps.Marker({

        position: new google.maps.LatLng(<?php echo( $dn1['lattitude']);?>, <?php echo( $dn1['longitude']);?>),

        map: carte,

        icon: "http://www.durhamcollege.ca/wp-content/uploads/campus-status-green.png" ,

        });



        var infoBulle = new google.maps.InfoWindow({

         'position' : new google.maps.LatLng(<?php echo( $dn1['lattitude']);?>, <?php echo( $dn1['longitude']);?>),           

         'content'  : 'Aeroport : <?php echo( $dn1['aeroport']);?> [<?php echo( $dn1['code']);?>]',

        });



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



             infoBulle.open( carte, this);

        });

  <?php

     }

     ?>
ps: la requête sql marche parfaitement Wink

Donc sur un autre site j'avais pu lire qu'il fallait utiliser this mais ça ne fonctionne pas, des solutions ? Merci Smile

Un petit screen pour expliquer le soucis :
[Image: 150709115938546607.png]
La dernière valeur de la BDD est Nantes Atlantique et celle ci s'affiche partout

RE: Google Maps - Prélude - 10-07-2015

Il serait bon de regarder le code généré pour comprendre le problème : tu as x fois le même code, les mêmes variables qui sont écrasées.
Place les variable principales dans un Array.
Donc, en dehors de la boucle :
Code :
var infobulle = new Array();
var marqueur = new Array();


et dans la boucle :
Code :
infobule[id] = ...


RE: Google Maps - Xenos - 10-07-2015

Les echo direct sont généralement le signe d'un foirage. Tu sors les données dans un code javascript, donc elles doivent être encodées pour javascript. Les echo $mesGenoux deviennent donc echo json_encode($mesGenoux);. Sur un entier, cela ne changera pas grand chose, mais je dirai que les Aeroport et code sont des chaines de caractères qui donc cassent le javascript.

Faut pas oublier que PHP est un langage de template: c'est du code qui génère du code (du HTML, du javascript, etc). Donc le code PHP doit être valide, pour générer la sortie, et le code généré (javascript) doit aussi être valide.

Après, je dirai que l'archi est à revoir, mais bon... Mieux vaut echoer les données du PHP pour les traiter dans une boucle du JS, que de faire la boucle dans le PHP.

RE: Google Maps - xanthius - 10-07-2015

Bonjour,
voici le code généré :
Code PHP :
<?php 

    //création du marqueur

        

var marqueur = new google.maps.Marker({

        position: new google.maps.LatLng(48.06839020, -1.72642900),

        map: carte,

        icon: "http://www.durhamcollege.ca/wp-content/uploads/campus-status-green.png" ,

    });



  var infoBulle = new google.maps.InfoWindow({

    'position' : new google.maps.LatLng(48.06839020, -1.72642900),     

    'content'  : 'Aeroport : Rennes [RNS]',

  });

 



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

                    infoBulle.open(carte, this);

                });

       

var marqueur = new google.maps.Marker({

        position: new google.maps.LatLng(47.15741879, -1.60623160),

        map: carte,

        icon: "http://www.durhamcollege.ca/wp-content/uploads/campus-status-green.png" ,

    });



  var infoBulle = new google.maps.InfoWindow({

    'position' : new google.maps.LatLng(47.15741879, -1.60623160),      

    'content'  : 'Aeroport : Nantes Atlantique [NTE]',

  });

 



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

                    infoBulle.open(carte, this);

                });

là on a position, le contenu qui sont unique pour chaque marqueur, quelles seraient alors les principales variables ?

"Après, je dirai que l'archi est à revoir, mais bon... Mieux vaut echoer les données du PHP pour les traiter dans une boucle du JS, que de faire la boucle dans le PHP."

tu te serais pris comment toi ? et pour echoer les données php en dehors, tu fais comment après pour récupérer toutes les données ?

RE: Google Maps - Xenos - 10-07-2015

De mémoire & sans test:

Code PHP :
<?php 

echo "var AIRPORT_DATA = " . json_encode(mysqli_fetch_all($sql));

Après, tu utilises la variable AIRPORT_DATA dans le code javascript statique (soit dans un JS séparé, soit du code en dur dans une balise <script>):

Code :
for (var i in AIRPORT_DATA) {
var airport = AIRPORT_DATA[i];
var marqueur = new google.maps.Marker({
        position: new google.maps.LatLng(airport.latitude, airport.longitude),
        map: carte,
        icon: "http://www.durhamcollege.ca/wp-content/uploads/campus-status-green.png" ,
    });

  var infoBulle = new google.maps.InfoWindow({
    'position' : new google.maps.LatLng(airport.latitude, airport.longitude),    
    'content'  : airport.aeroport + ' [' + airport.code + ']',
  });


    google.maps.event.addListener(marqueur, 'click', function() { infoBulle.open(carte, this); });

L'avantage, c'est qu'au lieu d'avoir la structure contenant des données le tout en dynamique, t'as les données seules en dynamique, et la structure en statique (testable et débogable donc).


Après, sur le problème de comment utiliser l'API google maps elle même, je ne la connais pas, donc j'ai pas d'aide à fournir là-dessus.

RE: Google Maps - xanthius - 10-07-2015

(10-07-2015, 01:26 PM)Xenos a écrit : De mémoire & sans test:

Code PHP :
<?php 

echo "var AIRPORT_DATA = " . json_encode(mysqli_fetch_all($sql));

Après, tu utilises la variable AIRPORT_DATA dans le code javascript statique (soit dans un JS séparé, soit du code en dur dans une balise <script>):

Code :
for (var i in AIRPORT_DATA) {
var airport = AIRPORT_DATA[i];
var marqueur = new google.maps.Marker({
       position: new google.maps.LatLng(airport.latitude, airport.longitude),
       map: carte,
       icon: "http://www.durhamcollege.ca/wp-content/uploads/campus-status-green.png" ,
   });

 var infoBulle = new google.maps.InfoWindow({
   'position' : new google.maps.LatLng(airport.latitude, airport.longitude),    
   'content'  : airport.aeroport + ' [' + airport.code + ']',
 });


   google.maps.event.addListener(marqueur, 'click', function() { infoBulle.open(carte, this); });

L'avantage, c'est qu'au lieu d'avoir la structure contenant des données le tout en dynamique, t'as les données seules en dynamique, et la structure en statique (testable et débogable donc).


Après, sur le problème de comment utiliser l'API google maps elle même, je ne la connais pas, donc j'ai pas d'aide à fournir là-dessus.

Bonjour,
si j'ai bien compris, j'execute ma requête et récupère les données dans :
un echo "var AIRPORT_DATA = " . json_encode(mysqli_fetch_all($sql));
le tout en amont du script et dans le script j'utilise la variable AIRPORT_DATA ?

RE: Google Maps - Xenos - 10-07-2015

C'est exactement cela Smile

RE: Google Maps - xanthius - 10-07-2015



RE: Google Maps - niahoo - 10-07-2015

Regarde le code source qui est généré, tu comprendras.

RE: Google Maps - xanthius - 10-07-2015

J'obtient ceci :
Code PHP :
<?php 

var AIRPORT_DATA = [["resultat de la requete"]] 

 

 <script type="text/javascript">

           function initialiser() {

    var latlng = new google.maps.LatLng(46.779231, 6.659431);

    

    var options = {

        center: latlng,

        zoom: 4,

        streetViewControl: false,

        mapTypeControl:false,

        

    };

    

    var carte = new google.maps.Map(document.getElementById("carte"), options);

    

    /****************Nouveau code****************/



    //redéfinition du centre de la carte

    carte.setCenter(new google.maps.LatLng(49.00969060, 2.547924500));

    //redéfinition du zoom

    carte.setZoom(4);

    

    //création du marqueur

for (var i in AIRPORT_DATA) {

var airport = AIRPORT_DATA[i];

var marqueur = new google.maps.Marker({

       position: new google.maps.LatLng(airport.latitude, airport.longitude),

       map: carte,

       icon: "http://www.durhamcollege.ca/wp-content/uploads/campus-status-green.png" ,

   });



 var infoBulle = new google.maps.InfoWindow({

   'position' : new google.maps.LatLng(airport.latitude, airport.longitude),     

   'content'  : airport.aeroport + ' [' + airport.code + ']',

 });





   google.maps.event.addListener(marqueur, 'click', function() { infoBulle.open(carte, this); });