Mes Cartes sur votre site web

Vincent GUIGUI — 2007-08-15T16:00:47Z

Contexte

Il y a quelques mois, j'avais commencé la réalisation d'un service web permettant aux utilisateurs de créer une carte Google Maps et de la personnaliser (ajout de points d'intêret, d'icônes et de chemins). Avant d'avoir eu l'occasion de mettre en ligne mon service et de devenir millionaire, j'ai été pris de cours par Google lui-même lors de la mise en ligne du service Mes Cartes qui fait exactement la même chose.

Dans mon service, je fournissais en plus la possibilité aux utilisateurs d'intégrer leurs cartes personnalisées facilement sur leur site web à l'aide d'un simple code javascript.

Comme je trouvais cette fonction très utile mais que la réalisation de service n'était plus nécessaire (merci Google), j'ai effectué quelques recherches sur les fonctions fournies par de Google Maps et je me suis rendu à l'évidence que cette fonction n'était pas (pour l'instant)présente.

Voici donc Ma solution (donc non officiellement et non-reconnue par Google) pour intégrer Mes Cartes Google Maps sur les pages d'un site web.

Explications préliminaires

Pour créer une carte personnalisée, il faut tout d'abord s'inscrire à ce service : Google Maps Mes Cartes.

Lorsque vous créez une carte personnalisée sur Google Maps, les informations relatives à celle-ci (points, tracés...) sont enregistrées sur les serveurs de Google. Vous pouvez donc accéder à vos cartes pour les modifier à partir de n'importe quel ordinateur.

Si votre carte est publique, n'importe quel utilisateur pourra la consulter via les services de recherches Google Maps et Google Earth. Si elle est privée seuls les utilisateurs connaissant l'adresse URL de la carte pourront la consulter.

L'URL de consultation d'une carte est de la forme : http://maps.google.fr/maps/ms?om=1&msa=0&msid=XX.YY&z=7

Le paramètre msid est l'identifiant unique de votre carte (XX correspond à votre compte et YY à la carte en particulier), z correspond au zoom par défaut de la carte.

Google fournit une fonction très intéressante qui permet d'exporter la carte au format KML. Ce format de fichier (basé sur le XML) sert à stocker des informations géographiques pour les utiliser dans des logiciels de cartographies (Google Earth, Google Maps) ou de navigation (GPS).

Google a eu la bonne idée de faire que le fichier KML d'une carte soit toujours accessible via une URL de la forme (vous pouvez trouver cette URL faisant clic-droit/Copier le raccourci sur le lien KML de votre carte) :

 http://maps.google.fr/maps/ms?om=1&msa=0&msid=XX.YY&output=kml

L'URL est donc identique à celle de la carte avec seulement le paramètre output en plus. Vous pouvez donc utiliser votre carte dans presque n'importe quel logiciel compatible KML.

L'interface de programmation de Google Maps (Google Maps API) permet aux Webmasters d'insérer une carte Google Maps sur les pages de leur site web.

Avec les évolutions successives de Google Maps il est maintenant possible d'ouvrir un fichier KML et de l'afficher à l'aide de l'objet GeoXML.

Pour pouvoir utiliser les fonctions de programmation de Google Maps, il faut s'incrire et fournir l'URL du site sur lequel les cartes seront affichées. Google pourra de ce fait analyser, filtrer, faire des statistiques d'affichage et bannir en cas de non respect des Conditions d'utilisation.

Après inscription, Google fournit un identifiant unique appellé Google Maps API Key. Cet identifiant devra être utilisé dans le javascript d'insertion de la carte Google Maps.

La solution

Lorsque vous intégrez une carte Google Maps dans une page web, vous devez simplement rajouter les deux lignes suivantes afin de charger le fichier KML et l'afficher sur la carte.


 var geoXml = new GGeoXml("KML_URL");
 map.addOverlay(geoXml);

Note : l'objet GGeoXml prend en paramètre une url complète vers un fichier KML. Ce fichier KML peut être hébergé sur n'importe quel site internet (il ne doit donc pas forcément être venir de Google). Cela vous permet d'utiliser des fichiers KML qui auraient été générés par d'autres logiciels. Google ne recharge pas le fichier KML à chaque appel et préfère utiliser une version mise en cache. Pour forcer Google à utiliser le fichier modifié, il faut changer l'url (par exemple en ajoutant un paramètre quelconque à la fin : http://www.site/com/fichier.kml ?741852963)

Voici le code complet d'une page intégrant une carte Google Maps Mes Cartes :

Par exemple : L'URL de la carte de Mes Voyages de vacances est :
http://maps.google.fr/maps/ms ?om=1&msa=0&msid=1009281564...

Voici le résultat de son intégration dans cette page :

Remarques

Google n'utilise pas exactement l'objet GGeoXml sur son propre site, il se peut donc que des différences notables se fassent sentir entre l'affichage du fichier KML sur votre site et le rendu chez Google Maps. Les principales différences sont :
GGeoXml sur votre site doit charger un fichier KML contenant du HTML respectant la norme XHTML dans les descriptions, c'est-à-dire que les balises HTML ouvrantes <...> au sein du CDATA doivent avoir leur pendant fermant () ou être atomitque (<.../>)
GGeoXml n'affiche pas tous les marqueurs si le fichier KML en contient trop ou est trop lourd. De plus le fichier généré par Google Maps déclare un style pour chaque marque même si ce style est déjà déclaré ailleurs, ce qui rend le fichier encore plus gros. Ma recommandation est de récupérer le fichier KML de Google et de le modifier afin d'alléger la déclaration des styles (c'est un peu fastidieux manuellement mais automatisable). Si le fichier est toujours trop gros, il faut le découper en plusieurs fichiers (par exemple : par thème, région, type de lieu...) et déclarer en javascript plusieurs GGeoXml (chacun ouvrant un fichier KML différent) et ajouter chaque GGeoXml avec la fonction AddOverlay.
Google effectue un peu de formattage automatique lors de l'affichage des info-bulle (InfoWindow) (le titre est en gras, les urls sont converties en liens...), des choses qu'il faut donc faire manuellement sur son propre site.

TipTopTool

Mes Cartes sur votre site web

Contexte

Explications préliminaires

La solution

Remarques