Centre d'aide

Comment ajouter Google Maps

Regardez ce tutoriel sur l'ajout de Google Maps ou lisez le guide ci-dessous.

Google a modifié les règles d'utilisation de Google Maps. Pour ajouter une carte Google à votre site web, vous devez désormais obtenir une clé pour l'API JavaScript, la spécifier dans les paramètres du bloc carte et associer une carte de bande à votre compte Google.

Allez à la page :
https://console.cloud.google.com/google/maps-apis/overview.
Créez un nouveau projet ou sélectionnez un projet existant. Cliquez sur Créer.

Google Cloud Platform, the "New Project" page: the "Project name *" field and the "CREATE" button.

Sélectionnez Maps JavaScript API.

Google Cloud Platform: the "Maps JavaScript API" card in the "Maps APIs and Services" section.

Activez le service en cliquant sur Enable.

In Google Cloud Platform, the "ENABLE" button on the "Maps JavaScript API" page in the API Library.

Allez dans l'onglet "Credentials" et cliquez sur Credentials in APIs & Services.

In Google Cloud Platform, the "Credentials in APIs & Services" link at the top of the "Credentials" section.

Cliquez ensuite sur Create Credentials et sélectionnez API key dans la liste déroulante.

In Google Cloud Platform under "Credentials": the "API key" option in the "+ CREATE CREDENTIALS" drop-down menu.

Cliquez sur Restrict Key dans une fenêtre pop-up.

In the Google Cloud Platform console, the "RESTRICT KEY" button in the "API key created" pop-up window.

Cochez lacase "Référents HTTP (sites web)" , tapez votre nom de domaine dans la case référent pour autoriser la carte, puis cochez la case "Restreindre la clé" et cochez la case "Restreindre la clé".

In Google Cloud Platform under "Restrict and rename API key": select "HTTP referrers (web sites)", add domain URLs in "Website restrictions", and select "Restrict key" under "API restrictions".

Trucs et astuces : l'entrée https://tilda.cc/* est facultative. Elle permet d'avoir un aperçu de la carte dans l'éditeur Tilda . Sinon, une carte ne sera accessible que via un lien de domaine.

Une fois que vous avez fini d'éditer votre site web, supprimez la deuxième entrée pour des raisons de sécurité. En savoir plus sur la sécurisation d'une clé API.

Dans la liste déroulante, sélectionnez Maps JavaScript API et enregistrez les modifications.

Google Cloud Platform: The "Maps JavaScript API" checkbox in the dropdown list and the "SAVE" button at the bottom.

Remarque: Google Maps a récemment modifié ses règles. Vous devez désormais activer la facturation sur votre compte avant d'obtenir une clé. En savoir plus sur les tarifs de Google Maps.

Allez dans l'onglet "Facturation" pour lier une carte bancaire à votre compte.

In the Google Cloud Platform console, the "Billing" item in the navigation menu on the left.

Une fois que vous avez terminé, allez dans Credentials et copiez la clé.

Google Cloud Platform "Credentials" page: copy icon next to the key value under "API Keys".

Allez sur votre projet sur Tilda, ajoutez un bloc avec une carte de la catégorie "Autre" à la page (par exemple, Т143), ouvrez le panneau Contenu du bloc et collez la clé dans le champ "Map API Key". Enregistrez les modifications et publiez la page.

Block Content panel: Google Maps configuration fields including "ONLINE MAP SERVICE", "MAP API KEY", and geo point settings.

Dépannage

Q : J'ai saisi la clé API dans le bloc carte, mais la carte n'apparaît que sur la version publiée de la page. Dans l'éditeur, l'erreur "Oops ! Quelque chose n'a pas fonctionné". Comment puis-je résoudre ce problème ?

Page editor: the "Content" button on the panel of the T143 block with a Google Maps loading error.

R : Cette erreur se produit généralement après que la clé API a été restreinte. Pour éviter qu'un tiers n'utilise votre clé API sur son site web, nous vous recommandons de ne donner accès qu'à votre nom de domaine. En savoir plus sur la sécurisation d'une clé API.

Pour activer temporairement l'aperçu d'une carte dans Tilda Editor, autorisez https://tilda.cc/* sur Google Maps Platform et révoquez l'accès ultérieurement.