Google Maps ne s'affiche pas sur mon site. Que faire ?

Même si la situation n'est pas nouvelle, puisqu'elle date d'un changement de politique tarifaire de Google intervenu en juin 2018, on rencontre encore aujourd'hui un problème d'affichage de Google Maps sur de nombreux sites qui utilisent ce service.

Pour le résoudre, il suffit de créer une nouvelle clé pour l'API Google Maps ... et de fournir les données d'un moyen de paiement valide ! Car c'est au niveau des tarifs que le changement est spectaculaire. Sans entrer dans tous les détails, que vous trouverez ici (nous ne ferons pas de commentaires sur la clarté avec laquelle sont détaillés les prix), notez qu'en gros, on passe, pour l'affichage d'une carte interactive, de 25.000 affichages gratuits par jour à 28.500 affichages gratuits par mois !

Pour des sites ayant un faible trafic, cela ne changera rien, mais pour de plus gros acteurs, la pilule a été difficile à avaler. Il existe des alternatives, que ce changement tarifaire devrait encore faire évoluer, mais ce n'est pas le sujet de cet article. Nous ne traiterons que le cas des propriétaires qui souhaitent continuer à utiliser Google Maps parce qu'ils pensent rester dans les limites de l'utilisation gratuite.

Marche à suivre

1. Inscrivez-vous sur la plateforme Google Cloud

C'est cette plateforme qui sert désormais de "point d'entrée" pour toutes les API Google, un peu à la manière d'AWS d'Amazon. Pour vous y connecter, vous aurez besoin au préalable d'un compte Google. Si le seul que vous possédez est le compte GMail que vous utilisez pour (une partie de) votre messagerie, nous vous recommandons vivement d'en créer un autre, dédié uniquement aux API, même si la seule dont vous avez besoin (pour le moment) est Google Maps. Google vous permet à présent de créer un compte "pour gérer votre entreprise". Pour le choix de l'intitulé du compte, nous vous conseillons aussi d'utiliser une adresse email (existante !) avec votre nom de domaine - comme "Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser." plutôt qu'une adresse GMail.
Une fois le compte créé, rendez-vous sur la page https://cloud.google.com/maps-platform/?hl=fr et connectez-vous en cliquant sur Connexion (en haut à droite).

2. Choisissez le(s) service(s) souhaité(s)

 Une fois connecté, Google vous guidera dans les étapes nécessaires à la création de la clé API. Mais pour cela, il vous demandera d'abord quel(s) produit(s) vous souhaitez utiliser. Vos choix sont les suivants :

1. Maps - Créez des cartes personnalisées et évolutives, qui répondent concrètement aux besoins de vos utilisateurs avec des plans statiques et dynamiques, des images Street View et des vues à 360°. Dans la plupart des cas, surtout si vous voulez rester dans le cadre du gratuit, c'est le produit dont vous avez besoin.
2. Routes - Indiquez aux utilisateurs le meilleur chemin vers leur destination grâce à des itinéraires précis et des mises à jour en temps réel des conditions de trafic. Déterminez l'itinéraire emprunté par un véhicule afin de proposer des informations plus pertinentes. Ici, on rentre dans les applications plus professionnelles dans lesquelles vous devez calculer des distances entre des lieux, proposer des itinéraires précis, ...
3. Places - Aidez les utilisateurs à découvrir le monde avec des données détaillées sur plus de 100 millions de lieux. Offrez-leur la possibilité de trouver des lieux spécifiques à partir d'un numéro de téléphone, d'une adresse et de signaux en temps réel. Ce produit vous sera utile si, par exemple, vous voulez utilisez une fonction "autocomplete" dans un formulaire : l'utilisateur introduit le début d'une adresse et Google propose l'adresse complète, à choisir dans une liste déroulante. Il permet aussi de convertir des adresses en coordonnées géographiques, ou vice-versa. Vous aurez besoin de ce produit si vous utilisez la fonction de géocodage de l'élément "Googlemap" de Fabrik, par exemple.

3. Activer Google Maps

L'étape suivante (toujours en anglais, au moment de la rédaction de cet article, malgré le choix du français au départ) concerne l'activation du service lui-même. Remplacez la mention "My project" par un nom ayant du sens pour vous (par exemple "cartes du site monsite.tld") et acceptez, après les avoir lues, les conditions générales d'utilisation du service (elles sont en anglais).

4. Activer la facturation

C'est la principale nouveauté du service : même pour une utilisation gratuite, vous devez introduire les données d'un moyen de paiement avant de pouvoir accéder à la clé convoitée. 
Cette création de compte s'effectue en 2 étapes : dans la première, on vous demandera de choisir votre pays de résidence. Il est aussi question d'un crédit de 300 $ offert à la création du compte. Ce montant, valable pendant un an, est un avoir à utiliser sur toutes les applications disponibles dans Google Cloud. Il permet ainsi de tester gratuitement l'un ou l'autre service. Acceptez les conditions d'utilisation de ce crédit gratuit (c'est obligatoire !) et cochez, si vous le souhaitez, la demande de notifications par emails, puis continuez.

A l'étape suivante, vous devrez choisir entre un compte "particulier" ou "entreprise". S'il s'agit d'une entreprise, vous aurez la possibilité d'indiquer votre numéro de TVA, ce qui peut être utile en cas de facturation à l'avenir. Puis, vous renseignerez votre adresse. Enfin, vous indiquerez le moyen de paiement souhaité. A ce niveau, les options proposées varient suivant votre pays : pour la France, les choix sont, soit une carte de crédit ou de débit, soit un compte bancaire (avec un IBAN et un BIC). Pour la Belgique, seule la carte de crédit est acceptée. Pour les autres pays ... à vous de le découvrir.

Note : Si vous choisissez la formule de paiement via un compte bancaire, n'oubliez pas de valider le compte avant de cliquer sur le bouton Démarrer l'essai gratuit. Cette validation va créer un mandat de prélèvement SEPA qu'il vous faudra accepter pour continuer.
Google va alors, dans les quelques jours qui suivent, faire un virement de quelques centimes dont vous devrez introduire le montant exact dans l'interface de paiement. Ceci terminera le processus d'association du compte bancaire au compte Google Cloud.

Une fois la formule de paiement choisie et le formulaire complété, cliquez sur Démarrer l'essai gratuit pour passer enfin aux choses sérieuses.

5. Activer Google Maps Platform

Après avoir cliqué sur Suivant, on est presque surpris de la soudaine rapidité du processus : la clé est prête !

Pour l'utiliser, il vous suffit de la copier (en cliquant sur l'icône à droite de la clé) et de la coller dans le composant, le module, le template ou le plugin qui le demande sur votre site.

Avant de cliquer sur Done, nous vous recommandons de sécuriser l'utilisation de cette clé. Après tout, comme à présent une utilisation intensive peut engendrer des frais importants, il convient d'éviter que des tiers puissent utiliser votre clé APi pour leur usage. Par conséquent, cliquez sur le lien API Console proposé. Cette étape est vraiment importante car il est très facile de récupérer la clé dans le code source de la page sur laquelle se trouve la Google Map.

Il y a plusieurs façons de sécuriser la clé en fonction de l'application à laquelle elle est destinée. Nous ne pouvons pas entrer dans tous les détails des cas possibles mais, en général, vous utiliserez Google Maps sur un site Internet, aussi le plus simple est d'indiquer celui-ci dans la console. De cette façon, un autre site ne pourra utiliser votre clé. 

Sélectionnez Référents HTTP (sites Web) et cliquez sur AJOUTER UN ELEMENT pour ajouter votre site. A moins d'être très restrictif, le plus simple est de suivre l'exemple de syntaxe proposée : https://*.monsite.tld/* . De cette façon, la clé pourra être utilisée sur toutes les pages du site "monsite.tld" et sur tous ses sous-domaines éventuels. Si vous utilisez la clé sur plusieurs sites, vous pouvez les ajouter en cliquant à nouveau sur AJOUTER UN ELEMENT.

A moins que vous n'ayez une raison de le faire, laissez le choix suivant sur Ne pas restreindre la clé et cliquez sur Enregistrer pour sauvegarder les modifications. En cas de piratage de la clé, vous pourrez toujours revenir sur cette console pour générer une nouvelle clé.

6. Suivi de la consommation

Nous vous recommandons aussi de venir régulièrement sur cette console, en cliquant sur API et Services > Tableau de bord pour surveiller votre "consommation" de l'API, surtout si vous avez constaté une augmentation du trafic sur votre site. N'oubliez pas qu'en cas du dépassement du quota gratuit, Google prélèvera les frais sur votre compte bancaire ou la carte de crédit associée.

Comme toujours, si cela vous semble trop compliqué à réaliser par vous même, n'hésitez pas à nous contacter pour une assistance.