Clé API Google Maps

Étape 1 — Ouvrez la Google Cloud Console

Ouvrez la console Google Cloud et connectez-vous avec un compte Google (un compte Gmail classique convient).

Ouvrir Google Cloud Console

💡 Astuce : utilisez un compte professionnel dédié, pas votre compte personnel, pour garder les choses bien rangées.

Étape 2 — Créez un projet

Un "projet" est le conteneur qui héberge votre clé et vos paramètres.

1. En haut, à côté du logo "Google Cloud", cliquez sur le menu déroulant du projet.
2. Cliquez sur Nouveau projet.
3. Donnez-lui un nom reconnaissable, ex. RoyLead Maps, et cliquez sur Créer.
4. Assurez-vous qu'en haut, le projet tout juste créé est sélectionné.

Étape 3 — Activez la facturation

Google exige une carte liée même pour utiliser le niveau gratuit. Sans facturation active, vous verrez une erreur ou le filigrane "For development purposes only".

1. Dans le menu de gauche (☰), allez sur Facturation.
2. Cliquez sur Associer un compte de facturation.
3. Saisissez vos coordonnées et une carte, puis confirmez.

🔒 Ajouter la carte ne signifie pas que vous serez facturé. Google ne facture que si vous dépassez le seuil gratuit mensuel, ce qui est très improbable pour une landing page. Plus bas, je vous montre comment configurer une alerte de budget.

Étape 4 — Activez les API nécessaires

Vous devez activer les services Google utilisés par l'autocomplétion d'adresse.

1. Dans le menu (☰), allez sur API et services → Bibliothèque.
2. Cherchez et activez une par une ces trois API (pour chacune : ouvrez-la et cliquez sur Activer) :

• Maps JavaScript API — la carte et le champ de suggestions.
• Places API — les suggestions d'adresse elles-mêmes.
• Geocoding API — récupère le code postal quand Google ne le fournit pas (voir l'encadré ci-dessous).

ℹ️ Activer une API ne coûte rien : vous ne payez qu'en fonction de l'usage réel. Activez les trois pour éviter les erreurs du type "This API is not enabled".

📮 Pourquoi la Geocoding API est nécessaire. Google associe le code postal au numéro de rue : celui qui choisit la suggestion de la rue seule se retrouve sans, et le formulaire ne se soumet pas si le code postal est obligatoire. Quand il manque, on le récupère à partir des coordonnées de l'adresse choisie — un appel en plus, et seulement dans ce cas-là. Sans cette API, rien ne casse : le client le tape à la main.

ℹ️ Places API (New) n'est pas nécessaire : notre formulaire utilise l'autocomplétion classique. Si vous l'avez déjà activée, la laisser activée ou non ne change rien.

Étape 5 — Créez la clé API

1. Dans le menu (☰), allez sur API et services → Identifiants.
2. Cliquez sur + Créer des identifiants → Clé API.
3. Google génère la clé : une longue chaîne du type AIzaSyB3xK...d9F2qZ.
4. Copiez-la (vous la collerez dans RoyLead à l'Étape 7). Ne fermez pas encore : commençons par la restreindre.

⚠️ Ne partagez jamais cette clé dans des chats publics, captures d'écran ou dépôts. Même après l'avoir restreinte, traitez-la comme un mot de passe.

Étape 6 — Restreignez la clé (important pour la sécurité)

La clé finit dans le code de la landing page, elle est donc visible par quiconque regarde le code source. Pour empêcher que quelqu'un la copie et l'utilise à vos frais, il faut la restreindre. Ouvrez la clé depuis la page Identifiants (icône crayon) et configurez deux restrictions.

6a — Référents HTTP (quels sites peuvent l'utiliser)

1. Sous Restrictions relatives aux applications, sélectionnez Référents HTTP (sites web).
2. Ajoutez les URL du domaine où vous utiliserez la clé (les deux lignes) :

https://votredomaine.com/*
https://*.votredomaine.com/*

Remplacez votredomaine.com par votre domaine. Plusieurs domaines ? Mieux vaut créer une clé séparée par domaine (dans RoyLead, la clé est par domaine).

6b — Restrictions d'API

1. Sous Restrictions relatives aux API, sélectionnez Restreindre la clé.
2. Cochez uniquement : Maps JavaScript API, Places API, Geocoding API.
3. Enregistrer.

⚠️ Les restrictions peuvent prendre jusqu'à 5 minutes pour s'appliquer. Si vous voyez une erreur juste après, attendez quelques minutes et réessayez.

Étape 7 — Collez la clé dans RoyLead

1. Ouvrez les paramètres du domaine dans RoyLead.
2. Sélectionnez le domaine où vous voulez activer l'autocomplétion.
3. Collez la clé dans le champ Google Maps API Key et enregistrez.

Aller sur Domaines ↗

Étape 8 — Vérifiez que ça fonctionne

1. Ouvrez une landing page publiée sur ce domaine.
2. Dans le formulaire, commencez à taper une adresse (ex. "Rue de Rome…").
3. Les suggestions Google devraient apparaître : choisissez-en une et le champ se remplit. ✅

Si aucune suggestion n'apparaît, consultez la section "Résolution de problèmes".

Combien ça coûte

Google offre un usage gratuit mensuel pour les API Maps/Places. Pour les volumes typiques d'une landing page, vous restez presque toujours dans le gratuit et payez 0 €. La carte ne sert que de garantie et couvre les éventuels dépassements.

Pour plus de tranquillité, configurez une alerte de budget :

1. Menu (☰) → Facturation → Budgets et alertes.
2. Créer un budget, seuil bas (ex. 5 €), alerte par email.

💳 Places Autocomplete fait une requête à chaque touche pressée : 1 lead = une poignée de requêtes, pas une seule. Même ainsi, il faudrait plusieurs milliers de formulaires remplis par mois pour vraiment payer.

Résolution de problèmes

💡 Pour déboguer : ouvrez la landing, appuyez sur F12 → onglet Console. Les erreurs Google Maps y apparaissent avec le nom exact : cherchez-le dans le tableau ci-dessus.

Bonnes pratiques

• 🔑 Une clé par domaine (dans RoyLead, la clé est par domaine) : si l'une fuite, vous ne bloquez que celle-là.
• 🔒 Restreignez toujours la clé (Étape 6) : une clé non restreinte est une clé que quelqu'un utilisera à vos frais.
• 🚨 Gardez l'alerte de budget active.