SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs sur SPIP-Zone, 265 visiteurs en ce moment

Accueil > Géo, carto, météo > Google Maps et SPIP

Google Maps et SPIP

23 août 2005 – par mortimer – 12 commentaires

Toutes les versions de cet article : [Español] [français] [italiano]

5 votes

Ceci est une ARCHIVE, peut-être périmée. Vérifiez bien les compatibilités !

Voici un tutorial pour démontrer l’usage de Google Maps avec SPIP.

Google Maps est un service offert par Google pour faire des recherches localisées, trouver une adresse ou un itinéraire.

Google a aussi pensé à toutes les autres utilisations que l’on pouvait faire d’une carte et, au lieu de passer beaucoup de temps et d’argent à tout coder, la décision a été prise de laisser la communauté du libre s’en charger.

Ainsi, Google propose ce que l’on appelle une API en javascript pour mettre une carte sur votre site et en faire à peut prêt ce que vous voulez. Ainsi des sites comme « beenmapped.com - Bookmark the Earth ! » ont fleuris sur internet.

Quand j’ai visité ce site, je me suis dit que l’idée d’afficher les visiteurs du site sur une carte serait une extension sympathique de SPIP. Malheureusement, la façon dont SPIP gère les visiteurs ne permet pas de faire cela facilement. Par contre, il est assez facile d’afficher les messages de forums de cette façon.

PNG

Voici donc un tutorial qui explique comment utiliser Google Maps avec un squelette SPIP. Le code proposé sert à afficher les messages de forums, mais il n’y a aucune raison de ne pas pouvoir appliquer cela à d’autres informations géospaciales.

Vous trouverez une démo live là :
-  http://6v8.gamboni.org/googlemapw.php
-  http://6v8.gamboni.org/googlemapw.p...

Pour les impatients, le squelette est à la fin de l’article.

Google Maps API : comment ça marche ?

L’interface pour créer vos propres cartes avec google maps est très bien expliquée ici. Mais pour ceux qui ne comprennent pas l’anglais, voici une petite introduction.

Avant tout, il faut obtenir une clef pour pouvoir utiliser le service, commencez donc par aller là : Maps API key.

Dessiner la carte

Dans une page HTML, la carte sera dessinée par le javascript google dans une DIV vide du document. Il faut donc placer et dimentioner celle ci dans votre code, par exemple :

<div id="map" style="width: 300px; height: 300px"></div>

Vous devez ensuite importer la librairie fournie par Google en utilisant la clef obtenue plus tôt :

<script src="http://maps.google.com/maps?file=api&v=1&key=votreclef" type="text/javascript"></script>

Cette librairie fournie une classe GMap qui s’occupe de gérer la carte, on peut ainsi dessiner une carte dans notre DIV vide de la façon suivante (où “map” est l’identifiant du DIV en question :

var map = new GMap(document.getElementById("map"));

Comme indiqué dans la documentation, il vaut mieux tester que le navigateur est compatible avant de faire l’affichage, on obtient donc le code d’exemple :

Ajouter des points sur la carte

On peut ajouter des points (Markers) sur la carte avec l’objet GMarker qui prend un GPoint en paramètre, par exemple :

//on crée un point: longitude puis latitude
var point = new GPoint(0,45);
//on crée un simple marker dessus
var mark = new GMarker(point);
// on l'ajoute sur la carte
map.addOverlay(mark);

Il existe trois fonctions pour afficher des « boites » d’information sur un marker :

  1. openInfoWindow(htmlElem) qui prend l’id d’un élément de la page et l’affiche au dessus du marker,
  2. openInfoWindowHtml(htmlString) qui prend un code HTML à mettre dans la boite d’info,
  3. openInfoWindowXSLT(xmlElem,xsltURI) que je n’ai personellement pas explorée.

On peut ainsi faire un simple « bonjour » sur la carte avec le code :

Dans ce cas, le marker aura toujours une boite d’info au dessus. Dans un cas général, on voudra plutôt afficher la boite si on clique sur le marker, pour cela on ajoute donc un « listener », de la façon suivante :

GEvent.addListener(mark, "click", function() {
                       marker.openInfoWindowHtml("<b>Bonjour</b>");
                     });

Personellement, je trouve plus simple, pour mettre du code complexe dans une boite d’info, de le faire en utilisant un élément de la page qui est caché par défaut et sera affiché par le code javascript :

Comme on va afficher beaucoup de points sur la carte, il sera plus simple d’appeler une fonction pour créer des markers comme il faut :

Outil

Pour ce squelette, on doit gérer des doublons un peu différemment des {doublons} SPIP. On introduit donc une fonction outil qui va nous permettre de stoquer des ids de forums et les récupérer plus tard pour faire une boucle :

Première version

Le principe de ce squelette est d’aller récupérer, grâce à un filtre, les coordonnés géographiques des IP des auteurs de messages sur le site hostinfo et d’afficher les messages au bon endroit sur la carte en utilisant l’api google.

On déclare d’abord des filtres dans mes_fonctions pour récupérer la location des auteurs de messages :

  1. locateip va questionner le site hostip et retourner un tableau d’information sur l’ip en question,
  2. latitue, longitude, city et country nous permettent d’obtenir les bonnes informations dans ce tableau.

On va d’abord faire une boucle qui crée les points sur la carte en utilisant l’interface javascript google :

<BOUCLE_gpoint(FORUMS) {par date} {0,50} {id_article?}>
 [
   var point#COMPTEUR_BOUCLE = new GPoint((#IP|locateip|longitude),
                                          [(#IP|locateip|latitude)]);
   var marker#COMPTEUR_BOUCLE = createMarker(point#COMPTEUR_BOUCLE,
                                             #ID_FORUM);
   map.addOverlay(marker#COMPTEUR_BOUCLE);
   [(#ID_FORUM|tampons{'trouve','forums','empile'})]
 ]
 [(#IP|locateip|latitude|sinon{#ID_FORUM}|tampons{'perdu','forums','empile'})]
</BOUCLE_gpoint>

la boucle va donc générer ce genre de code pour les 50 derniers messages de forum postés sur le site [1] :

 var point1 = new GPoint( 6.9167, 46.4333 );
 var marker1 = createMarker(point1,1024);
 map.addOverlay(marker1);

 var point2 = new GPoint( -73.5667, 45.5167 );
 var marker2 = createMarker(point2,1025);
 map.addOverlay(marker2);

On crée un point et un marker à chaque message.

[(#IP|locateip|latitude)]) retourne la latitude fournie par le filtre locateip. On utilise le filtre longitude pour tester si l’IP a été localisée [2], sinon, la dernière ligne du code mémorise l’identifiant du forum qui n’a pas été trouvé dans un tampon.

On fait ensuite une boucle forum qui affiche dans une DIV cachée les messages de forums.

Chaque message est contenu dans un DIV portant l’identifiant du forum. Ainsi, le code javascript généré précédemment : createMarker(point1,1024); affichera la DIV d’id 1024 contenant le message de forum 1024. Ainsi, même s’ils sont directement cachés au visiteur, ces messages seront affichés quand il clique sur le marker correspondant.

Remarquez qu’on limite cette liste aux messages trouvés en prenant les identifiant de forum qui sont dans le tampon « trouve ». On finit donc par afficher le nombre de messages de forums qui n’ont pas été localisés en bouclant sur le tampon « perdu » :

voici donc le squelette complet :

Attention

Ce squelette, à chaque recalcule de la page, va envoyer des requêtes à hostip pour localiser les IP. On peut se dire que le cache de SPIP nous sauvera, mais comme on travaille avec des boucles forums, la page aura un délai nul par défaut.

Ainsi on risque de surcharger le serveur de hostip et de se faire bannir de celui ci. Ce squelette est donc « assez » simple, mais pas vraiment bon pour une application réelle à des forums.

Malgré tout, cette approche peut s’appliquer à d’autres applications qui ne tourne pas autour des forums — et prendront donc avantages du cache SPIP — ou ne font pas de requêtes lourdes à chaque calcul de position.

Je vous conseille pourtant de lire la prochaine section qui aborde^ la création d’une nouvelle table pour stoquer les informations géospaciales.


Faire un cache des locations

Comme on ne peut pas compter sur le cache de SPIP pour limiter le nombre de requêtes à hostip, on va devoir créer notre propre cache.

Une nouvelle table

Pour cela, on va ajouter une nouvelle table à la base spip qui contiendra les informations de location de chaque IP. Cette table sera de la forme :

iplongitudelatitudecitycountry
193.252.104.39 3.1667 50.7 Roubaix FRANCE (FR)
202.22.239.172 166.45 -22.2667 Noumea NEW CALEDONIA (NC)

Il faut donc créer cette table dans la base de données mysql, voici la commande à executer :

On peut ensuite donner les informations sur la table à SPIP dans le fichier mes_fonctions.php3 pour pouvoir boucler sur la nouvelle table.

Remplire la table

Maintenant il nous faut remplir la nouvelle table en allant questionner hostip. Pour cela, on va modifier le filtre locateip pour qu’il aille interroger hostip et stoquer la réponse dans la base.

Le filtre vérifie qu’une longitude et une latitude ont été trouvées puis place les valeurs trouvées dans la base.

Des boucles en conséquence

On va donc modifier la boucle qui génére le code javascript affichant les points sur la carte.

Plusieurs modifications ont été faites :

  1. maintenant, les markers sont créés une seule fois par IP, l’identifiant de la DIV à afficher est donc #IP et non #ID_FORUM et on utilise (#IP|unique) pour ne pas afficher les IP qu’on a déjà traitées,
  2. on n’affiche plus les informations géospatiales avec locateip. On utilise une boucle IP_LOCATION et les nouvelles balises introduites avec la nouvelle table pour cela. Si la boucle n’a pas de résultat, alors on va appeler le filtre locateip pour remplir la base.

On met dans la base toutes les entrées trouvées, mais parfois hostip n’est pas capable de retourner de coordonnées et on remplie la table avec des informations incomplètes, on va donc faire une boucle sur les informations incomplètes pour voir si la base de données de hostip a de nouvelles informations :

Finalement on boucle sur les messages de forum trouvés pour créer les DIV pour les boites d’informations :

On fournie un lien pour verifier les données dans hostip et un autre pour corriger les données dans la base s’il y en a besoin. La page corrigerIP.php va simplement effacer l’enregistrement de notre base et renvoyer vers le site de hostip :

Le squelette final

Le squelette final apporte d’autres fonctionnalités. Par exemple, on peut entrer un identifiant d’article dans l’url et on affichera les forums de cet article et de ces traductions, ainsi que le texte de la langue demandée par l’utilisateur.

GZ - 4 ko
Squelette Complet
  1. décompresser,
  2. placer googlemap.php3, googlemap_fonctions.php3 et corrigerIP.php3 à la racine de votre site
  3. placer googlemap.html et googlemap.css dans votre repertoire squelettes,
  4. copier les fichiers de traductions googlemap_XX.php3 dans votre répertoire ecrire/lang/

P.-S.

Le site How to Use Google Maps EZ propose une autre façon d’utiliser l’API Google Maps en faisant abstraction du javascript. Avec cette librairie, toutes les commandes d’ajout de markers etc... se fond grâce à du code HTML.

On pourrait donc imaginer coder le même genre de squelette en n’utilisant que du html avec cette librairie.

Notes

[1ou sur l’article spécifié dans l’url grâce à {id_article?}

[2d’où les crochets qui entourent le code.

Dernière modification de cette page le 18 février 2013

Retour en haut de la page

Vos commentaires

  • Le 22 août 2006 à 22:01, par jeami En réponse à : Google Maps et Spip

    bonjour
    à partir d’une page, par exemple celle ci
    http://accueilpaysandrome.com/article.php3?id_article=140
    en cliquant sur « Accès à la carte interactive » j’aboutis sur la page
    http://accueilpaysandrome.com/rubrique.php3?id_rubrique=137 de la carte
    jusque la tout va bien
    maintenant je voudrais qu’ayant fait cela, la bulle concernant
    la rubrique 88 (que je cherche à afficher)et dont l’article 140 du début est issu, soit ouverte avec son lien cliquable (vers l’article 88).
    je suis débutant, mais comment faire cela svp ?

    Répondre à ce message

  • Le 16 janvier 2010 à 19:07, par ? En réponse à : Google Maps et SPIP

    Bonjour,

    Faites attention à votre type d’hébergement, lorsque vous utilisez les requêtes HTTP pour géocoder vos adresses postales et / ou coordonnées GPS depuis les serveurs de Google.

    Les limites dues à votre type d’hébergement sur les requêtes HTTP adressées aux serveurs de Google pour géocoder vos adresses

    Cordialement.

    Répondre à ce message

  • Le 19 mars 2009 à 23:48, par ? En réponse à : Google Maps et Spip

    Salut je cherche a intégrer une map de Google dans une rubrique. j’ai téléchargé googlemap.tar.gz mais le fichier est corrompu.

    Répondre à ce message

  • Le 21 septembre 2005 à 21:30, par klaus++ En réponse à : > Google Maps et Spip

    Actuellement (2005/09/21 21:29) les exemples sont hors ligne. Est-ce que Google a changé l’API ?

    Répondre à ce message

  • Le 14 avril 2007 à 19:28, par Losdeseiche En réponse à : Google Maps et Spip : message d’erreur

    Bonjour,

    J’ai suivi les indications de cette doc (sans utiliser le squelette tout fait) et j’ai quelques points que je n’ai pas compris.

    Je suis sur un serveur apache avec un spip 1.9.3 dev.

    Où dois-je placer le fichier corrigerIP.php : actuellement, je l’ai mis dans /config

    Ensuite et plus ennyeux : j’ai créé les nouvelles tables à la main, et j’obtiens cette erreur là :

    # Erreur(s) dans le squelette

       * Table SQL « ip_location » inconnue, _local
       * Erreur sur le site, boucle critère inconnu ip
       * Table SQL « ip_location » inconnue, '_local'
       * Table SQL « ip_location » inconnue, '_local'
       * Table SQL « ip_location » inconnue, '_local

    Le système de déboggage me dit que mon critère ip est inconnu. Je crois bien qu’il n’est pas défini dans mes_fonctions.php ; du moins, suis-incapable de m’en rendre compte là...

    Même si je crois que c’est là qu’il est défini :

    unction locateip($ip) {

     static $location = array();

     if(!isset($location[$ip])) {
       $stream = file_get_contents("http://www.hostip.info/api/get.html?ip=$ip&position=true");
       $lines = split ("\n", $stream);
       foreach($lines as $l) {
         $prop = split(':',$l);
         $location[$ip][trim($prop[0])] = addslashes(trim($prop[1]));
       }
     }
     return $location[$ip];
    }

    Je sèche...

    Quelqu’une a -t-elle ou quelqu’un a-t-il rencontré ces problèmes et comment les a-t-ils dans ce cas résolu ?

    Merci d’avance

    Répondre à ce message

  • Le 21 février 2007 à 23:32, par Pi r En réponse à : Google Maps et Spip

    salut, snif, le lien du zip est cassé

    Répondre à ce message

  • Le 3 août 2006 à 10:47, par troon En réponse à : Google Maps et Spip

    snif, je ne parviens pas à tout comprendre, en plus je suis sur une version 1.9, je ne sais même pas si ça tourne dessus ?

    • Le 20 février 2007 à 18:47, par bieremaster En réponse à : Google Maps et Spip

      Loin d’être un expert en code ou en programmation, j’ai bidouillé un peu mes squellettes et j’ai des résultats sympathique en SPIP 1.9.1 pour :
      -  positionner un point (dont les coordonnées ont prélablement été données dans le champ surtitre d’un article) sur une carte qui se place en fin de mes articles cartographiés (attribution d’un mot clef) : ICI
      -  récapituler tous les articles cartographiques dans une rubrique dédiée par genre et les afficher sur une carte : LA

      Je m’appuis beaucoup sur le plugin squelette par mot clef... En tout cas si ça peut t’aider ou motiver quelqu’un à faire un plugin... je suis dispo pour fournir ma maigre contribution à la cause...

    Répondre à ce message

  • Le 14 janvier 2006 à 15:13, par A Votre Image En réponse à : Google Maps et Spip

    Exemple d’une autre application où spip est couplé à google earth grâce à la contrib : [Gestion des nouveaux champs dans les tables SPIP par les champs extra : champs homonymes->http://www.spip-contrib.net/Gestion-des-nouveaux-champs-dans]

    [aerotourisme.info->http://www.aerotourisme.info/] : informations pratiques destinées aux pilotes privés, présente des itinéraires détaillés de survol de la France en avion léger avec album de photographies, description des sites survolés, cartes interactives et logs de nav.

    Quelques cartes :

    -  [les îles atlantiques->http://www.aerotourisme.info/-Itineraire-aero-survol-iles-atlantique-.html]
    -  [les châteaux de la Loire->http://www.aerotourisme.info/-itineraire-aerotourisme-chateaux-loire-.html]
    -  [la région parisienne->http://www.aerotourisme.info/-Le-tour-de-Paris-.html]

    Répondre à ce message

  • Le 14 octobre 2005 à 17:18, par ? En réponse à : Google Maps et Spip

    Bonsoir,

    Dans le même ordre d’idée, j’ai créé une nouvelle table.

    J’ai honteusement pompé votre code et le résultat est :

    Erreur MySQL
    SELECT ambassade_vivier. FROM spip_ambassade_vivier AS ambassade_vivier WHERE (ambassade_vivier.id = ’’)
    You have an error in your SQL syntax ; check the manual that corresponds to your MySQL server version for the right syntax to use near ’FROM `sctip_spip`.spip_ambassade_vivier AS ambassade_vivier WHERE (ambassade_viv’ at line 2

    Avez-vous une idée ?

    Merci

    • Le 14 octobre 2005 à 17:38, par ? En réponse à : Google Maps et Spip

      Je me répondes à moi-même.

      Achète des lunettes....

      Sorry, j’avais oublié le global du début...

      Merci AFFLELOU

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?
  • [Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Mailsubscribers

    16 janvier 2013 – 274 commentaires

    Ce plugin permet de gérer les inscriptions (ou abonnements) à la diffusion de contenu par email. Mailsubscribers permet de gérer les inscriptions par Opt-in simple ou double et la désinscription par URL. Ce plugin gère également plusieurs listes (...)

  • noiZetier v2

    9 novembre 2012 – 36 commentaires

    Le noiZetier offre une interface d’administration permettant d’insérer au choix des éléments modulaires de squelettes (noisettes) et de les ajouter ainsi à ses squelettes. Compatibilité La version 2 du noizetier fonctionne sous SPIP 3. Elle est (...)

  • cirr : plugin « rédacteur restreint »

    29 octobre 2010 – 60 commentaires

    Ce plugin « cirr : rédacteur restreint » permet d’affecter des rubriques aux rédacteurs et modifie les droits afin qu’un rédacteur restreint (ou un administrateur restreint) voit dans l’espace privé uniquement les rubriques qui lui sont affectées (et leur (...)

  • Un retour d’expérience d’utilisation de Formidable

    26 octobre – commentaires

    Il s’agissait de créer un formulaire d’inscription à un évènement modérer les inscriptions dans le privé publier les inscriptions dans le public Nous avons discuté de cette présentation lors de l’apéro SPIP du 15 février 2016 à la Cantine (...)

  • Métas +

    3 décembre – 14 commentaires

    Améliorez l’indexation de vos articles dans les moteurs et leur affichage sur les réseaux sociaux grâce aux métadonnées Dublin Core, Open Graph et Twitter Card. Installation Activer le plugin dans le menu dédié. Dans le panel de configuration, (...)

Ça spipe par là