Après mon premier article sur l'intégration des cartes Google Maps sur son site je recherchais le moyen de l'intégrer au mieux dans mon site. J'ai trouvé la solution avec GMapsOverlay, une lightbox permettant d’afficher une carte google.
L'intérêt de cette recherche était de trouver une solution pour placer sans modifier ma charte graphique un lien vers une carte google (google maps) permettant aux visiteurs de mon site de visualiser le lieu où je vis. Je ne voulais pas d'une page supplémentaire mais bien quelque chose qui s'intègre facilement à mon blog.
GMapsOverlayDerrière ce nom un peu barbare se trouve en fait l'application en ajax d'un pop-up (une fenêtre qui s'ouvre) qui permet l'affichage d'une carte donnant une localisation précise. Voyons voir comment mettre ça en place sur votre site :
Comme à chaque fois il convient de commencer par s'inscrire pour disposer d'une clé API vous permettant d'installer cette carte sur votre site.
Ensuite il vous faut disposer des sources du GMapsOverlay :
le fichier mootools.js
le fichier gmapsoverlay.js
le fichier maps.css permettant de gérer l'affichage de la carte
et enfin la source du code HTML permettant de faire les liens correctement
Vous trouverez plus bas un fichier à télécharger qui reprends tout ces éléments, ainsi ce sera plus simple ... Mais si vous voulez regarder par vous même vous pouvez vous rendre sur le site sur lequel j'ai trouvé cette solution.
J'ai mis de nombreux commentaires aussi bien dans le fichier index.html que dans le fichier maps.css ou encore gmapsoverlay.js. Vous devriez ainsi disposer de tous les éléments pour réussir l'intégration de votre carte dans votre site (que ce soir un blog ou non).
Je vous invite aussi à voir ce que cela donne sur mon site perso (cliquez sur le lien à droite dans la rubrique Où on est ?).
Je vous propose donc de télécharger l'ensemble des fichiers ci-dessous ! Et laissez moi un commentaire avec un lien vers votre site !
Jeu de briques
Snake
Pacman
Bubble