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 :

Comments
  1. Jb
  2. LudiKadmin
  3. Jb
  4. baptiste GAUTHIER
  5. Michael REMY
  6. LAURENT

Leave a Reply

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *


*