Aide

Vous êtes ici : Sommaire / DESIGN / Les pages intérieures

Google Maps

Une page de niveau 2 vous permet de localiser grâce à une carte Google divers objets de votre site.
Pour cela il faut indiquer des adresses postales à vos "objets" afin que nous puissions interroger Google (API) pour retrouver le plus précisément possible ces coordonnées (longitude / latitude).

Pour afficher les cartes Google sur votre site, vous devez activer Google Map Platform.
Google a rendu obligatoire l'activation de la facturation par carte de crédit et de disposer d'une clé API valide pour votre projet.

Lorsque vous activerez la facturation, vous bénéficierez d'un quota mensuel gratuit de 200 $. Pour la plupart des millions d'utilisateurs actuels de l'API Google, il sera toujours possible de profiter gratuitement de Google Maps Platform avec ce quota. 

Vous avez besoin d'un compte de facturation pour commencer, Google vous offre 200 $ d'utilisation mensuelle.
Vous pouvez définir des plafonds d'utilisation pour faire en sorte de ne pas dépasser ce montant, sinon, vous ne payez que ce que vous utilisez chaque mois.

Une fois que vous avez créé un compte de facturation et un projet, vous pouvez bénéficier de l'essai gratuit de 300$ de Google Cloud Platform et d'un crédit mensuel récurrent de 200$ de Google Maps Platform. Pour en savoir plus, consultez Crédits de compte de facturation.

Suivez les instructions ci-dessous pour configurer une clé pour l'API Google Maps JavaScript pour votre site.
1. Créer un projet
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. 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.
-Localisation : Si vous avez une organisation à laquelle vous souhaitez lier votre projet, cliquez sur «Parcourir» et sélectionnez-la, sinon choisissez «Aucune organisation».
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"
2. Activer les APIs
Pour utiliser Google Maps Platform, vous devez activer les API  que vous prévoyez d'utiliser avec votre projet sur votre Cloud Console.

1. Accédez à la page Bibliothèque d'API Maps
2. Cliquez sur "API JavaScript Maps".
3. Cliquez sur "Activer"
4. Revenez à la page Bibliothèque d'API Maps
5. Cliquez sur "Maps Static API"
6. Cliquez sur "Activer"
7. Accédez au menu API  et vérifiez que ces deux API sont activées comme indiqué ci-dessous :
3. Obtenir une clé API
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. Remplacez le nom par "Map Key"
5. Sélectionnez HTTP referrers (websites)
6. Ajoutez un élément dans les Restrictions liées aux site Web
Suivez précisément la même structure que celle donnée dans l'exemple de Google: votre nom de domaine précédé de *. et suivi de /*
Sur l'image ci-dessous, *.wmaker.net/* est un EXEMPLE.

Attention :
- Si vous avez installé un sous-domaine à votre site utilisez seulement votre domaine. Par exemple, si vous avez installé app.mydomain.com sur votre PWA, vous devez entrer *.mydomain.com/*  sur la console Google. 

- Si vous n'avez pas installé de nom de domaine sur votre site, et utilisez toujours l'url par défaut de WMaker, ajoutez *.wmaker.net/* sur la console Google Cloud.
N'oubliez pas de mettre à jour le référent sur la console Google Cloud, si vous installez un nom de domaine par la suite sur votre PWA.


7. Cliquez sur "Terminé"
5. Cliquez sur "Enregistrer" en bas de la page. 
4. Ajouter la clé API à votre site
1. Copiez votre clé API
2 - Rendez vous sur votre back office dans le menu Menu > Design des pages > Google Map :: Google Map
3 - Collez votre clé API
4 - Cliquez sur Sauvegarder.
5. Créer un compte de facturation
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
6. Vous avez déjà paramétré une clé API sur votre back office, mais n'avez pas encore activé la facturation
Depuis le 16 juillet 2018, la nouvelle facturation de Google est en place.
Si vous aviez paramétré votre clé d'API au préalable, consultez le Guide destiné aux utilisateurs existants  de Google.

C'est un outil de transition qui vous aide à vérifier si votre compte a besoin de mise à jour, et vous aide dans le processus.
7. Le formulaire de saisie :
Une fois l'adresse saisie, la longitude et la latitude de votre "objet" sera affichée. À ce moment-là nous disposons de toutes les informations pour l'afficher sur une GMaps. Un lien "voir la carte" vous propose même d'aller vérifier immédiatement l'emplacement sur celle-ci.

Attention :
Dans le champ adresse, ne saisissez que l'essentiel de celle-ci. Ne mettez pas de Métro, ni de nom de bâtiments mais plutôt le nom de la rue avenue, boulevard etc... ainsi que son numéro. Vous pouvez aussi aller directement tester sur Google Maps vos adresses si vous avez encore des doutes.
8. L'affichage sur le site et le paramétrage de ma "Map" :
Sur le site votre "objet" affichera un petit logo "Voir la carte".
Le lien pointera sur votre map.

Vous pourrez paramétrer les différentes valeurs par défaut de votre Google Maps dans le Menu > Design des pages > Google Map

Le zoom : Quand on arrive sur la carte il peut être par défaut à l'échelle d'un pays, d'une régions, d'une ville, d'un quartier, etc...
 
Les contrôles : Il s'agit des petites flèches de navigation et de zoom.
 
Le mode d'affichage : Par défaut c'est le plan, mais vous pouvez proposer le satellite ou le mix des deux.
À Savoir :
 
La map s'affiche en pleine page c'est-à-dire sans les colonnes de votre site pour une meilleure mise en page. Il est nécessaire pour ce genre d'outils de disposer du maximum de surface d'affichage.

Pensez à ajouter le bloc géolocalisation dans le menu Design > Design des pages > Page > Mise en page avancée pour qu'il s'affiche sur vos pages articles.
 
Attention aux incompatibilités :
 
Par défaut votre back office ne propose que le Code Postal et la ville, c'est-à-dire la localisation la plus simple.
 
En cliquant sur le [+] devant le CP, le formulaire se déploie pour proposer l'adresse.
En cliquant sur le Pays (par défaut le votre), un menu déroulant vous propose une liste exhaustive.
 Dans la même rubrique