Insérer sa cartographie personnalisée (avec Google Table de fusion et Google Maps) dans WordPress

Tout d’abord le résultat possible, ici une carte intéractive avec l’ensemble des accompagnateurs VAE aquitains géolocalisés avec une épingle sur la carte et un lien renvoyant vers le profil de chaque accompagnateur:

[googlemaps https://www.google.com/fusiontables/embedviz?q=select+col1+from+1gJAhfJJ7-N3p27bMpN11t-gALytmZ-e5smyLFbM&viz=MAP&h=false&lat=44.08168318202932&lng=1.9030818144531167&t=1&z=7&l=col1&y=2&tmplt=2&hml=ONE_COL_LAT_LNG&w=600&h=300]

La carte interactive est désormais intégrable dans WordPress.com, en effet, c’est un module complémentaire de Google Drive qui permet de fusionner son tableau (tableur style excel, open office table ou Google Table de Calcul) avec une Google Maps et de personnaliser ses épingles (alors que tous les autres applications de Google Drive s’intégraient déjà dans WordPress).

Et maintenant, je vous propose de décrire la procédure:

Voici la procédure découpée en trois phases:

1. Intégrer l’application Google Table de Fusion dans Google Drive
2. Réaliser la fusion entre un tableau d’adresse et une carte Google Maps (avec une colonne d’adresses postales simples)
3. Intégrer la cartographie personnalisée dans WordPress.com

Intégrer l’application Google Table de Fusion dans Google Drive

Première étape avoir un compte Google et se rendre dans Google Drive (qui a remplacé Google Docs).

Si vous n’avez pas le module Google Table de Fusion, il faut le rajouter:

– dans Google Drive cliquez sur « CREER », et si vous n’avez pas encore le module Table de fusion, cliquez sur « Connecter plus d’applications »:

 » 

– chercher l’application Table de fusion et cliquez dessus pour l’installer:

– vous pouvez maintenant faire « CREER » puis « Table de fusion » pour lancer l’application:

Maintenant vous allez pouvoir insérer votre base de données (avec adresses postales classiques, pas besoin de code Insee comme pour les logiciels de cartographie professionnels), ou la créer en direct (import possible depuis Open office, Excel ou Google Feuille de calcul).

Je vous conseille de créer dans votre tableau une seule colonne adresse (s’il faut, vous pouvez utiliser la fonction « Concaténer » d’Excel quand vous avez trois colonnes style « Adresse », « Code postal » et « Ville ») avant l’import dans Google Table de Fusion.

Réaliser la fusion entre un tableau d’adresse et une carte Google Maps (avec une colonne d’adresses postales simples)

A ce stade pour exploiter les nombreuses possibilités d’utilisation de Google Table de Fusion pour créer sa cartographie personnalisée, je vous propose le tutoriel que j’ai suivi, réalisé par Pierre Eloy qui travaille à la MOPA (en Aquitaine):

http://fr.slideshare.net/touristic/tutoriel-mopa-google-fusion-tables-071211

[slideshare id=10504815&style=border: 1px solid #CCC; border-width: 1px 1px 0; margin-bottom: 5px; max-width: 100%;&sc=no]

Dans ce tutoriel vous aurez pu voir qu’il existe de nombreuses options pour personnaliser sa cartographie (style et couleur des épingles, contenu de l’étiquette, possibilité de filtrer par colonne…)
Voici un autre tutoriel (mais en anglais) fort intéressant pour personnaliser sa carte:  http://commons.trincoll.edu/jackdougherty/how-to/gft-thematic-maps/ (attention, l’insertion dans un article concerne la version à installer, c’est à dire WordPress.org, donc pour WordPress.com rendez-vous ci-dessous!).

Intégrer la cartographie personnalisée dans WordPress.com

Enfin vient le moment d’intégrer votre cartographie dans WordPress.com:

– tout d’abord, il va falloir partager (« bouton « share » en haut à droite) votre carte pour la rendre publique (avec ou sans modifications possibles, au choix)

– puis publier la carte (pour récupérer le code d’intégration « iframe » que wordpress.com traduira en son code), cliquez sur « Tools » puis « Publish »

– copier le code iframe

– le coller dans votre article WordPress en mode « texte (et non le mode visuel par défaut en haut à droite du cadre de l’article)

– en repassant en mode « Visuel » (après avoir « Enregistrer le brouillon ») vous ne verrez que le code iframe transformé en code WordPress (« crochet » googlemaps….)

Attention: des fois le code iframe n’est pas transformé en code WordPress avec les crochets, voici un article avec la procédure pour passer outre et résoudre cela à la main!! https://desjeps.wordpress.com/2015/07/22/cartographie-et-agenda-collaboratifs-integres-dans-wordpress-et-donc-actualises-automatiquement/

– pour avoir le rendu, il faut soit cliquer sur « Aperçu » ou « Publier » et « Afficher l’article », et votre carte et zoomable et les épingles donneront les renseignements souhaités (ici un lien vers le profil de la personne concernée)

Réglage possible: vous pouvez régler la largeur et la hauteur de la zone carte à intégrer (paramètre w et h du code WordPress.com entre crochets)

Il est possible aussi d’intégrer une image dans la fenêtre d’information, en inscrivant dans une colonne le lien vers l’image et en déclarant cette colonne comme « four line image »…

En tout cas, pour moi cela donne plein d’idée de navigation plus intuitive dans un site, donner une carte des formations au lieu d’un tableau en pdf…. j’ai plus qu’à!! vous aussi??

PS: Dans l’exemple donnée (sur le site http://vae.drjscs33.fr  les liens pointent vers les profils des personnes, grace au plugin Buddypress pour WordPress,org, voir l’article)

PS2: Je viens de tester ça passe aussi sur téléphone Androïd !!