Comment ajouter Google Maps sur un site Turbosite

Google Maps est le standard mondial de la cartographie. Il est idéal pour les sites ayant une audience internationale ou pour le secteur du tourisme. Le moyen le plus simple est d’intégrer une carte via iframe directement depuis l’interface Google Maps, sans clé API. C’est gratuit. L’installation prend 5 minutes.

Ce dont vous aurez besoin

Un compte Google (non obligatoire pour l’iframe de base) — inscription
Un site publié sur Turbosite
5 minutes

Étape 1. Obtenir le code de la carte

Ouvrez google.com/maps.
Recherchez l’adresse ou l’organisation souhaitée dans la barre de recherche.
Sur la fiche du lieu, cliquez sur le bouton « Partager » (l’icône avec une flèche).
Dans la fenêtre qui s’ouvre, sélectionnez l’onglet « Intégrer une carte » (Embed a map).
Choisissez la taille de la carte : petite, moyenne, grande ou personnalisée.
Copiez le code iframe généré.

📷 Capture d’écran : fenêtre « Intégrer une carte » dans Google Maps avec le code iframe et les options de taille.

Étape 2. Insérer le code dans Turbosite

La carte apparaît à un endroit précis de la page (généralement dans la section « Contacts »), le code doit donc être inséré dans le corps de la page.

Ouvrez votre site dans Turbosite.
Ajoutez un bloc « Code HTML » à l’endroit souhaité sur la page.
Collez l’iframe Google Maps copié.
Enregistrez les modifications.
Publiez le site.

📷 [capture d’écran Turbosite — à ajouter : bloc Code HTML dans le corps de la page avec la carte Google].

Étape 3. Vérifier que la carte fonctionne

Ouvrez votre site publié.
Faites défiler jusqu’au bloc contenant la carte — elle devrait se charger en 1 ou 2 secondes.
Vérifiez l’interactivité : cliquez sur le marqueur, essayez de zoomer, lisez la fiche du lieu.
Ouvrez le site sur mobile — la carte doit s’adapter.

Questions fréquentes

La carte est coupée sur mobile ou ne prend pas toute la largeur. Dans l’iframe, supprimez les valeurs fixes width="600" et height="450" et enveloppez l’iframe dans une <div> avec une classe CSS pour la réactivité :

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <iframe src="votre_src" 
          style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" 
          frameborder="0" allowfullscreen>
  </iframe>
</div>

Une clé API est-elle nécessaire ? Pour l’iframe de base via le menu « Partager », non. Une clé API n’est nécessaire que si vous utilisez directement Google Maps Embed API ou l’API JavaScript pour des personnalisations (marqueurs personnalisés, itinéraires, styles).

Est-il possible d’ajouter mon propre marqueur ou itinéraire ? Via l’iframe, vous ne pouvez afficher que ce qui est présent dans Google Maps. Pour vos propres marqueurs, créez une carte dans Google My Maps, puis récupérez l’iframe à partir de là.

Tarifs de Google Maps Platform. Depuis 2025, la tarification de Google Maps Platform a changé : au lieu d’un crédit gratuit global, il existe des limites mensuelles distinctes pour chaque produit. L’iframe de base (Embed) fonctionne gratuitement sans restriction. Si vous utilisez l’API JavaScript, vérifiez vos limites dans la Cloud Console.

La carte est en russe, je la veux en anglais. Google détermine automatiquement la langue en fonction de la locale du navigateur. Pour fixer la langue, ajoutez le paramètre &hl=en (ou le code de la langue souhaitée) à l’URL de l’iframe.

Pour aller plus loin

Google Maps Platform Documentation — documentation officielle
Google My Maps — créer vos propres cartes avec des marqueurs
Tarifs de Google Maps Platform — tarifs actuels