GMAP3 – Plugin jQuery – L’API Google Map v.3 Integration à la sauce jQuery
Aujourd’hui je vais vous parler d’un autre plugin jQuery : GMAP3. Un plugin qui va vous permettre d’utiliser l’API Google Map v3 Integration via le framework javascript jQuery. Ce qui facilite l’utilisation de l’API de Google pour les habitués de jQuery. J’ai découvert ce plugin grâce à jb, un lecteur du blog (cf. ici) et je l’en remercie.
Voici la mise en place de base du plugin :
Tout d’abord l’appel des différentes librairies à utiliser :
[pastacode lang= »markup » manual= »%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22jquery-1.4.4.min.js%22%3E%3C%2Fscript%3E%0A%3Cscript%20src%3D%22http%3A%2F%2Fmaps.google.com%2Fmaps%2Fapi%2Fjs%3Fsensor%3Dfalse%22%20type%3D%22text%2Fjavascript%22%3E%3C%2Fscript%3E%0A%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22gmap3-2.0-min.js%22%3E%3C%2Fscript%3E » message= » » highlight= » » provider= »manual »/]
Puis le code, qui va permettre d’insérer dans la div #test, la map qui pointera « la place de l’étoile à Paris », avec un tooltip positionné dessus, avec un texte d’exemple : « Texte Exemple ». Puis à la fermeture du tooltip, un évènement se déclenchera :
[pastacode lang= »javascript » manual= »%24(‘%23test’)%0A.show()%0A.gmap3(%0A%7B%0Aaction%3A%20’%3AaddInfoWindow’%2C%0Aaddress%3A%20%22place%20de%20l’%C3%A9toile%2C%20paris%22%2C%0Amap%3A%7B%0Acenter%3A%20true%2C%0Azoom%3A%2014%0A%7D%2C%0Ainfowindow%3A%7B%0Aoptions%3A%7B%0Asize%3A%20new%20google.maps.Size(50%2C50)%2C%0Acontent%3A%20’Hello%20World%20!’%0A%7D%2C%0Aevents%3A%7B%0Acloseclick%3A%20function(%24e%2C%20infowindow%2C%20event)%7B%0Aalert(‘closing%20%3A%20’%20%2B%20%24e.attr(‘id’)%20%2B%20’%20%3A%20’%20%2B%20infowindow.getContent())%3B%0A%7D%0A%7D%2C%0Aapply%3A%5B%0A%7Baction%3A’setContent’%2C%20args%3A%5B%0A’%3C’%2B’span%20style%3D%22color%3A%23000%22%3ETexte%20Exemple%3C’%2B’span%3E’%0A%5D%7D%0A%5D%0A%7D%0A%7D%2C%0A%7Baction%3A%20’setOptions’%2C%20args%3A%5B%7Bscrollwheel%3Atrue%7D%5D%7D%0A)%3B » message= » » highlight= » » provider= »manual »/]
A savoir que tous les éléments de l’API de Google Map sont utilisable et disponible via GMAP3. Important, l’élément div qui accueillera la map doit obligatoirement avoir une hauteur, sinon, vous risquez de ne pas voir le rendu.
Il existe une multitude d’exemples sur le site du plugin : http://night-coder.com/jquery-plugin-gmap3.html
Dans le dossier de téléchargement aussi : http://night-coder.com/jquery-gmap3-2.0.zip
Retrouvez le plugin sur le site de jQuery : http://plugins.jquery.com/project/gmap3
Bon code à tous 😉
Articles qui peuvent vous intéresser :
30 mars 2011
La version 3 est sortie et dispose d’un nouveau site bien plus clair : http://gmap3.net
=> De nouvelles fonctionnalités et une utilisation plus simple
30 mars 2011
Merci JB pour l’info, je crois que ça mérite que j’y jette une nouvelle fois un œil, et pourquoi pas un nouvel article dans la semaine 😉
31 mars 2011
Je t’ai maillé sur yahoo, je sais pas si tu l’as eu…
1 avril 2011
Simpa…
Voici le lien de mon framework GmapV3 :
Framework GmapV3
Celui-ci est totalement indépendant de Framework javascript et permet de skinner tout élément d’une Gmap, faire des imports massif, créer des tracés …
18 avril 2011
merci pour ce tutoriel !
il fonctionne très bien avec jquery-1.4.4 et gmap3-3.1
bonne continuation
9 juin 2011
Bonjour,
Je me suis lancé depuis peu dans la mise en application de votre framework GmapV3 que je trouve remarquable.
Je salue au passage tout le travail effectué pour permettre à des débutants comme moi de pouvoir accéder à votre application. Encore merci.
J’aurais aimé savoir s’il était envisageable de mettre en place un bouton imprimer qui permettrait d’imprimer la cartographie à l’écran ?
Si OUI comment s’y prendre ?