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.

gmap3-jquery-plugin-google-map

Voici la mise en place de base du plugin :

Tout d’abord l’appel des différentes librairies à utiliser :

<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript" src="gmap3-2.0-min.js"></script>

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 :

$('#test')
.show()
.gmap3(
{
action: ':addInfoWindow',
address: "place de l'étoile, paris",
map:{
center: true,
zoom: 14
},
infowindow:{
options:{
size: new google.maps.Size(50,50),
content: 'Hello World !'
},
events:{
closeclick: function($e, infowindow, event){
alert('closing : ' + $e.attr('id') + ' : ' + infowindow.getContent());
}
},
apply:[
{action:'setContent', args:[
'<'+'span style="color:#000">Texte Exemple<'+'span>'
]}
]
}
},
{action: 'setOptions', args:[{scrollwheel:true}]}
);

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 :

Author: Franck Pertegas

Share This Post On

6 Comments

  1. 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

    Post a Reply
  2. 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 😉

    Post a Reply
  3. Je t’ai maillé sur yahoo, je sais pas si tu l’as eu…

    Post a Reply
  4. 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 …

    Post a Reply
  5. merci pour ce tutoriel !

    il fonctionne très bien avec jquery-1.4.4 et gmap3-3.1

    bonne continuation

    Post a Reply
  6. 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 ?

    Post a Reply

Trackbacks/Pingbacks

  1. Sortie de jQuery 1.5 | LudiBlog - [...] GMAP3 – Plugin jQuery – L’API Google Map v.3 Integration à la sauce jQuery [...]
  2. FullCalendar – Plugin jQuery – Créez vos propres agendas comme Google | LudiBlog - [...] GMAP3 – Plugin jQuery – L’API Google Map v.3 Integration à la sauce jQuery [...]
  3. GMAP3 – Plugin jQuery – Faciliter l’utilisation de l’API Google Map via jQuery | LudiBlog - [...] vous avais déjà parlé de ce plugin, mais la nouvelle version apporte quelques nouveautés, de plus c’est toujours intéressant…
  4. GMap3 – Plugin jQuery pour API Google Maps 3ème version | LudiBlog - [...] Javascript Version 3. C’est un plugin que j’ai déjà présenté 2 fois sur ce blog, ici et là. A…

Submit a Comment

Votre adresse e-mail ne sera pas publiée.