Avec l’avènement des design responsive (design s’adaptant automatiquement à la taille de l’écran), il est nécessaire d’intégrer des cartes responsives au sein d’un site web adaptatif. En s’intéressant à WordPress, quelques plugins permettant de mettre en place une carte Google Maps de type responsive grâce à l’insertion d’un shortcode dans une page ou un article. Parmi ceux-ci, vous pourrez y découvrir deux plugins gratuits : Responsive Styled Google Maps et Theme Blvd Responsive Google Maps. Je vous propose de découvrir un peu plus en détail ces deux plugins.
Theme Blvd Responsive Google Maps
Theme Blvd Responsive Google Maps est un plugin qui vous permettra d’insérer une carte Google Maps sur votre site à l’aide du shortcode suivant :
[tb_google_map address="adresse, Ville, Pays"]Pour « personnaliser » l’affichage de la carte, il vous faudra ajouter d’autres paramètres dans le shortcode. Le plugin ne dispose pas d’un espace de gestion dans l’administration qui vous facilite la chose. Vous devrez mettre les mains dans le cambouis.
Les paramètres que vous pouvez ajouter sont les suivants :
- le type de carte (plan, satellite,…)
- le zoom
- la largeur et la longueur
- l’affichage de la popup
- les informations contenues dans le popup
Pour récapituler, si vous souhaitez créer un shortcode comprenant tous ces paramètres, vous allez devoir écrire quelque chose qui ressemblera à ça :
[tb_google_map address="adresse, Ville, Pays" maptype="hybrid" zoom="1" html="description" popup="true" width="100%" height="100%"]
Vous trouverez les aperçus de l’extension en vous rendant sur le site officiel des extensions WordPress, àl l’adresse suivante : http://wordpress.org/extend/plugins/theme-blvd-responsive-google-maps/
Responsive Styled Google Maps
Ce plugin permet d’obtenir une carte plus personnalisée. Cependant, après installation de ce plugin, il s’avère que la partie administration n’apparaît pas et qu’une fois sur deux, le plugin ne contient pas les fichiers requis.Hormis ces quelques couacs, ce plugin se révèle plus qu’intéressant.
En plus des paramètres présentés pour le plugin précédent, vous êtes en mesure de paramétrer les éléments suivants :
- la style de carte (couleur du fond de carte : jusqu’à 20 styles pour la version premium)
- la couleur des marqueurs (10 couleurs)
- la possibilité d’insérer plusieurs marqueurs sur une même carte
- définir le centre de la carte
- …
Sachez que ce plugin gmap est disponible en version gratuite et en version premium.
Pour les exemples de shortcodes à utiliser, je vous redirige vers le site de l’auteur (http://yava.ro/). De cette façon, vous pourrez apprécier les différentes facettes de ce plugin. Rassurez-vous, il n’est pas plus compliqué à utiliser que celui présenté précédemment.
Vous trouverez de nombreuses informations sur l’utilisation du plugin et des captures d’écran en consultant le site de son éditeur : http://yava.ro/
Télécharger Responsive Styled Google Maps
En conclusion
Si on oublie les problèmes de téléchargement de plugin, le plugin Responsive Styled Google Maps semble être la meilleure alternative.
Et vous, quelles solutions connaissez-vous ?
* * Cette case à cocher est obligatoire
*J'accepte
Pile poil ce que je cherchais pour une refonte de site existant. Dommage qu’il y ait si peu de téléchargement pour le premier… pas sur qu’il dure dans le temps d’autant plus qu’il repose sur du code repris ailleurs (gMap jQuery par Cedric Kastner et Mario Estrada)