Configurer Google Maps pour la PWA

Pour afficher Google Maps dans votre Progressive Web App (PWA), vous avez besoin d'un projet Google Cloud avec la facturation activée et d'une clé API valide. Sans facturation, Google ne sert qu'une seule requête de carte par jour.

Chaque service Google Maps a sa propre limite gratuite mensuelle : 10 000 chargements de carte, 10 000 images de carte statiques et 10 000 recherches d'adresse sur la grille tarifaire mondiale (70 000 pour les comptes éligibles à la grille tarifaire indienne). Au-delà, votre compte de facturation est débité. L'ancien crédit mensuel de 200 $ a pris fin le 1er mars 2025, et l'essai gratuit de 300 $ de Google Cloud n'est pas une offre gratuite Maps. Voir les tarifs de Google Maps Platform .

Suivez les étapes ci-dessous dans cet ordre.

Pour utiliser Google Maps Platform, vous devez disposer d'un compte de facturation. Le compte de facturation est utilisé pour suivre les coûts associés à vos projets.

1. Accédez à la console Google Cloud Platform .
2. Cliquez sur le bouton du menu de navigation en haut à gauche et sélectionnez "Facturation".
3. Configurez votre compte de facturation.
S'il s'agit de votre premier compte de facturation, sur la page Facturation:
-Cliquez sur le bouton Ajouter un compte de facturation.
-Suivez les étapes pour configurer votre premier compte de facturation.

Si vous disposez déjà d'un compte de facturation, sur la page Facturation:
-Cliquez sur le menu déroulant de facturation et sélectionnez Gérer les comptes de facturation. Vous verrez une liste de vos comptes de facturation actuels.
-Sélectionnez Créer un compte
-Suivez les instructions pour configurer votre prochain compte de facturation.

Pour plus d'informations sur la documentation de Google : https://developers.google.com/maps/gmp-get-started#create-billing-account

Pour utiliser Google Maps Platform, vous devez avoir un projet . Le projet est la base de la gestion des services, des informations d'identification, de la facturation, des API et des SDK. Les frais d'utilisation associés au projet seront imputés au compte de facturation lié au projet.

Si vous n'avez pas de compte Google, créez-en un  pour continuer ce processus.

Pour créer un projet :
1. Accédez à la console Google Cloud Platform .
2. Cliquez sur le bouton du menu de navigation en haut à gauche et sélectionnez "Accueil".
3. Cliquez sur la liste déroulante du projet et sélectionnez "NOUVEAU PROJET".
4. Sur la page Nouveau projet, renseignez les informations requises:
- Nom du projet : acceptez la valeur par défaut ou entrez un nom personnalisé.
Le nom du projet peut être modifié à tout moment.
- ID de projet : acceptez la valeur par défaut ou cliquez sur MODIFIER pour saisir un ID personnalisé.
L'ID de projet ne peut pas être modifié une fois le projet créé, choisissez donc un ID que vous serez à l'aise d'utiliser pendant toute la durée de vie du projet.
Emplacement : Si vous avez une organisation à laquelle vous souhaitez lier votre projet, cliquez sur Parcourir et sélectionnez-la, sinon choisissez «Aucune organisation».
5. Cliquez sur "CRÉER"

Votre PWA utilise trois API Google. Activez-les dans le projet que vous venez de créer :

1. Allez sur la page Bibliothèque des API Maps
2. Cliquez sur "Maps JavaScript API", puis sur "Activer" (cartes interactives)
3. Revenez en arrière, cliquez sur "Maps Static API", puis sur "Activer" (images de carte)
4. Revenez en arrière, cliquez sur "Geocoding API", puis sur "Activer" (l'action "utiliser ma position" des champs adresse)
5. Vérifiez que les trois API sont activées.

Votre PWA n'utilise pas Places, Directions ni Distance Matrix : vous n'avez pas besoin de les activer.

Pour utiliser Google Maps Platform, vous devez disposer d'une clé API . La clé API est ajoutée à toutes vos demandes et applications.

1. Accédez à la page API et services > Informations d'identification .
2. Cliquez sur Créer des informations d'identification> Clé API.
La boîte de dialogue de création de la clé API affiche votre clé API nouvellement créée.
3. Cliquez sur "Restreindre la clé"
 

4. Renommez la clé en "PWA Map Key"
5. Dans Restrictions d'application, sélectionnez Sites Web
6. Ajoutez votre domaine deux fois, pour autoriser toutes les adresses de votre PWA :
https://mondomaine.com/* et https://*.mondomaine.com/*
EXEMPLE si vous utilisez encore l'adresse GoodBarber : https://*.goodbarber.app/*

Attention : si vous installez plus tard un nom de domaine sur votre PWA, ajoutez-le à la liste. Gardez aussi l'adresse GoodBarber dans la liste.

7. Dans Restrictions d'API, sélectionnez Restreindre la clé et cochez Maps JavaScript API, Maps Static API et Geocoding API. S'il en manque une, la fonctionnalité correspondante de votre PWA cesse de fonctionner.
8. Cliquez sur "Enregistrer"

1. Copiez la clé API

2. Dans votre back office, allez dans le menu Paramètres > Autres paramètres > Connexions externes
3. Dans la liste des fournisseurs de cartes, sélectionnez Google Maps
4. Collez votre clé API
5. Facultatif : collez un Google Cloud Map ID pour styliser vos cartes (voir ci-dessous)
6. Cliquez sur "Enregistrer"

1. Ouvrez le menu Canaux de vente > PWA > Mise à jour
2. Cliquez sur "Mettre à jour"

Votre clé Google Maps API est maintenant intégrée à votre PWA.
Fermez votre PWA et relancez-la pour que les changements soient pris en compte.

Un Map ID applique aux cartes de votre PWA un style enregistré dans votre projet Google Cloud. Sans Map ID, votre PWA garde la carte Google standard.

1. Dans le même projet Google Cloud que votre clé API, allez sur la page Gestion des cartes
2. Cliquez sur "Créer un ID de carte"
3. Donnez-lui un nom, choisissez le type de carte JavaScript, puis Trame (carte plate) ou Vecteur
4. Cliquez sur "Enregistrer" et copiez le Map ID

5. Sur la page Styles de carte , créez un style, personnalisez-le et publiez-le. Revenez ensuite sur la page Gestion des cartes, ouvrez votre Map ID et, dans Styles de carte, choisissez votre style pour le mode clair. Votre PWA affiche toujours le style du mode clair, même sur un appareil réglé en mode sombre : le style du mode sombre n'est pas utilisé. Voir la documentation de Google pour le détail.

6. Collez le Map ID dans Paramètres > Autres paramètres > Connexions externes pour styliser toutes les cartes de votre app.
7. Pour donner un style différent à une section Carte, une section Agenda ou un widget Carte, collez un Map ID dans les réglages de carte de son design. Laissez ce champ vide pour garder le Map ID de l'app.
Attention : collez le Map ID affiché sur la page Gestion des cartes, et non l'ID du style affiché sur la page Styles de carte. Avec un ID de style, la carte garde le style Google par défaut.
8. Mettez à jour les paramètres de votre PWA.

Sur les cartes qui utilisent un Map ID, les marqueurs sont affichés avec les marqueurs avancés de Google. Le Map ID doit venir du même projet Google Cloud que votre clé API. Utiliser un Map ID sur une carte web ne coûte pas plus cher : chaque carte reste un chargement.

Définissez des quotas sur vos API : une fois un quota atteint, Google arrête de répondre jusqu'au lendemain, votre facture ne peut donc pas le dépasser. Une alerte de budget envoie seulement un e-mail, elle n'arrête pas l'utilisation.
https://developers.google.com/maps/faq#usage_cap

Si vos cartes ne s'affichent toujours pas sur votre PWA une fois que vous avez suivi le processus entier :
1. Rendez vous dans la Console Google Cloud
2. Sélectionnez le projet que vous avez créé à l'étape 1 de cette aide en ligne à partir de la barre de navigation de Google

3. Cliquez sur le Menu de navigation > API et Services > Identifiants

4. Cliquez sur la clé PWA Map Key que vous avez créée à l'étape 3 de cette aide en ligne
5. Faites une capture d'écran des paramétrages de votre clé, afin que l'on voit bien les Restrictions relatives aux applications et les Restrictions liées aux sites Web de votre clé d'API (voir exemple ci-dessous) :

6. Faites une capture d'écran de la clé d'API entière (voir exemple ci-dessous) :

7. Ouvrez un ticket auprès du support en expliquant le problème, avec les captures d'écran en pièce jointe.

Bon à savoir : si les cartes s'affichent mais que l'action "utiliser ma position" des champs adresse ne fonctionne pas, vérifiez que la Geocoding API est activée et autorisée sur votre clé.