Le portail TICE des formateurs de la Marne

Avril 2014
LMMJVSD
31123456
78910111213
14151617181920
21222324252627
2829301234

Vous êtes ici: Sommaire TIC   > Logiciels   > Sites Web  

Insérer une Google Maps dans les sites web (spip et html)
mis en ligne le  vendredi 8 janvier 2010 par  Romain Miot
Enregistrer au format PDF
Vous retrouverez ici les éléments techniques permettant l’intégration d’une google maps dans un site web (spip et html). Cet article pourra être amélioré ultérieurement. Cette intégration n’a pas été testée sous guppy ni joomla.
L’aspect pédagogique des Google maps n’est pas abordé ici, son utilité n’est pas à démontrer (course d’orientation, représentation de l’espace...) mais il fera l’objet d’un article ultérieur.

Tout d’abord, deux exemples de réalisation à partir de ce code :
- sur le site de l’IA51 : http://wheb.ac-reims.fr/ia51/spip.php ?article437
- sur le site de l’ASH51 : http://www.ac-reims.fr/ia51/ash/nouveausite/spip.php ?article66

Ce code fonctionne correctement sous spip et je l’ai testé en html sur un site privé.

Pré-requis :
- un compte google qui fonctionne.

En cas de besoin, accueil de l’API Google : http://code.google.com/intl/fr/apis/maps/

- Etape 1 : Identifier son site sur Google pour activer l’API : http://code.google.com/intl/fr/apis/maps/signup.html

Pour tous ceux qui sont sur ac-reims.fr, il faut utiliser l’adresse exacte du site public, (l’alias) (exemple : www.ac-reims.fr/ia51/ash fontionne en espace public, par contre dans l’espace privé non, car l’adresse exacte est wheb.ac-reims.fr/ia51ais/)

- Etape 2 : Conserver précieusement la clé générée du modèle suivant, elle sera à remplacer dans les exemples de code fourni : ABQIAAAAc1NZ_pkUwDXLmEcr24X45xQgZxjdtl3J6JF9dwcE8UmC0-gOART3MPOc8lICIGuV-ChGTwBGCbUZlQ

- Etape 3 : Récupérer les codes dans le répertoire zip suivant. Vous trouverez les fichiers avec difficultés progressives avec et sans commentaires (commencer par le plus simple évidemment). Vous trouverez en bonus deux png téléphone et fax.

Zip - 14.2 ko
Googlemaps

- Etape 4 : Remplacer la clé, les latitudes et longitudes. Pour trouver les vôtres, je vous conseille : http://www.multimap.com/ C’est à ce stade que je joins le lien de ceux qui m’ont permis de commencer (vous trouverez en bas de page un petit tutoriel animé) : http://ww2.ac-poitiers.fr/matice/spip.php ?article57

- Etape 5 (html) : Pour ceux qui travaillent en html, inclure dans leur (éventuel) modèle de page les scripts dans le head et les appels dans le body à l’endroit choisi.

- Etape 5 (spip) Pour les autres, ceux qui travaillent en spip, deux méthodes :
Méthode 1 : travailler à l’arrache, avec un code pas propre, mais qui fonctionne pas mal ou ;
Méthode 2 : installer des plugins de spip, et réussir à les faire fonctionner dans votre squelette.

Méthode 1 :
(Ne pas proposer votre page à la validation w3c (http://validator.w3.org/), ce n’est pas joli, joli)
Consulter le fichier spipgooglemaps.html dans le zip pour voir le code commenté.
Pour le copier/coller, vous pouvez prendre le fichier .txt.
Par contre pensez à remplacer la clé, les latitudes et longitudes, et éventuellement les éléments commentés dans les fichiers (zoom, type de carte...).
A priori un bug d’affichage sous IE uniquement (toutes versions) en spip 1.9.2 est à noter. Pas de problème en spip 2.0.9.

Méthode 2 : installer les plugins suivants avec l’aide des tutoriels des programmeurs :
Plugin qui active l’API : http://www.spip-contrib.net/Plugin-Google-Maps-API ;
Plugin qui permet d’installer des google maps : http://www.spip-contrib.net/Plugin-Gis-escoitar ;
Ceux-ci semblent fonctionner correctement, mais mes problèmes d’alias et/ou de plugin à l’intérieur de squelette déjà bien compliqué m’empêchent pour le moment d’afficher correctement la Map.

- Etape 6 (pour les fans) :
Lien vers la documentation de base (en anglais) qui m’a permis de créer ces cartes : http://code.google.com/intl/fr/apis/maps/documentation/introduction.html ;
Et lien vers les conditions d’utilisation des google maps (en gros on a le droit) : http://www.google.com/intl/fr_ALL/help/terms_maps.html ;