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

Posté le 18/02/2015 dans la catégorie Tutoriels | 18 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.

18 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

Laisser un commentaire