Pourquoi intégrer une Google Maps sur Framer

Une map permet de :

• rassurer l’utilisateur

• montrer un emplacement réel

• renforcer la crédibilité d’un site

• améliorer l’expérience sur une page contact

• Permettre sur mobile de déclencher la navigation GPS

Framer intègre Google Maps nativement.
Aucun code. Aucun iframe externe.

Étape 1

Choisir l’emplacement de la map

Avant d’ajouter la map, décide où elle doit apparaître.

Idée d'un emplacement souvent utilisé :

• informations de contact

• puis la map juste en dessous

Astuce :
Place toujours la map dans un layout claire pour éviter les problèmes de responsive.

Étape 2

Ajouter Google Maps depuis le menu Insert

Dans Framer :

• ouvre le panneau Insert

• va dans Social

• sélectionne Google Maps

Framer ajoute automatiquement une carte interactive prête à l’emploi.

Étape 3

Positionner et dimensionner la map

Une fois la map ajoutée :

• déplace la à l’endroit souhaité

• définis sa largeur

• définis sa hauteur

Selon ton layout, tu peux par exemple :

• utiliser une largeur en Fill

• définir une hauteur fixe

Si tu as besoin d'aide pour gérer les dimensions, ce guide est fait pour ça.

Bon réflexe
Si la map se comporte mal, le problème vient presque toujours de la taille ou du parent.

Étape 4

Renseigner l’adresse dans le panneau de droite

Sélectionne la map.

Dans le panneau de droite :

• repère le champ Address

• entre une adresse complète

• ou le nom précis d’un lieu

La carte se met à jour automatiquement.

Étape 5

Choisir le niveau de zoom

Toujours dans le panneau de droite :

• ajuste le paramètre Zoom

  
  

Repères simples :

• zoom faible pour une vue large

• zoom élevé pour un point précis

Teste toujours :

• sur desktop

• sur mobile

Bonnes pratiques à retenir

• place la map dans une section dédiée

• évite une map trop petite sur mobile

• vérifie le responsive après l’ajout

Une map mal intégrée gêne la lecture
Une map bien intégrée inspire confiance

Conclusion

Ajouter une Google Maps sur Framer est :

• rapide

• simple

• 100 % no code

La logique est toujours la même :

• Insert

• Social

• Google Maps

• adresse

• zoom

Et c’est en ligne.

Petite fonctionnalité
gros impact sur l’expérience utilisateur.

Créer mon compte Framer gratuitement