Comment intégrer une Google Map dans Webflow ?

Nous verrons dans cet article comment installer facilement et rapidement une google map sur votre site Webflow. Attention, certains pré-requis sont nécessaires, comme avoir un compte Google.

Blog
Astuces
Comment intégrer une Google Map dans Webflow ?

Voici les étapes pour ajouter une google Map dans Webflow

Pour ce faire, vous n'avez pas besoin d'engager un développeur ou de savoir développer. Voici comment installer rapidement et simplement une Google Map :

  1. Ajouter un élément Map sur votre site Webflow
  2. Pour créer une clé API, rendez vous sur Google Maps platform
  3. Authentifier vous avec votre compte Google
  4. Créer un nouveau projet et y associer un compte de facturation
  5. Sélectionner Maps dans les produits à utiliser
  6. Copier la clé API générée
  7. Ajouter la dans les paramètres d'intégration de webflow, puis sauvegarder
  8. Personnaliser votre carte selon vos envies

Guide détaillé des étapes clés

1 - Ajouter une carte dans Webflow

Ajout d'une google map dans le designer

Dans un premier temps, rendez-vous dans votre Designer puis ajouter un élément Map sur une page.

2 - Créer votre clé API google map

Une fois votre carte intégrée, rendez vous sur Google Map platform :

2.1 - Créer un nouveau projet et valider la facturation

Créer un projet

2.2 - Sélectionner un produit google

Sélectionner un produit

2.3 - Copier votre clé API google Map

Générer votre clé API

3 - Intégrer votre clé API dans les paramètres Webflow

Une fois votre clé API générée, il vous reste à l'intégrer votre clé, dans les paramètres de webflow, onglet intégration. Puis n'oublier pas de sauvegarder et publier vos modifications !

Ajouter votre clé dans l'onglet Intégration de Webflow

4 - Personnaliser votre google map

Une fois votre clé API insérée, il ne vous reste plus qu'à personnaliser votre carte selon vos désirs !

Un projet ?
Devis Gratuit
Louis Santoni
Content Manager