SPIP - Contrib

[ar] [en] [es] [fr] [it]



Accueil du site > Images, Galeries > Cartographie > Google Maps sur mots clés

Google Maps et mots clés

dimanche 4 mars 2007, par guillaume. Dernier ajout mardi 25 mars 2008


Se servir des mots-clés pour afficher la carte d’une ville

Voir en ligne : Démonstration : RacinesComtoises.net


Mots-clés

Si vous utilisez comme mot-clé, le nom d’une ville, il est utile d’en permettre la localisation sur une carte et d’afficher le code postal et INSEE, ainsi que la longitude et la latitude.

Les étapes pour la mise en œuvre sont les suivantes.

I. La base de données

A. La table

La première étape est de créer une table dans la base de données ayant cette structure : commune - code postal - code insee - latitude - longitude

Voici la table "spip_commune" :

Activez ce script grâce à PhpMyadmin. Cliquez sur le nom de votre base de données, puis sur le deuxième onglet "SQL".

JPEG - 153.4 ko
Création de la base Mysql

B. Les données

Les données sont importées à partir d’un fichier Excel issue du site Web de Jérôme Galichon : http://www.galichon.com/codesgeo/. Ce fichier comprend notamment une base de données des codes insee, une base du nombre d’habitants et de la densité de population (données de 1990), les coordonnées géographiques (latitude et longitude) des communes françaises.

Il est indispensable pour que la carte s’affiche correctement que le mot-clé soit identique au nom de la commune figurant dans la base de données.

Dans un premier temps, il convient de transformer le fichier excel des coordonnées géographiques en un fichier de base de données qui sera au format Mysql.

Pour ce faire le fichier excel comprenant toutes les données doit être enregistré au format cvs

Une fois le fichier obtenu, grâce toujours à PhpMyadmin, vous devez l’importer dans la table précédemment créé ainsi créée.

JPEG - 352.1 ko
Menu pour l’importation d’un fichier texte

Dans un second temps, accédez à la base de donnée, et cliquez en fin de page sur « Insérer des données provenant d’un fichier texte dans la table ».

JPEG - 249.2 ko
Importation du fichier *.csv

Une fois la page ouverte, parcourez sur votre disque pour trouver votre fichier (« commune.csv » par exemple) et cliquez sur exécuter. Vos données sont importées !

C. un fichier prêt à télécharger

Pour vous faciliter le travail, la table et les données sont proposés en téléchargement en fin de page, comprenant toutes les communes françaises. Il est vivement recommandé de supprimer les communes que vous ne citez pas dans votre site.

II. Le lien entre la base de donnée et le squelette

Voici la boucle pour extraire les données a insérer dans le squelette mot.htm :

Cette fonction est issue de la détection automatique de tables SQL et de jointures, extrait des nouveautés de Spip 1.9 :

Dans un squelette comportant BOUCLE_a(xxx), la table xxx peut être n’importe quelle table SQL connue du serveur SQL. SPIP demandera alors au serveur SQL de décrire cette table, ce qui lui permettra de compiler le squelette en interprétant toute balise #NOM comme un accès au champ `xxx`.nom s’il existe. Ces champs sont également repérés dans les critères des boucles.

Dans un squelette comportant BOUCLE_a(table table1 ... tablen), les tables supplémentaires seront vues comme des candidates à une jointure, à travers les champs homonymes. Des exemples plus concrets seront donnés dans la documentation.

III. La carte issue de GoogleMap

Avant toute chose, il faut obtenir (gratuitement) de Google, la clé permettant l’utilisation de l’API Google Map. Elle est disponible ici : http://www.google.com/apis/maps/signup.html

Ensuite, dans votre page mot.html, il faut insérer entre les balises <head> et </head> : le script suivant

Puis remplacer la balise <body> par :

Enfin, il suffit d’ajouter à l’endroit où vous voulez visualiser la carte le code suivant :

Exemple en ligne :

http://www.racinescomtoises.net/+-Besancon-+

Documents joints


Répondre à cet article

  • Google Maps et mots clés

    16 août 2007 02:46, par piercol

    Bravo pour cette contrib tout à fait simple, performante et dont le mode d’emploi est très clair.

    La partie la plus laborieuse est certainement la création de la table à cause des problèmes de codage des caractères, mais on finit par en venir à bout.

    Le résultat est visible par exemple sur cette page de mon site, et j’en suis pleinement satisfait

    Merci au contributeur.

    Quand on est content, il faut le dire ...

    Répondre à ce message

    • Google Maps et mots clés 21 août 2007 09:51, par piercol

      Je reviens sur le sujet en ajoutant une question complémentaire :

      Quelle serait la syntaxe de la boucle à écrire, dans le genre "BOUCLE_MOTS" ... id_groupe ..., avec un peu de javascript au milieu, pour aller placer sur une googlemap toutes les balises correspondant aux mots de la boucle, en allant prendre les #TITRE, #LONG, #LAT et plus dans la base créée précédemment.

      On pourrait ainsi gérer l’affichage d’une série de ces balises rouges (ou autres) à partir d’un groupe de mots-clés.

      Ce serait magique, n’est-ce pas ?

      cordialement.

      Répondre à ce message

      • Google Maps et mots clés 21 août 2007 20:00, par piercol

        Bon, je suis très content, j’ai trouvé la solution pour afficher des balises sur une Googlemap à partir d’une boucle spip, ce qui permet, avec l’application présentée ici, de gérer les balises à partir d’un groupe de mots-clés contenant les noms de lieux à afficher.

        La totalité du script est indiquée ci-dessous, à adapter en fonction de votre configuration et de vos besoins.

        Le résultat est visible sur mon site Histoire Passion, à cette page.

        dans le head

        <script src="http://maps.google.com/maps?file=api&v=votre clé googlemap" type="text/javascript"></script>

        dans le body

        <body onload="load()" onunload="GUnload()">
           <div id="map" style="width: 770px; height: 580px"></div>

           <!-- fail nicely if the browser has no Javascript -->
           <noscript>
           <span class="Style1">JavaScript must be enabled in order for you to use Google Maps</span><b>.</b>
             However, it seems JavaScript is either disabled or not supported by your browser.
             To view Google Maps, enable JavaScript by changing your browser options, and then
             try again.
         </noscript>

           <script type="text/javascript">
           //<![CDATA[

           // Check to see if this browser can run the Google API
           if (GBrowserIsCompatible()) {

                // Create our "tiny" marker icon
                var icon = new GIcon();
                        icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
                        icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
                        icon.iconSize = new GSize(12, 20);
                        icon.shadowSize = new GSize(22, 20);
                        icon.iconAnchor = new GPoint(6, 20);
                        icon.infoWindowAnchor = new GPoint(5, 1);


             // Display the map, with some controls and set the initial location
                var map = new GMap(document.getElementById("map"));
                        map.addControl(new GLargeMapControl());
                        map.addControl(new GMapTypeControl());
                        map.addControl(new GScaleControl());
               map.addControl(new GOverviewMapControl());
                        map.setCenter(new GLatLng(45.72919106129991, -0.6536865234375), 9, G_HYBRID_MAP);               

             GEvent.addListener(map, "click", function(overlay, point) {
               if (overlay) {
                 if (overlay.my_html) {
                   overlay.openInfoWindowHtml(overlay.my_html);
                 }
               }
             });      

           }

           
           // display a warning if the browser was not compatible
           else {
             alert("Sorry, the Google Maps API is not compatible with this browser");
           }

           //]]>
           </script>

        <BOUCLE_mots(MOTS) {id_groupe=2} {par titre}>
                  <BOUCLE_1(spip_communes){titre}>
               
        <script type="text/javascript">
         var marker = new GMarker(new GPoint(#LONG,#LAT), icon);
         marker.my_html = "<div class='texte13'><a href='#URL_MOT' target='_top'><b>#TITRE</b></a></div><div class='texte11'>D'un clic sur son nom, accédez<br>aux sources de l'histoire de cette commune.</div>";
             map.addOverlay(marker);
                </script>

          </BOUCLE_1>
        </BOUCLE_mots>

        Répondre à ce message

        • Google Maps et mots clés 31 août 2007 17:30, par piercol

          Si quelqu’un a mis en place le script ci-dessus, a-t-il de surcroit trouvé la méthode pour insérer dans l’info-bulle le logo du mot-clef.

          J’ai bien essayé d’ajouter #LOGO_MOT dans la boucle, à la ligne

          marker.my_html = "<div class='texte13'><a href='#URL_MOT' target='_top'><b>#TITRE</b></a></div><div class='texte11'>D'un clic sur son nom, accédez<br>aux sources de l'histoire de cette commune.</div>";

          mais ça ne marche pas.

          Quelqu’un aurait-il une suggestion ?

          Cordialement

          Répondre à ce message

          • Google Maps et mots clés 5 septembre 2007 12:54, par Piercol

            Je continue à faire les questions et les réponses.

            Voici le code complet de la boucle, qui permet d’afficher le logo du mot-clef dans l’infobulle

            <BOUCLE_mots(MOTS) {id_groupe=2} {par titre}>
                              <BOUCLE_1(spip_communes){titre}>
                                    <script type="text/javascript">
                                       var marker = new GMarker(new GPoint(#LONG,#LAT), icon);
                                 marker.my_html = "<div class='infobulle1'><div class='texte13'><a href='#URL_MOT' target='_top'><img src='[(#LOGO_MOT_NORMAL||image_reduire{150,150}|extraire_attribut{'src'})]'/><br><b>#TITRE</b></a></div><div class='texte11'>D'un clic sur son nom, accédez<br>aux sources de l'histoire de ce lieu.</div></div>";
                                 map.addOverlay(marker);
                                    </script>
                              </BOUCLE_1>
            </BOUCLE_mots>

            Et tout cela fonctionne parfaitement, comme vous pouvez le constater sur la page Cartes satellite des trésors de l’histoire des Charentes Choisissez par exemple la carte des châteaux et clic sur les marqueurs.

            Répondre à ce message

            • Google Maps et mots clés 7 septembre 2007 14:17, par piercol

              Encore une nouvelle version de la boucle, qui permet cette fois, en supplément, d’afficher le logo du mot-clef dans l’infobulle du marqueur.

              <BOUCLE_mots(MOTS) {id_groupe=2} {par titre}>
                 <BOUCLE_1(spip_communes){titre}>
                     <script type="text/javascript">
                      var marker = new GMarker(new GPoint(#LONG,#LAT), icon);
                      marker.my_html = "<div class='infobulle1'>
                      <div class='texte13'><a href='#URL_MOT' target='_top'>
                      <img src='[(#LOGO_MOT_NORMAL||image_reduire{150,150}|extraire_attribut{'src'})]'/>
                      <br><b>#TITRE</b></a></div>
                      <div class='texte11'>D'un clic sur son nom, accédez
                      <br>aux sources de l'histoire de ce lieu.</div></div>";
                      map.addOverlay(marker);
                     </script>
                </BOUCLE_1>
              </BOUCLE_mots>

              Tous les éléments ’div class=xxx" (dimensions de l’infobulle, typographie, couleur de fond, etc.) sont définis dans une feuille de style associée à la page html qui crée la carte.

              Résultats visibles avec plusieurs cartes thématiques sur la page http://www.histoirepassion.eu/spip.php?article117

              Répondre à ce message

              • Google Maps et mots clés 8 septembre 2007 13:14, par piercol

                Ultime version de la boucle, en résumé :
                - affichage sur googlemap de marqueurs sur des lieux dont les noms sont gérés dans un groupe de mots-clés
                - coordonnées du marqueur (LAT, LONG et autres renseignements) extraites à partir du libellé du mot-clef dans une table ’spip_communes’ dont les caractéristiques sont expliquées dans cette page de spip-contrib
                - le logo du mot-clef vient s’afficher dans l’infobulle qui s’ouvre quand on clique sur le marqueur
                - enfin une infobulle contenant le nom du lieu s’affiche quand on survole le marqueur.

                Ci-dessous le code de cette boucle sympa (adapter le numéro du groupe de mots-clefs, et les ’class=xxx’, éléments de dimension, typographie, couleur de fond des infobulles, qui sont définis dans une feuille de style css) :

                <BOUCLE_mots(MOTS) {id_groupe=2} {par titre}>
                    <BOUCLE_1(spip_communes){titre}>
                    <script type="text/javascript">
                     var marker = new GMarker(new GPoint(#LONG,#LAT),  {title:"[(#TITRE|textebrut|addslashes)]",icon:icon});
                     marker.my_html = "<div class='infobulle1'><div class='texte13'><a href='#URL_MOT' target='_top'><img src='[(#LOGO_MOT_NORMAL||image_reduire{150,150}|extraire_attribut{'src'})]'/><br><b>#TITRE</b></a></div><div class='texte11'>D'un clic sur son nom, accédez<br>aux sources de l'histoire de ce lieu.</div></div>";
                     map.addOverlay(marker);
                    </script>
                    </BOUCLE_1>
                </BOUCLE_mots>

                Bien sûr, il faut mettre dans le reste de la page les scripts nécessaires pour l’affichage de la carte googlemap. Le script ci-dessus sert seulement à créer les marqueurs à partir des mots-clefs d’un groupe de mots-clefs.

                Le résultat final de ce script est visible sur la page Cartes satellite des trésors de l’histoire des Charentes , avec une version un peu sophistiquée qui permet de choisir parmi plusieurs types de cartes, par sélection d’un groupe de mots-clefs dans une liste déroulante.
                - Sur cette même page du site, l’ensemble des squelettes utilisés est présenté et commenté, et peut être copié.

                Pour ne pas alourdir inutilement ce forum, mes messages précédents peuvent être utilement effacés.

                Merci à tous ceux qui m’ont aidé à mettre au point ce script.

                Répondre à ce message

    Retour au début des forums

  • Google Maps et mots clés

    6 mars 2007 12:38, par Christiane

    Bonjour, j’ai testé cette contrib sur une page rubrique et cela fonctionne bien sur des titres non accentués comme cette page http://www.villes-villages-haute-ma...

    Mais dès qu’il y a des caractères accentués, cela ne fonctionne plus comme par exemple sur cette page

    http://www.villes-villages-haute-ma...

    Je me demande si cela ne vient de la base de données qui gère les jeux de caractères (mon site spip est en UTF8), mais au niveau de la base de données les tables sont en latin1_german2_ci

    Je précise que ce site est en spip 1 9 1

    Merci en tout cas pour cette contrib, même si elle ne fonctionne que partiellement sur mon site

    Remarque : j’ai dû faire quelques modifications pour le nom de la table qui est parfois indiquée sous le nom de spip.insee spip.commune ou encore spip.communes

    Voir en ligne : Adresse du site où j’ai implémenté la contrib

    Répondre à ce message

    • Google Maps et mots clés 15 avril 2007 15:24, par Laurent

      Bonjour,

      Tout d’abord, merci pour cette contrib.

      est-il possible d’avoir les modifications et éventuellement le détail de l’installation (la partie avec Mysql) par ce que chez moi, ça ne fonctionne pas...

      Je récupère sur les pages voulues un espace avec le logo/lien google, mais le rectangle reste désespèrement blanc...

      Mon site est hébergé chez Free, il est en spip 1 9 2 J’ai plusieur site sur mon espace free l’adresse du site est donc :

      http://nom.free.fr/non du site/ ...cela influe-t-il ?

      Par avance merci,

      Laurent

      Répondre à ce message

      • Google Maps et mots clés 23 mai 2007 10:17, par Athama

        Merci beaucoup pour cette contrib qui fonctionne très bien. Il faut faire attention quand vous êtes en Iso ou utf-8, vous risquez d’avoir des problèmes avec les accents. L’import de la base de données des communes est un peu laborieuse mais une fois faite ça tourne.

        Voir le résultat ici : infosimmo Voir les articles La Seine Saint Denis (93) ou le Val d’Oise par exemple. J’ai un peu modifié le javascript (en rajoutant ce que Google Conseille) pour afficher une bulle dans la map de google... Voilà ça tourne. Le top serait de combiner une liste de commune et de les afficher sur une carte mais je crois que l’on peut faire ça avec le plugin GIS.( pour le moment il est encore trop instable, je l’ai désactivé de mon site)

        Répondre à ce message

    Retour au début des forums



Suivre la vie du site RSS 2.0 | Plan du site | Espace privé | Charte et vie SPIP-Contrib | SPIP | L'autre.net