Il y avait quelques temps déjà que je devais vous faire un nouvel article sur le plugin jQuery GMAP3, plugin qui facilite grandement l’intégration de Google Maps sur vos sites web et le tout via le Framework jQuery.
Je vous avais déjà présenté ce plugin jQuery sur d’autres articles du blog, comme sur GMap3 – Plugin jQuery pour API Google Maps 3ème version. Mais GMAP3 a évolué et s’est vu doter d’un nouveau site web depuis.
Certes, Google facilite déjà beaucoup l’intégration de son API sur les sites web, mais via GMAP3 c’est encore plus simple et surtout avec jQuery.
En plus de pouvoir utiliser toutes les méthodes natives à l’API fournie par Google, GMAP3 va vous permettre, entre autre, de :
- Customiser vos maps
- Créer vos menus contextuels
- D’ajouter des recherches d’adresses avec auto-completion
- Créer vos marqueurs sur les maps
- Afficher le streetview de manière différente
- etc…
Le tout aisément, sans compter les méthodes comme : overlays, clusters, callbacks, events etc… présentes dans de nombreux plugins jQuery.
L’utilisation de base de ce plugin jQuery :
Intégration des librairies qui vont être utilisées (jQuery, googlemaps et gmap3)
[pastacode lang= »markup » manual= »%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22js%2Fjquery.js%22%3E%3C%2Fscript%3E%0A%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22http%3A%2F%2Fmaps.google.com%2Fmaps%2Fapi%2Fjs%3Fsensor%3Dfalse%26amp%3Blanguage%3Den%22%3E%0A%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22js%2Fgmap3.min.js%22%3E%3C%2Fscript%3E » message= » » highlight= » » provider= »manual »/]
Le code jQuery pour l’affichage d’une map Google Maps :
[pastacode lang= »javascript » manual= »%24(%22%23my_map%22).gmap3()%3B » message= » » highlight= » » provider= »manual »/]
La balise div d’accueil de la map :
[pastacode lang= »markup » manual= »%3Cdiv%20id%3D%22my_map%22%3E%3C%2Fdiv%3E » message= » » highlight= » » provider= »manual »/]
Puis un peu de CSS minimum pour donner une dimension à la balise div d’accueil :
[pastacode lang= »css » manual= »%23my_map%7B%0Aheight%3A%20350px%3B%0Awidth%3A%20600px%3B%0A%7D » message= » » highlight= » » provider= »manual »/]
Vous l’aurez compris, c’est simple, vous avez une page de démo via ce lien afin de voir une partie de ce que l’on peut faire avec ce plugin jQuery.
Site officiel du plugin jQuery GMAP3 : http://gmap3.net
Documentation GMAP3
Téléchargement GMAP3
Articles qui peuvent vous intéresser :
6 mars 2013
J’utilise Gmap, mais je ne savais pas qu’un froggie se cachais derrière ^^ je vais tester tout ça !!
16 mars 2013
Effectivement Gmap a pas mal évoluer ces derniers temps, et côté configuration c’est devenu beaucoup plus accessibles aux webmasters un peu moins portés sur le développement et javascript. Visuellement, je trouve que ça fait toujours une grosse différence d’avoir une page contact avec une carte et des marqueurs adaptés aux couleurs de la charte graphique d’un site.
16 mars 2013
Je viens de le tester à l’instant et c’est vraiment un super plugin!!
Merci beaucoup pour cet article très intéressant et la découverte de ce plugin 😉
29 mars 2013
Merci pour vos retours en tout cas.
Dès qu’il y aura du nouveau concernant ce plugin jQuery, je vous en ferai part 😉
29 mars 2013
Bonjour, j’ai déjà posté un commentaire mais il a disparu.
Je parlais du fait que je doute un peu de la rapidité ou de l’intérêt d’un tel plugin vu que l’intégration est à mon sens déjà facile, et ça ne fait que rajouter du script supplémentaire à télécharger pour l’utilisateur
30 mars 2013
Merci beaucoup pour ce partage, je vais en avoir l’utilité la semaine prochaine 🙂
31 mars 2013
Très bon plugin, j’en avait entendu parlé mais jamais testé, mais avec votre article j’ai facilement pu l’utiliser merci.
4 avril 2013
@Troll face : Désolé si le commentaire a disparu, je suis tellement spammé sur ce blog ces derniers temps qu’il est peut être passé à la trappe :\ Sinon, pour répondre à ta question, l’intérêt premier de ce plugin est d’utiliser jQuery sans compliquer l’utilisation de l’api Google, afin d’avoir une logique de programmation à la sauce jQuery.
11 juin 2013
Merci de nous faire découvrir ce plugin.
Je vais l’essayer.
Je vous tiens au courant!