Comment intégrer Google Maps à Webflow

Ajouter une carte à votre site peut être très utile : cela permet à visiteur de voir en un clin d'œil votre/vos magasin(s) et de créer un itinéraire pour s'y rendre. Le meilleur moyen d'intégrer une carte à votre site est d'utiliser Google Maps, l'outil le plus performant et le plus utilisé.

Ajouter votre Map

Glissez un élément map sur votre page à partir du panneau d'ajout.

Si vous ajoutez une carte au canevas et que vous n'avez pas ajouté la clé API JavaScript de Google Maps aux paramètres de votre projet, vous verrez apparaître un placeholder gris.

Afin d'utiliser une carte en direct sur votre site web, vous devez créer et connecter une clé API à votre projet.

Générer votre clé API Google Maps

Rendez-vous sur la plateforme Google Maps (https://www.google.com/maps/about/mymaps/), cliquez sur "Get Started" et suivez les instructions pour générer votre clé API :

Créez votre map ou choisissez-en une que vous avez déjà créée

Paramétrez votre Google Cloud Platform billing account (https://cloud.google.com/billing/docs/how-to/manage-billing-account?hl=en&visit_id=1-636686343345944048-2002572511&rd=2)

Cliquez sur Credentials à gauche

Choisissez Create Credentials. Cliquez sur API Key

Activez l'API pour le projet

Copiez la clé API qui est générée

Saisir votre clé API Google Maps

Ouvrez les paramètres de la carte (double-cliquez sur la carte dans le canevas ou sélectionnez-la et appuyez sur la touche Entrée).

Cliquez sur "Add API key". Vous serez amené à vos paramètres de projet, vous pourrez ainsi y saisir votre clé API

Sauvegardez et publiez

‍