La carte Google de votre page contact est vide — comment la réparer

Vous ouvrez votre page contact et à l'endroit de la carte, il y a un rectangle gris, une carte recouverte du message « For development purposes only », ou simplement rien. Pour un client qui cherche comment venir chez vous, c'est comme si vous aviez déménagé sans prévenir. La bonne nouvelle : c'est presque toujours un petit problème de configuration, pas quelque chose de cassé définitivement.

Dans cet article, je vous explique en langage clair les vraies causes (elles ne tiennent pas toutes à une « clé API coûteuse ») et comment réparer chacune, étape par étape. La chose la plus importante à retenir : pour une simple carte affichant l'adresse de votre entreprise, dans la plupart des cas vous n'avez même pas besoin de clé API. Il existe une option gratuite qui ne casse pas.

D'abord, identifiez QUEL type de carte vous avez

Avant tout, vous devez savoir quel type de carte utilise votre site, car la solution en dépend. Il existe deux versions :

• Carte simple par iframe (Embed) — le code ressemble à `<iframe src="https://www.google.com/maps/embed?...">`. C'est la version gratuite, sans clé API, celle que je recommande à la plupart des entreprises.
• Carte par JavaScript (Maps JavaScript API) — le code contient `maps.googleapis.com/maps/api/js?key=...`. Elle nécessite une clé API, un compte de facturation actif chez Google, et c'est souvent la source des messages d'erreur.

Pour voir ce que vous avez, ouvrez la page contact, faites un clic droit sur la zone de la carte et choisissez « Inspecter ». Cherchez les mots `embed` ou `api/js`. S'il y a des erreurs en rouge dans la console (onglet « Console »), notez-les — elles disent exactement ce qui ne va pas.

Les messages d'erreur typiques et leur signification

Si vous utilisez la version avec clé API, la carte vous dit elle-même ce qui la dérange. Les plus fréquents :

• « For development purposes only » (carte recouverte d'un filigrane) — la facturation n'est pas activée sur le projet Google Cloud, ou la clé n'a pas de compte de paiement lié.
• BillingNotEnabledMapError — même chose : il faut activer la facturation, même en restant dans la limite gratuite mensuelle.
• RefererNotAllowedMapError — la clé est restreinte à un autre domaine. Vous avez changé de domaine, êtes passé de HTTP à HTTPS, ou lancé un nouveau site, et l'adresse actuelle n'est pas sur la liste autorisée.
• ApiNotActivatedMapError — vous n'avez pas activé le service « Maps JavaScript API » dans la console Google Cloud.
• InvalidKeyMapError — la clé est erronée, supprimée ou mal copiée.

Le message s'affiche soit sur la carte, soit dans la console du navigateur. C'est votre carte vers la solution — littéralement.

La solution simple : passez à l'embed gratuit, sans clé

Si tout ce que vous voulez est une carte avec l'adresse de l'entreprise, où le client appuie pour lancer la navigation, vous n'avez besoin d'aucune clé API. Voici comment :

1. Allez sur Google Maps, cherchez l'adresse exacte de l'entreprise (idéalement votre fiche Google Business).

2. Cliquez sur Partager → l'onglet Intégrer une carte (Embed a map).

3. Choisissez la taille et copiez tout le code `<iframe ...>`.

4. Collez-le dans votre page contact, à la place de l'ancienne carte.

Voilà. Ce code ne dépend pas de la facturation, n'expire pas et ne vous renvoie plus de messages d'erreur. C'est ce que je recommande à la plupart des entreprises locales, car c'est « on pose et on oublie » : on le met une fois et on n'y pense plus. La clé API reste utile seulement si vous avez besoin de cartes interactives complexes (plusieurs repères, styles personnalisés, calcul d'itinéraire dans le site).

Si vous voulez garder la clé API — la réparation correcte

Parfois le site est déjà construit sur Maps JavaScript API et vous ne voulez pas le réécrire. Vérifiez alors, dans l'ordre :

• Facturation active : dans la Google Cloud Console, le projet doit avoir un compte de paiement lié. Google offre un plafond gratuit mensuel généreux pour une petite entreprise, mais une carte bancaire doit exister sur le compte.
• Service activé : activez « Maps JavaScript API » (et « Maps Embed API » si vous utilisez un embed avec clé).
• Restrictions de la clé : sous « Application restrictions » → « HTTP referrers », ajoutez votre domaine correctement — avec `www` et sans, et en HTTPS. Une erreur classique est de n'ajouter que `exemple.fr` en oubliant `www.exemple.fr`.
• Contenu mixte : si le site est en HTTPS mais la carte est appelée en HTTP, le navigateur la bloque. Tout doit être en `https://`.

Après toute modification de clé, attendez quelques minutes — Google n'applique pas les changements instantanément.

Causes moins évidentes : le bandeau cookies et les bloqueurs

Parfois la carte est bien configurée mais n'apparaît toujours pas. Vérifiez aussi :

• Bandeau de consentement (cookies) — beaucoup de solutions RGPD bloquent Google Maps tant que le visiteur n'accepte pas les cookies marketing. C'est juste sur le plan légal, mais beaucoup de visiteurs refusent et se retrouvent sans carte. La solution est soit un espace réservé avec un bouton « Afficher la carte », soit le retour à l'embed simple traité comme élément de base.
• Extensions de blocage (ad blockers) — certaines bloquent les scripts Google. Testez la carte en navigation privée, sans extensions, pour écarter cette piste.
• Cache — après réparation, videz le cache du site et du navigateur, sinon vous voyez toujours l'ancienne version cassée.

Si vous avez tout essayé sans succès, ou que vous préférez ne pas vous battre avec la console Google Cloud, écrivez-nous sur WhatsApp chez MPO Web Studio. Nous regardons à distance, vous disons exactement le problème et le réglons souvent sur-le-champ — nous travaillons à distance dans tout le pays et vous montrons d'abord une démo, sans frais.