GMAP3 – Plugin jQuery – Facilitez-vous l’intégration de Google Maps

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.

logo-gmap3

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)

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

Le code jQuery pour l’affichage d’une map Google Maps :

$("#my_map").gmap3();

La balise div d’accueil de la map :

<div id="my_map"></div>

 

Puis un peu de CSS minimum pour donner une dimension à la balise div d’accueil :

#my_map{
height: 350px;
width: 600px;
}

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 :

Author: admin

Share This Post On

9 Comments

  1. J’utilise Gmap, mais je ne savais pas qu’un froggie se cachais derrière ^^ je vais tester tout ça !!

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

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

    Post a Reply
  4. Merci pour vos retours en tout cas.

    Dès qu’il y aura du nouveau concernant ce plugin jQuery, je vous en ferai part 😉

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

    Post a Reply
  6. Merci beaucoup pour ce partage, je vais en avoir l’utilité la semaine prochaine 🙂

    Post a Reply
  7. Très bon plugin, j’en avait entendu parlé mais jamais testé, mais avec votre article j’ai facilement pu l’utiliser merci.

    Post a Reply
  8. @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.

    Post a Reply
  9. Merci de nous faire découvrir ce plugin.
    Je vais l’essayer.
    Je vous tiens au courant!

    Post a Reply

Trackbacks/Pingbacks

  1. jQuery 2.0 Released | LudiBlog - [...] GMAP3 – Plugin jQuery – Facilitez-vous l’intégration de Google Maps [...]

Submit a Comment

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