Afficher une carte interactive sur votre site (adresse de boutique, zone d’intervention, point de rendez-vous) rassure vos visiteurs et améliore l’expérience. Bonne nouvelle : intégrer Google Maps ne demande aucune compétence technique. Voici la méthode simple, et une option pour générer le code automatiquement.

La méthode simple : le code d’intégration de Google Maps

Ouvrez Google Maps et recherchez l’emplacement à afficher.
Cliquez sur Partager, puis sur l’onglet Intégrer une carte.
Choisissez la taille souhaitée et cliquez sur COPIER LE HTML.
Collez ce code dans votre page, à l’endroit voulu.

Le code obtenu ressemble à ceci (un simple iframe, sans clé API ni configuration) :

<iframe
  src="https://www.google.com/maps/embed?pb=..."
  width="600" height="450"
  style="border:0;" allowfullscreen=""
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade">
</iframe>

Sur WordPress

Dans l’éditeur de blocs, ajoutez un bloc HTML personnalisé et collez-y l’iframe. Avec un constructeur de page (Elementor, etc.), utilisez le widget « HTML ». L’attribut loading="lazy" est important : il évite que la carte ne ralentisse le chargement de votre page.

Générer le code automatiquement avec l’IA

Si vous préférez décrire ce que vous voulez en langage naturel, un assistant ChatGPT dédié génère directement le code d’intégration prêt à coller : Google Map Embedder. Pratique pour ajuster la taille, le zoom ou plusieurs marqueurs sans tâtonner.

Faut-il une clé API Google Maps ?

Pour une simple carte intégrée via l’iframe « Partager », non : c’est gratuit et sans clé. Une clé API (et la facturation associée) n’est nécessaire que pour des usages avancés : cartes dynamiques personnalisées, marqueurs gérés en JavaScript, calculs d’itinéraires via l’API Maps JavaScript.

FAQ

La carte ralentit-elle mon site ?

Un peu, car elle charge des ressources externes. L’attribut loading="lazy" limite l’impact en ne chargeant la carte que lorsqu’elle entre dans l’écran.

Puis-je afficher plusieurs lieux ?

L’iframe standard affiche un lieu. Pour plusieurs marqueurs, il faut soit créer une carte personnalisée « My Maps » et l’intégrer, soit passer par l’API Maps JavaScript.