Comment intégrer Google Maps à Webflow

Comment intégrer Google Maps à Webflow

Résumez cet article avec une IA
min
de lecture
Publié le
July 6, 2021
Mis à jour le
This is some text inside of a div block.
Et si on bossait ensemble ?
+ 350 projets réalisés
100% de satisfaction
Éligibles CII
Devis gratuit

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

Besoin d'aide ?
Contactez un expert
Ça s'agite là-bas dedans ?

Vos questions,
nos réponses !

Faut-il une clé API Google pour intégrer Maps dans Webflow ?

Iframe simple = pas de clé ! Map custom avec markers stylés = clé API obligatoire. Gratuit jusqu'à 28k vues/mois. Largement suffisant pour 99% des sites !

Peut-on personnaliser le style de Google Maps dans Webflow ?

Snazzy Maps + API = maps de ouf ! Changez couleurs, masquez les POI, custom markers... Tout est possible. Copiez un style Snazzy, collez dans Webflow. 5 min chrono !

L'intégration de Google Maps ralentit-elle le site ?

Un peu, mais gérable ! Lazy load obligatoire, dimensions fixes, pas de zoom infini. Astuce : image statique + lien = 0 impact. La map se charge au clic. Smart !

Ma question est plus complexe ?

Réserver un call avec un expert
Contactez NocodeFactory
Assez parlé,
à vous de jouer !
🥳 Estimation gratuite !
Merci ! Votre message a bien été envoyé 🥳
😿 Une erreur est survenue. Merci de recommencer
+ 350 projets
déjà réalisés