[jQuery] Plugin Google Map : Créez votre Google Map complète

Google laisse à disposition des développeurs une API complète pour intégrer Google Map à l’intérieur de vos sites internets. Malheureusement, cette API reste relativement complexes car extrêmement complète. Ainsi, rien que pour créer une simple carte et y ajouter un point, il faut déjà compter plus d’une cinquantaine de lignes. De quoi rebuter la plupart d’entre nous !

Ainsi, pour optimiser le temps de développement sur les actions les plus courantes, je vous ai concocté rapidement un petit plugin jQuery. Celui-ci reprend les fonctionnalités suivantes :

  • Création d’une carte
  • Gestion des points :
    • Ajout d’un ou plusieurs points
    • Icône personnalisée
    • Choix de l’action au clic :
      • Lien de redirection
      • Contenu HTML à afficher dans une fenêtre
    • Ciblage par coordonnées GPS
    • Ciblage par adresse postale
  • Gestion des itinéraires :
    • Calcul de l’itinéraire
    • Affichage de l’itinéraire sur la carte
    • Modification de l’itinéraire
    • Affichage du détail de l’itinéraire

Et tout ça en 2 lignes de javascript !

Voir la démo et télécharger le plugin

Pour tout support ou suggestion, vous pouvez utiliser les commentaires de cet article.

48 commentaires

  1. Salut Tilo,

    J’essaie actuellement d’utiliser ton plugin jquery qui a l’air très complet et très simple d’utilisation.

    Malheureusement pour l’instant j’ai toujours le même message :
    « Google a désactivé l’utilisation de l’API Google Maps pour cette application. La clé fournie n’est pas une clé API Google valide ou n’est pas une clé autorisée pour la version 3 de l’API Javascript Google Maps sur ce site. Si vous êtes le propriétaire de cette application, veuillez consulter l’adresse suivante pour savoir comment obtenir une clé valide : https://developers.google.com/maps/documentation/javascript/tutorial#Obtaining_Key »

    Je pense bien sur avoir bien installé le plugin comme tu le dis dans la partie Installation dans la documentation en rajoutant mon api key.
    j’ai bien copié la clée comme sur cette image :
    https://developers.google.com/maps/documentation/javascript/images/api_console_key.jpg

    Pense tu que cette erreur peux venir du fait que je bosse sur ce site en local et non sur un serveur web?

    Merci d’avance.

    Benoit

  2. Salut,
    Il y a un bug lorsque l’on souhaite ajouter un marker: le zoom qu’on aura réglé préalablement sera réinitialiser à une valeur par défaut.
    Du coup on ne peut paramétrer le zoom par defaut seulement si l’on n’ajoute pas de marker….
    Une solution?

    1. En effet, le marker fait changer le « bound » qui permet, quoi qu’il arrive, de toujours avoir une vue qui permet de voir tous les points.
      Je vais voir bientôt pour une option permettant de désactiver ce recalcul automatique.

    2. En attendant un correctif, petit fix pour toi. Après l’insertion de ton ou tes points, tu peux remodifier le zoom de la carte de cette manière :

      var map = $(‘#map’).data(‘googleMap’);
      map.setZoom(11);

      Enjoy !

    1. Dans l’immédiat, ce n’est pas directement inclus dans la librairie. Par contre, tu peux tout à fait récupérer l’objet map et le manipuler comme tu veux :

      var map = $(‘#map’).data(‘googleMap’);
      map.setOption({
      disableDefaultUI: true
      });

      Ce genre de choses 🙂

  3. Bonjour,
    Très bon tuto!
    Par contre comment fait-on pour intégrer du CSS (par exemple changer la couleur de la map, des infos bulles, …)?

  4. Bonjour

    Enfin des explications simples et claires sur la mise en place d’une carte Google Maps ! Merci. Ceci dit, le réservé à ma carte reste inlassablement vide. Serait-il possible que je n’ai pas la bonne version de jquery?
    J’ai inclus jquery-1.9.1.min.js, est-ce que cela suffit?
    Par ailleurs, je n’ai modifié dans jquery.googlemap.js que les coordonnées gps du centre.

    Merci

    1. Bonjour, serait-il possible d’avoir un accès à la page en question ?

      L’erreur habituelle reste de ne pas attribuer de hauteur au block contenant la carte en CSS, ce qui fait que la carte fait donc 0px de haut.

  5. Bonjour, super plugin, qui fonctionne à merveille! Du beau travail.
    Est-il possible, lorsqu’un itinéraire a déjà été créé et qu’un deuxième est demandé, de supprimer le premier sans passer par une réinitialisation complète de la carte ?
    Merci d’avance

  6. Bonjour, un peu d’aide s’il vous plait. j’ai le meme problem que Tanguy. je n’arrive pa a voir ou je peut mettre ce code la
    var map = $(‘#map’).data(‘googleMap’);
    map.setZoom(11);
    quelq’un peut m’aider,
    merci

      1. Bonjour je déterre un peu… Je ne vois pas ou afficher ce fameux code… Je n’y connais rien en JS, juste débutant en html5/css3 et jquery… Depuis des heures j’essaie.. Je vais me pendre!!! lol… Si vous pouviez m’indiquer une ligne ou quelque chose comme ca… Merci d’avance

  7. Vraiment super ce plugin !

    Question : peut-il fonctionner sur une page dont le charset est iso-8859-1 ?

    Il fonctionne sur ma page test dont le charset est UTF-8, mais la carte n’apparaît pas dans une page dont le charset est iso-8859-1, ce que je ne peux changer pour le moment.

    Merci

  8. Great plugin! Thank you for your efforts. I am trying to use the text. The title works, but my text is not displaying, can you provide assistance?

    $(« #map »).addMarker({
    address: « 123 myStreet, madison, Al, 35758 », // Postale Address
    url: ‘index.php’, // Link to redirect onclick (optional)
    id: ‘1’, // Unique ID for your marker
    icon: ‘images/Number-9-icon.png’, // Icon URL,
    title: ‘myTitle’, // Title
    text: ‘my text. has many words.’ // HTML content
    });

Laisser un commentaire