Mettre une carte Google Maps sur son site Internet (tuto)

Posté le 18/02/2015 dans la catégorie Tutoriels | 51 commentaires

Carte Google Maps

Sur votre site internet, vous avez certainement une page contact sur laquelle vous précisez vos coordonnées voire proposez un formulaire de contact, mais vous aimeriez peut-être mettre un plan d’accès pour que vos clients puisse venir directement chez-vous (bureau, magasin…). Pour cela il est possible d’intégrer simplement une carte interactive grâce à Google Maps. Grâce à ce tutoriel, vous saurez le faire en quelques minutes !

Les prérequis pour intégrer une Google Maps sur son site web

Pour suivre ce didacticiel il vous faut :

  • un navigateur internet pour utiliser le service cartographique de Google
  • un éditeur de code HTML: logiciel ou CMS (WordPress)
  • et c’est tout 😉

1 – Générer la carte Google Maps

Carte Google Maps : génération du code HTML

Génération du code HTML d’une carte Google Maps

Carte Google Maps : recherche et sélection de l'adresse

Saisie et recherche de l’adresse dans Google Maps

Dans un premier temps, il vous faut ouvrir votre navigateur et vous rendre sur Google Maps à l’adresse https://maps.google.fr/ puis :

  • Saisissez votre adresse complète dans le champ de recherche. Google recherche au fur et à mesure de la saisie ; il est d’ailleurs très fort pour ça ! Pour l’exemple j’ai saisi l’adresse de mon appartement quand j’étais étudiant 😉
  • Une fois que vous trouvez votre adresse dans les suggestions, cliquez dessus: cela va directement lancer la recherche, c’est-à-dire afficher la carte à l’adresse demandée en y positionnant un marqueur.
  • Ensuite, cliquez sur l’icône en forme de roue crantée placée en bas en droite de la carte proche des boutons de navigation, puis cliquez sur « Partager ou intégrer la carte» :
  • Une fenêtre en superposition de la carte apparait, cliquez alors sur le libellé « Intégrer la carte »
  • Votre carte s’affiche en aperçu. Il vous est alors possible de choisir la taille souhaitée dans la page de votre site internet : petite, moyenne, grande ou une taille personnalisée ; sa taille est directement redimensionnée en fonction de votre sélection.

2 – Intégrer le code HTML pour mettre en  place la carte Google Maps

Code iframe d'une carte Google Maps dans un article dans WordPress

Insertion du code HTML Google Maps dans l’éditeur WordPress

Maintenant, il ne vous reste plus qu’à mettre la ligne de code HTML générée par Google Maps dans la page sur laquelle vous souhaitée mettre votre carte fraichement générée :

  • Toujours dans la fenêtre d’aperçu de votre carte, copiez le code HTML commençant par « <iframe », comme dans mon exemple :
    <iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2710.207049454749!2d-1.5729033!3d47.2125309!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4805ec0fcda6c4cb%3A0xd620ca38dafa1e9a!2s2+Rue+La+Motte+Picquet%2C+44100+Nantes!5e0!3m2!1sfr!2sfr!4v1423244007186" width="600" height="450" frameborder="0"></iframe>
  • Parcourez le code HTML de votre page web jusqu’à l’endroit où vous placerez la carte ; si vous êtes sur WordPress, vous devrez passer l’éditeur « texte » (plutôt que « visuel ») de votre article ou page.
  • Collez la portion de code HTML
  • Enregistrez votre fichier pour sauvegarder les modifications

 

Exemple d’intégration d’une carte Google Maps dans une page web

Quoi de mieux qu’un exemple concret ! Voici ci-dessous le rendu de la carte Google Maps décrite dans ce tutoriel.

Elle présente l’emplacement de notre adresse en mode « Plan » mais vous pouvez basculer en « Images satellite » en cliquant sur le carré en bas à gauche. Vous retrouvez les boutons de zoom en bas à droite ; pour se déplacer sur la carte, il suffit de maintenir le clic sur la carte et déplacer la souris. Dans l’encadré blanc qui indique l’adresse, il est possible d’afficher la carte en grand dans une nouvelle page, tout comme lancer une recherche d’itinéraire.

Intégration d’une carte Google MyMaps sur son site internet

Suite au commentaire de Lola, je complète cet article par la procédure à suivre pour insérer une carte créée via l’outil Google MyMaps sur une page HTML ou une page WordPress :

  1. Il faut bien évidemment pour commencer une belle carte que vous aurez dessinée  depuis Google MyMaps (voir celle utilisée dans ce tuto).
  2. Dans l’interface d’édition de votre Google My Maps (voir en plus les captures d’écran ci-dessous) :
    1. Cliquez sur le bouton « Partager » pour activer l’accès « public » en mode « Lecture » et validez.
    2. Cliquez sur les trois petits points superposés à côté du bouton « Partager » pour dérouler les actions supplémentaires et sélectionnez « Intégrer la carte à mon site« .
    3. Copiez le code HTML généré (balise iframe)
  3. Collez alors ce code dans votre page HTML ou article WordPress comme expliqué à l’étape 2 de ce tutoriel.
Clic sur le bouton "Partager"

Clic sur le bouton « Partager »

Modification de l'accès

Modification de l’accès

Activation de l'accès "public" en mode "Lecture"

Activation de l’accès « public » en mode « Lecture »

Validation de l'accès public

Validation de l’accès public

Clic sur les trois petits points superposés et sélection de "Intégrer la carte à mon site"

Clic sur les trois petits points superposés et sélection de « Intégrer la carte à mon site »

Copie du code HTML à coller sur son site

Copie du code HTML à coller sur son site

Voici ci-dessous l’exemple concret de l’insertion d’une carte personnalisée avec Google My Maps dans cette page web :

Voilà, c’était pas bien compliqué, merci Google Maps et Google MyMaps ! Vous avez maintenant une belle carte, interactive qui plus est, qui donne une vraie valeur ajoutée, à votre page contact par exemple de votre site internet.

51 commentaires

  1. Chipie
    13 octobre, 2015

    Bonjour !

    Je suis à la recherche d’un constructeur de carte interactif, dont on pourrait modifier les couleurs. Je connais « map buildr », mais tous les designs proposés ne me conviennent pas ; cela manque d’élégance.

    Merci et bonne journée 😉

    Répondre
    • Sébastien
      20 octobre, 2015

      Bonjour, je ne connaissais pas Map buildr, cela semble intéressant, merci du partage. Sinon tu peux essayer les cartes « My Maps » quand tu es connecté à ton compte Google ou alors directement utiliser l’API de Google Maps https://developers.google.com/maps/. Bonne continuation.

      Répondre
  2. Magalie JOLLY
    16 novembre, 2015

    Super article, super tuto! Tout bien expliqué et illustré. Installé en 5 minutes, tout marche parfaitement, merci à vous!;-)

    Répondre
  3. Lola
    29 décembre, 2015

    Bonjour,
    Je n’arrive pas à intégrer une carte que j’ai faite sur google mymaps et de l’intégrer dans wordpress..
    Avez vous une solution ?

    Répondre
    • Sébastien
      30 décembre, 2015

      Bonjour Lola,
      je viens de détailler la réponse en compétant le tuto ; bonne intégration 😉

      Répondre
  4. Nui
    10 janvier, 2016

    Le tuto, rien à redire, ce qui me gêne, c’est d’utiliser un iframe pour l’intégration. existe t’il une alternative à l’iframe?
    L’iframe est obsolète depuis un moment, et google lui même le déconseille dans vos page web. Cherchez l’erreur…. faites ce que je dit, pas ce que je fait.
    Le validateur W3C met aussi votre page non valide. et on obtient l’erreur suivante:
    Error: The frameborder attribute on the iframe element is obsolete. Use CSS instead.

    Répondre
    • Sébastien
      10 janvier, 2016

      Merci de votre retour.
      L’iframe reste le moyen le plus simple et rapide pour mettre en place une Google Maps surtout sans connaissances techniques. Après si vous avez des bases en développement web (HTML et Javascript) il est tout à fait possible d’intégrer des cartes plus « proprement » via notamment l’API Google Maps pour le Web disponible à l’adresse https://developers.google.com/maps/web/?hl=fr.
      Google ne recommande pas l’iframe, en effet, mais cela en terme de référencement. La Google Map n’ayant aucun contenu indexable, l’utilisation de l’iframe n’est pas dérangeant.
      Enfin, pour être valide W3C, il vous est possible de retirer l’attribut frameborder (frameborder= »0″), vous devrez alors passer par les styles CSS pour personnaliser le graphisme de l’iframe.

      Répondre
  5. Alain CLERO
    22 septembre, 2016

    Ammonite.76
    Bonjour et merci pour vos informations. Malheureusement, j’ai beau cherché, je ne trouve nulle part la réponse à ma question. Je crée actuellement un site sous WordPress pour un groupement régional d’association d’Amis de Musées. J’ai créé, pour ma page d’accueil, une carte avec des marqueurs pour chaque ville où se trouve une association. Je souhaiterais maintenant que ce marqueur comporte un lien vers la page propre de l’association à l’intérieur du site mais je ne trouve rien là dessus. J’ajoute que je ne suis pas un informaticien chevronné et n’ai guère l’habitude de manier du code (même si j’ai fait, il y a déjà quelques temps, de la programmation en clipper -Dbase – eh oui ! ça date). Je veux simplement dire que je ne suis pas familier des langages modernes comme JAVA. Y a-t’il un moyen simple de résoudre mon problème ? Merci d’avance.

    Répondre
    • Sébastien
      22 septembre, 2016

      Bonjour Alain, pour insérer un lien dans les infobulles de votre carte Google Maps, il suffit de mettre un lien HTML de type <a href="adressedusite" target="_blank">Libellé du lien</a> dans le descriptif du contenu des infobulles. Espérant vous avoir aidé 😉

      Répondre
      • Alain CLERO
        22 septembre, 2016

        Merci de cette réponse très rapide. Je n’ai pas le temps d’essayer maintenant mais je vous tiens au courant.

        Répondre
  6. André
    14 novembre, 2016

    Merci pour ce tutoriel, bien utile, j’ai réussi l’intégration en quelques minutes seulement. A bientôt !

    Répondre
  7. guigui2
    7 janvier, 2017

    Bonjour comment afficher le lien en fonction des coordonnées entrées, je veux comprendre la signification des variables envoyé en paramètres

    Répondre
    • Sébastien
      7 janvier, 2017

      Bonjour, l’interface de Google Maps a quelque peu changé. Pour trouver le lien pour générer le code de la carte, il faut cliquer sur le lien « Partager » en haut à gauche sous le résultat de la recherche, puis ouvrir l’onglet « Intégrer la carte ». Les variables en paramètres dans le lien sont l’adresse, les coordonnées GPS et des données propres à Google. Bonnes continuations.

      Répondre
      • fatou
        20 mars, 2017

        Bonjour Sébastien,

        merci pour ton aide, c’était un tuto très riche, j’ai appris des choses de tes réponses aux commentaires aussi 🙂

        merci infiniment

        Répondre
        • Sébastien
          20 mars, 2017

          Bonjour Fatou, merci pour ton commentaire, ravi d’avoir pu t’aider.

          Répondre
  8. Alexandre
    3 mai, 2017

    Bonsoir,

    Comment peut-on intégrer un carte du même genre avec la possibilité d’y entrer un point de départ et un point d’arrivée pour que cela calcule le prix d’une course ?

    Je précise, je suis vtc et je fais mon site avec wix. Je peux y intégrer du code html mais je n’y connais rien.

    Merci pour votre aide.

    Répondre
  9. Marino
    19 mai, 2017

    Bonjour,
    J’ai commencé à intégrer une carte avec des adresses . Ca marche très bien mais je voudrais changer l’affichage :
    – plutôt ouvrir une bulle que le volet à gauche quand on clique sur un repére
    – masquer le bandeau du haut avec le menu, le titre etc …

    Est ce que c’est possible ?
    Merci pour votre aide

    Marino

    Répondre
    • Sébastien
      19 mai, 2017

      Bonjour Marino,
      Ce que vous voulez faire est tout à fait réalisable, mais il vous faudra des connaissances en HTML et javascript.
      Vous devrez passer par l’API Google Maps dont vous trouverez la documentation sur la page https://developers.google.com/maps/web/?hl=fr
      Bonnes continuations.

      Répondre
  10. céleste
    3 septembre, 2017

    Intégration d’une carte Google MyMaps sur son site internet
    Cliquez sur les trois petits points superposés à côté du bouton « Partager » pour dérouler les actions supplémentaires et sélectionnez « Intégrer la carte à mon site« .

    Bonjour,
    Ca ne marche plus, les trois petits points et donc la commande « Intégrer la carte à mon site« n’existe plus dans google mymaps !
    Comment faire ?
    Cordialement,

    Répondre
    • céleste
      3 septembre, 2017

      Ah ! Les 3 points sont montés et sont maintenant situés au niveau du titre de la carte.
      Cordialement,

      Répondre
      • Sébastien
        4 septembre, 2017

        Bonjour Céleste,
        Merci d’avoir précisé les subtilités de la mise à jour de l’interface de Google Maps 😉
        Cordialement.

        Répondre
  11. Pierre
    13 septembre, 2017

    Bonjour,
    …. dans le site la carte ne s’ouvre pas à l’échelle fixée dans « définir la vue par défaut »:

    comment imposer l’échelle lors de l’affichage de la carte dans le site?

    Bonne journée

    Répondre
    • Sébastien
      15 septembre, 2017

      Bonjour Pierre,
      Avez-vous essayé de caler l’échelle à votre convenance avant de générer le code de l’iframe ?
      Cordialement.

      Répondre
  12. Pierre
    16 septembre, 2017

    … ah oui ça aurait été super d’avoir l’échelle codée dans les param de l’i-frame….
    mais non malheureusement ça ne change rien de copier après la mise à l’échelle et « définir la vue par défaut »

    En fait il me semble qu’il y a 1 incrément d’échelle de différence. On arrive à imposer ce qu’on veut.

    En revanche l’échelle est correctement gérée avec lien partagé!

    Merci
    Bonne journée

    Répondre
  13. serge
    20 septembre, 2017

    Bonjour

    Merci Pour ce Tutoriel très utile.
    Merci de partager vos connaissance
    Cela fonctionne parfaitement.

    serge

    Répondre
    • Sébastien
      26 septembre, 2017

      Bonjour Serge, merci pour votre commentaire. Cela fait toujours plaisir 🙂

      Répondre
  14. Christophe
    28 septembre, 2017

    Bonjour. Merci pour ce tuto et toutes ces informations. Savez-vous comment faire pour conserver le menu qui permet de selectionner les calques d’une carte Google Mymaps dans une intégration de page internet svp ?
    Lorsqu’on accède au lien de partage, le « menu » (la liste des calques avec les cases à cocher pour les selectionner) est présent mais il n’apparaît pas quand on intègle le code de la carte sur une page html.

    Répondre
    • Sébastien
      29 septembre, 2017

      Bonjour Christophe, je vous remercie de votre retour.
      Il vous est possible de sélectionner les calques de votre carte Mymaps en cliquant sur l’icone en haut à gauche de votre intégration, à côté de « Carte MyMaps » (voir l’exemple d’intégration du tuto).
      Espérant avoir répondu à votre question. Cordialement.

      Répondre
  15. Christophe
    29 septembre, 2017

    Merci ! je n’avais pas vu ce petit bouton. Et je pense que je ne serai pas le seul… Y a t il un moyen de l’activer par défaut au chargement de la page svp ?

    Répondre
  16. Christophe
    2 octobre, 2017

    Non, je n’ai rien trouvé. Je n’ai jamais utilisé l’API Google Maps. Il me semble avoir compris que ça n’est pas destiné aux mymaps enregistrées et dans tous les cas je n’ai pas vu de paramètres liés aux calques. Savez-vous s’il existe un support Google auquel je pourrais m’adresser (même s’il est payant) ?
    Amicalement,

    Répondre
    • Sébastien
      3 octobre, 2017

      Désolé, je n’en connais pas à mon niveau.
      Peut-être en trouverez vous sur les différents sites de Google mais en général, il est possible de les contacter pour des services payants…

      Répondre
  17. Henaff
    8 octobre, 2017

    Pour être bref, merci de par la simplicité de capture de lien et utilisation dans le site web en construction. Utilisant WP pour la première fois j’avoue que ce n’est pas simple et je ne suis pas programmateur alors bonjour les difficultés. Mais cette explication m’a grandement simplifié cette tâche localisation.
    Petit hic je crois que toutes mes adresses apparaissent sur cette carte, lieux fréquentés ou visités. Là c’est du domaine privé et je ne sais comment y remédier?
    Bravo et merci encore.
    Maintenant je vais m’attaquer au calendrier de réservations à intégrer et ensuite tarifs, du travail donc…

    Répondre
    • Sébastien
      10 octobre, 2017

      Bonjour et merci de votre retour.
      Rassurez vous, vos adresses apparaissent car vous êtes probablement connecté à votre compte Google.
      Ce ne sera pas le cas de vos visiteurs.
      Essayez de vous déconnecter de Gmail, Youtube ou autre service Google pour voir.
      Bonne suite.

      Répondre
  18. Blandine
    26 octobre, 2017

    Bonjour,

    Merci pour ce tutoriel mais malgré les explications très claires le résultat obtenu ne correspond pas.

    1. Quand j’intègre une carte de google maps avec un point de repère la carte apparaît en mappemonde et au zoom mon repère n’est pas signalé.

    2. Quand j’intègre une carte créée à partir de mymaps au lieu de la carte s’affiche :
    « 404. That’s an error L’url demandé est introuvable sur ce serveur.
    That’s all we know »

    Pour information le site internet est hébergé et géré par une société informatique, est-ce que le problème vient de là ?

    J’attends votre retour.

    Merci beaucoup !!

    Répondre
    • Sébastien
      27 octobre, 2017

      Bonjour Blandine,
      Le problème peut venir de plusieurs choses.
      Pouvez-vous me transmettre l’adresse de votre page sur laquelle vous rencontrez le dysfonctionnement svp ?

      Répondre
      • Blandine
        27 octobre, 2017

        Bonjour,

        Voici l’adresse du site : https://www.boisdanjou.fr/

        Répondre
        • Sébastien
          29 octobre, 2017

          Bonjour,
          Pouvez-vous préciser l’adresse de la page exacte où se trouve la carte svp ?

          Répondre
          • Blandine
            31 octobre, 2017

            Bonjour,

            Voici l’adresse de la page où se trouve les deux cartes (la première de google et la seconde personnalisée) : https://www.boisdanjou.fr/info-pratique/les-mairies-des-bois-d-anjou.html

            Merci

          • Sébastien
            31 octobre, 2017

            Bonjour Blandine,
            les codes d’intégration HTML de vos cartes ne sont pas complets, notamment l’attribut de la balise iframe est tronquée, il manque l’identifiant de la carte après embed?pb=
            Peut-être utilisez-vous un CMS qui corrige le code lors du copier-coller. Vérifiez bien le code HTML implémenté (code source).
            Cordialement.

  19. Blandine
    31 octobre, 2017

    Bonjour,

    Merci d’avoir pris le temps de regarder. Je pense en effet, qu’il y a un CMS qui corrige le code au copier-coller puisque je m’étais aussi rendu compte de cette partie était supprimée. Le problème est le même pour l’intégration de la carte personnalisée ?

    Merci

    Répondre
    • Sébastien
      31 octobre, 2017

      Oui le problème est commun aux deux cartes. Sinon avez-vous accès à l’éditeur en mode « code » dans votre CMS afin de corriger l’iframe ?

      Répondre
  20. Blandine
    2 novembre, 2017

    Bonjour,

    Non je n’ai pas accès en mode « code ».

    Je vous remercie néanmoins d’avoir pris le temps de répondre à mes questions et vous souhaite une bonne continuation !

    Cordialement

    Répondre
    • Sébastien
      2 novembre, 2017

      Je vous en prie Blandine, bonnes continuations également.

      Répondre
  21. Rémy
    8 novembre, 2017

    Bonjour,
    ce que je cherche à faire est un peu différent et je ne trouve aucune indication sur comment faire.
    Je voudrais pouvoir afficher une barre de recherche dans laquelle un utilisateur rentrerai un code postal et qui obtiendrait en retour une liste d’adresse des librairies les plus proches ainsi qu’une Google Map.
    Est-ce que vous auriez une idée de comment faire ?

    Cordialement

    Répondre

Laisser un commentaire