Particularités du travail avec Google Maps

Regardez ce tutoriel sur l'ajout de Google Maps ou lisez le guide ci-dessous.
Avec l'aide d'un plan de site, vous pouvez spécifier l'emplacement précis de l'entreprise et de ses bureaux, ainsi que construire l'itinéraire détaillé.
Comment ajouter la carte à la page
Comment ajouter une adresse au marqueur de la carte
Comment ajouter un itinéraire à la carte
Comment ajouter la clé Google Map
Comment ajouter la carte à la page
Ouvrez la bibliothèque de blocs, sélectionnez la catégorie Contacts et choisissez l'un des blocs suivants : CN401, CN402, CN402A, CN403 ou T143.
Cliquez sur l'onglet Contenu. Dans la section Contenu du bloc, recherchez l'onglet Cartes et repères et cliquez dessus. Sélectionnez ensuite le service de carte en ligne. Par défaut, deux options sont disponibles : Google Maps et Yandex Maps.
Dans le champ "Map API key", indiquez la clé que vous devez créer au préalable dans les services Google et Yandex. Dans le champ "Zoom", vous devez spécifier l'échelle à utiliser pour l'affichage de la carte. Dans "Marqueurs", vous devez ajouter les coordonnées du point : latitude et longitude, séparées par des virgules.
Le champ Zoom attribue l'échelle de la carte de 0 à 19, où 0 affiche la planète entière et où 19 permet de voir les rues et les maisons. Par défaut, la valeur est de 14.

Dans Google Maps, l'échelle appropriée la plus proche est sélectionnée si tous les points ne sont pas visibles à l'échelle spécifiée.
Comment ajouter une adresse au marqueur de la carte
Dans le champ "Titre", indiquez le nom de l'entreprise / du bureau / ou du point de départ. Ajoutez la latitude et la longitude dans le champ "Coordonnées". Vous avez deux possibilités : copier les données d'une source ouverte ou les indiquer directement sur la carte.
Le titre est utilisé comme info-bulle lorsque l'on survole le marqueur, et affiché dans l'info-bulle lorsque l'on clique.
Ce que vous pouvez spécifier dans les paramètres supplémentaires du marqueur
En outre, pour chaque marqueur, vous pouvez sélectionner le comportement : afficher l'infobulle au clic, afficher l'infobulle par défaut (au survol) et masquer le marqueur.

Si vous souhaitez modifier l'apparence du marqueur, utilisez le champ Style du marqueur pour sélectionner les options suivantes : icône ou marqueur de couleur. Si vous choisissez l'icône, téléchargez n'importe quelle image. Si vous sélectionnez le marqueur de couleur, indiquez la couleur requise pour le marqueur.
Comment ajouter un itinéraire à la carte
Pour construire un itinéraire sur la carte, cliquez sur "Paramètres". Dans la liste des paramètres des blocs, sélectionnez l'onglet "Paramètres de l'itinéraire". Cochez la case "Connecter les marqueurs".

Vous pouvez également personnaliser l'itinéraire en modifiant la taille (largeur) et la couleur de la ligne.
Comment ajouter la clé Google Map
Pour connecter une carte Google sur votre site web, vous devez obtenir une clé API JavaScript et la spécifier dans les paramètres du bloc contenant la carte, et du côté de Google, vous devez associer une carte de paiement.
Pour commencer à travailler dans la Google Cloud Console, vous devez créer un compte de facturation si vous ne l'avez pas encore fait et lier une carte bancaire. Pour ce faire, allez dans l'onglet Facturation : https://console.cloud.google.com/billing
Allez dans l'onglet Vue d'ensemble et créez un nouveau projet : cliquez ici.
Allez sur Tilda, ajoutez un bloc avec la carte (tel que T143, la catégorie Autres), ouvrez le menu dans l'onglet Contenu, spécifiez la clé reçue dans le champ Clé API Google Map, incluez les coordonnées de l'adresse, enregistrez et publiez la page.
Un moment important : Une fois que vous avez ajouté des restrictions et changé le nom de la clé API, elles seront en vigueur dans les cinq minutes qui suivent, et avant cela, vous pouvez voir une erreur à la fois dans le mode d'édition et dans la page publiée.
Si Google map ne fonctionne pas
Si vous avez suivi le guide à la lettre, la carte devrait fonctionner correctement.
Si la carte ne fonctionne pas, réessayez. Si elle ne fonctionne toujours pas, allez dans la Google Cloud Console for API et vérifiez si vous avez activé l'API JavaScript de Google Maps - vous trouverez une coche verte à côté du texte API Enabled (activée). Si vous ne trouvez pas la coche, cliquez sur le bouton Activer.
Si vous ne trouvez pas l'API JavaScript de Google Maps dans les API activées (Enabled APIs), sélectionnez l'API JavaScript de Google Maps dans la liste ci-dessous, cliquez dessus et cliquez sur Enable (Activer).
Vérifiez également si le compte de facturation est connecté à votre projet : cliquez ici.
Comment modifier le style de la carte
Sur Tilda, il existe trois styles de carte : par défaut, N&B clair et N&B foncé. Vous pouvez modifier ces styles dans les paramètres du bloc de carte → Style de carte.
Si ces styles ne suffisent pas, vous pouvez utiliser le service Snazzymaps et intégrer une carte vous-même.

Pour créer une carte, vous devez d'abord vous inscrire sur le site web.
Une fois que vous vous êtes inscrit, vous devez cliquer sur le lien Construire une carte dans le menu situé en haut du site web.
Sur la page qui s'ouvre, vous devez spécifier le nom de la carte et coller la clé API de Google Maps que vous pouvez obtenir sur ce lien.
Une fois que vous avez sauvegardé, vous devez sélectionner les paramètres de la carte en utilisant les quatre sections. Dans la première section, vous pouvez choisir le style de carte, en cliquant sur le bouton Choose a Snazzy Maps style.
Une fois que vous avez sélectionné le style de carte et les paramètres supplémentaires dans les sections (ajout de marqueurs, choix de la langue et de la taille), cliquez sur le bouton Afficher le code pour obtenir le code de la carte.
Copier le code de la carte
Retournez sur Tilda et collez le code dans le bloc HTML T123 de la catégorie Autres.
Une fois cette opération terminée, la carte avec le style sélectionné sera ajoutée à la page.
Fabriqué le
Tilda