Mises à jour de août, 2011 Activer/désactiver les fils de commentaires | Raccourcis clavier

  • freyafinker 9:50 pm le August 13, 2011 Permalien | Réponse  

    Google map à partir d’une table mysql (api V3) 

    Voici les grandes lignes du tutorial que j’ai utilisé pour générer des objets dynamiques (trajectoires) dans google maps à partir d’une table mysql.
    Recommandation, il faut prendre son temps et s’appliquer, l’objet ne s’affichera que lorsque tout le code sera juste.
    Voici le lien vers le tutorial en anglais :
    http://code.google.com/apis/maps/articles/phpsqlajax_v3.html
    On suppose que vous savez utiliser php et mysql. Vous avez donc dans une table mysql divers champs, dont les champ lat et lng au format float 10,6.
    Il va falloir passer par xml pour faire passer les données de mysql vers javascript.
    On va passer tout de suite à « outputting xml with php ».
    Il faut tout naturellement un fichier de connection à votre base de données (à mettre dans un fichier à part pour éviter de le publier par mégarde) (phpsqlajax_dbinfo.php)
    Ensuite, on va passer directement à Using PHP’s DOM functions to Output XML (il faut Php5).
    Dans le script fourni (phpsqlajax_genxml3.php), j’ai du corriger localhost par $host (et ajouté $host dans mon fichier de connection).
    Voyez ce que fait ce fichier. Il créé un élément markers et fait passer tous les champs de la table mysql que l’on veut utiliser comme attributs de cet élément. C’est ainsi qu’on pourra les récupérer.
    Pour vérifier que tout va bien, on peut faire afficher ce fichier genxml3.php, il se peut qu’il faille enlever la ligne Header content/type. Les erreurs éventuelles sont dues aux caractères spéciaux des champs mysql, il faudra les tranformer en utf 8 par utf8_encode($row[‘type’]).
    C’est là que ça se corse.
    Pour appeler le fichier xml (Loading xml file), il va falloir définir la fonction
    downloadUrl(url,callback), url étant l’adresse soit du fichier xml, soit du php qui génère dynamiquement le xml.
    Puis appeler le fichier par downloadUrl (phpsqlajax_genxml3.php etc….) et le décortiquer.
    On définit une série de variables var qui sont les attributs récupérés à partir du fichier xml.
    var lat var lng var name var type var html
    var html prédéfinit le contenu de la fenêtre d’information que l’on peut faire ouvrir en cliquant sur le marker.
    Le marker permet de localiser une petite icône aux latitudes, longitudes voulues.
    Le tutorial complique les choses en proposant deux types d’icônes (customIcons) en fonction du type (hotel ou restaurant). Attention aux majuscules, minuscules, singulier, pluriel !
    Ensuite il va falloir associer la fenêtre d’information avec la fonction bindInfoWindow.
    Ne pas oublier d’appeler cette fonction à la fin du décorticage du xml.
    bindInfoWindow(marker, map, infoWindow, html);
    Enfin on reconstitue le tout en suivant l’ordre de Putting it all together.
    A noter dans la fonction load qui charge la page.
    Définir le centre de la carte, le niveau de zoom.
    Il faut préciser le type de carte roadmap, terrain ou satellite.
    Venons-en à la particularité de cette carte, je voulais afficher une trajectoire.
    J’ai choisi l’overlay polyline.
    Dans mon décorticage, j’ai récupéré les latitudes/longitudes de départ et d’arrivée que j’ai mis dans les variables point1 et point2 par new google.maps.LatLng(lat,lng)

    var point1 = new google.maps.LatLng(
    parseFloat(arrows[i].getAttribute(« lat1 »)),
    parseFloat(arrows[i].getAttribute(« lng1 »)));
    var point2 = new google.maps.LatLng(
    parseFloat(arrows[i].getAttribute(« lat2 »)),
    parseFloat(arrows[i].getAttribute(« lng2 »)));

    Puis il faut définir le chemin :

    var Path=[point1, point2];

    Puis l’overlay Polyline (je l’ai appelé Arrow, plus haut j’ai défini var Arrow)

    Arrow = new google.maps.Polyline({
    path: Path,
    strokeColor: « #FF0000 »,
    strokeOpacity: 1.0,
    strokeWeight: 2 });
    Arrow.setMap(map);

    La dernière ligne lie le tracé à la carte.
    J’espère que ces informations seront utiles, en tout cas moi elles m’aideront lorsque je reprendrai cela après une pause.
    Je vais de ce pas dessiner de belles flêches avec l’overlay Polygon.

     
    • www.newsreleases.ru 7:39 le avril 25, 2013 Permalien | Réponse

      Way cool! Some extremely valid points! I appreciate you penning this post plus the rest of the site
      is also very good.

    • Steve 9:33 le août 14, 2015 Permalien | Réponse

      Bonjour

      je fait fonctionner ce script sans problème ( celui cité dans l’article ) depuis quelques années sur une page web mais quant je passe sur wordpress c’est tout un binz.. aurais tu des tuyaux

      merci

    • Freya Finker 9:16 le août 14, 2015 Permalien | Réponse

      Bonjour, j’ai moi aussi des problèmes de marqueurs qui ne s’affichent pas lorsque je change d’hébergeur. Je soupçonne un problème au niveau du xml généré qui serait dû peut-être à la version de php ? (il y a une erreur xml). Je suis en train de tester certaines options php, comme le fait d’autoriser ou pas le code court : <? au lieu de <?php, sinon voici la façon de lancer xml si le code court ne marche pas.
      <?php echo '
      Je suis preneuse d’informations. Je reviendrai dire ici si je trouve la solution mais c’est galère.
      Bonne chance.

  • freyafinker 10:33 am le December 5, 2009 Permalien | Réponse  

    Google map à partir d’une table Mysql 

    Il existe un très bon tutorial pour cela malheureusement il n’est pas traduit en français. Je n’en ferai pas une traduction mot à mot, je tenterai juste de montrer ce qui a marché pour moi.
    Pour faire afficher une Google map sur son site, deux solutions :

    • soit il s’agit d’une carte statique, pour indiquer un lieu, auquel cas il suffit d’aller entrer l’adresse par exemple ici et de coller le code généré à l’emplacement de la carte. Ils disent de ne pas modifier le code, mais il peut être utile de changer la valeur du zoom &zoom= (suivant que vos visiteurs viennent de loin ou pas).
    • pour afficher une carte dynamique, il suffit de demander à Google une clé d’API Google map. C’est gratuit si votre site n’est pas commercial, et c’est illimité pourvu que votre carte soit accessible (pas dans un intranet). Vous cochez juste la case disant que vous acceptez les conditions, et indiquez l’adresse du site sur lequel sera présente la carte. Vous pouvez demander autant de clés que vous voulez pour différents sites.

    Les processus de « géocodage » n’étant pas encore automatisés, il vous faut prévoir dans la table mysql deux champs indiquant la latitude (lat) et la longitude (lng) du lieu (et il vous faudra les remplir, mais ne nous dispersons pas pour l’instant !). Noter le format float (10,6) de ce type de données.

    `lat` FLOAT( 10, 6 ) NOT NULL ,
    `lng` FLOAT( 10, 6 ) NOT NULL ,

    Ensuite, il faut faire une sortie XML des données de la table, grâce à PHP.
    Pour cela le tutorial propose plusieurs méthodes, selon que vous avez accès à domxml ou non.
    Pour la méthode 1, essayez après avoir créé la table et son fichier de connection (dbinfo.php) de lancer le code suivant ce titre :
    Using PHP’s domxml Functions to Output XML
    Pour moi ça n’a pas marché (parce que je n’avais pas domxml) et j’ai donc fait l’essai suivant :
    Using PHP’s echo to Output XML
    C’est bien pratique de faire afficher le fichier XML car s’il contient la moindre erreur, c’est l’ensemble de la carte qui ne s’affichera pas.
    Attention aux accents et aux caractères spéciaux qui posent des problèmes avec XML, il faut les modifier par exemple en ajoutant cette petite fonction qui remplace les caractères par leur code html :

    function parseToXML($htmlStr)
    {
    $xmlStr=str_replace( »,’>’,$xmlStr);
    $xmlStr=str_replace(‘ »‘,’"’,$xmlStr);
    $xmlStr=str_replace(« ‘ »,’'’,$xmlStr);
    $xmlStr=str_replace(« & »,’&’,$xmlStr);
    return $xmlStr;
    }

    ou en remplaçant chaque donnée par :

    utf8_encode($donnee)

    Si vous avez php5, vous pouvez utiliser le chapitre suivant (ça a marché pour moi mais attention les fichiers domxml et DOM se ressemblent beaucoup, ils ne sont pourtant pas interchangeables):
    Using PHP’s DOM functions to output XML

    Ensuite il faut créer la carte, ce sera même la première chose qui apparaîtra dans votre fichier html (voir le tutorial):

    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxTPZYElJSBeBUeMSX5xXgq6lLjHthSAk20WnZ_iuuzhMt60X_ukms-AUg »
    type= »text/javascript »>

    Remplacer la clé d’API (en gras) par votre propre clé.
    Ensuite appeler les icônes qui vont marquer les lieux (dans l’exemples ils ont des marqueurs bleu et rouge pour marquer les bars et les restaurants différemment selon la case « type » dans leur table.
    Creating custom icons
    Ensuite appeler le fichier php qui a marché pour générer la sortie XML.
    Loading the XML file
    Ensuite créer les marqueurs et ce qui s’affiche lorsqu’on clique dessus :
    Creating markers & info windows
    Et pour finir, faire afficher la carte (voir la fin du code dans le tutorial).
    Je ne pense pas que mes infos soient tout à fait suffisantes, mais ça devrait finir par marcher.
    Je trouve que ça vaut la peine de se pencher sur la question et d’aller pas à pas, il y a tant d’applications géniales de Google map, voir par exemple, Couchsurfing, un site génial permettant de trouver ou proposer un hébergement gratuit !
    Votre carte s’affichera seulement quand il n’y aura plus d’erreur ! Comme c’est beau de voir enfin s’afficher le petit marqueur après une journée à se prendre la tête !!!
    Dernier souci, comment trouver la latitude et la longitude pour les 200 points à afficher sur la carte ? Google propose un service de Geocoding (avec nombre de géocodages par jour limité) : GeocodingRequests
    Je me débats avec httpRequest pour faire cette opération automatiquement.

     
    • gnanzou 12:00 le mars 6, 2012 Permalien | Réponse

      bonjour je me nomme gnanzou.
      merci pour le tutoriel.mais j’aimerais actualiser a chaque minute ma carte pour qu’elle affiche les nouvelles données .
      mais je sais pas comment m’ y prendre .avez vous un tutoriel pour cela?
      merci

c
créer un nouvel article
j
message/commentaire suivant
k
message/commentaire précédent
r
Réponse
e
Modifier
o
afficher/masquer les commentaires
t
remonter
l
connexion
h
afficher/masquer l'aide
shift + esc
Annuler