Ajouter une carte aux pages
Déposez le bloc « Carte » sur une page, puis collez l'URL d'intégration de Google Maps ou saisissez une adresse postale dans le champ « Attr » pour afficher un emplacement interactif sur votre site publié. Les intégrations iframe standard ne nécessitent pas de clé API distincte.
Que ce soit pour guider vos clients vers un atelier photo au coucher du soleil près de chez vous, indiquer l’emplacement exact d’une séance photo de paysage dans un lieu isolé ou diriger les visiteurs vers votre galerie, le bloc Carte offre un élément de mise en page fluide et interactif pour votre site.
Le bloc « Carte » utilise une intégration iframe sécurisée pour s’afficher sur votre site public en ligne. Contrairement aux thèmes WordPress gourmands en ressources qui s’appuient sur des API JavaScript complexes, cette approche garantit un chargement rapide des pages et une expérience adaptée aux appareils mobiles.
Prérequis : choisissez votre méthode
Méthode A : aucune configuration (collez une URL d’intégration directe)
Idéal si vous n’avez besoin d’une carte qu’une seule fois sur une page spécifique et que vous ne souhaitez pas utiliser la Google Cloud Console.
- Rendez-vous sur Google Maps.
- Recherchez votre emplacement, puis cliquez sur Partager.
- Sélectionnez l’onglet Intégrer une carte.
- Copiez uniquement l’URL source située dans l’attribut
src="..."de l’extrait de code iframe généré. Elle se présentera comme suit :
https://www.google.com/maps/embed?pb=!1m18!1m12... - Vous pouvez coller cette URL dans le panneau Attr du bloc (voir ci-dessous) — aucune clé API n’est requise.
Méthode B : Génération transparente (enregistrement d’une clé API globale)
Recommandée pour les animateurs d’ateliers et les organisateurs d’événements actifs. Enregistrez une clé de développeur dans ArtInStack, puis générez des cartes intégrées à partir d’une adresse postale directement dans l’éditeur de page.
- Ouvrez Paramètres → Intégrations → Cartes dans votre tableau de bord.
- Sélectionnez Google Maps comme fournisseur.
- Collez votre clé API d’intégration Google Maps.
- Conseil de pro : activez l’API Maps Embed dans Google Cloud et ajoutez une restriction de référent HTTP pour votre domaine afin d’empêcher toute utilisation non autorisée de votre clé.
Ajouter le bloc
- Ouvrez Pages → Modifier → Éditeur de page.
- Dans la barre latérale de droite, cliquez sur Blocs (icône « plus »).
- Sous Médias, faites glisser Carte dans une colonne (ou laissez l’éditeur l’intégrer automatiquement dans Section → Ligne → Colonne).
- Enregistrez la page et publiez-la lorsque vous êtes prêt.
Configurer dans « Attr »
Sélectionnez le bloc « Carte » → Modifier → Attr :
| Paramètre | Fonction |
|---|---|
| Adresse ou emplacement | Saisissez une adresse physique (par exemple Réserve naturelle d’État de Mono Lake Tufa ou 123 Main St, Atlanta, GA) puis cliquez sur Actualiser pour générer un code d’intégration (Chemin B — nécessite une clé API enregistrée) |
| Ou coller l’URL d’intégration | Collez une URL brute de type https://www.google.com/maps/embed?.... Cette option est prioritaire ; elle fonctionne sans clé API enregistrée (Voie A) |
| Niveau de zoom | S'applique lors de la génération à partir d'une adresse (Méthode B) |
| Type de carte | Carte routière ou satellite |
| Hauteur | Bloquez la hauteur de la fenêtre d'affichage (par ex. 400 px) pour l'adapter à votre mise en page |
Lorsque vous utilisez une URL d’intégration Google pb= collée, le zoom et le cadrage proviennent de l’exportation que vous avez créée dans Google Maps — et non du curseur de zoom.
> Vous recherchez la carte d’impact ? Le bloc Carte standard est destiné à un seul emplacement sur une page. Pour afficher un portfolio géolocalisé avec des repères répartis dans différentes régions, utilisez plutôt le bloc Carte d’impact — Ajouter une carte d’impact à une page.
Dépannage
| Symptôme | Que vérifier |
|---|---|
| La fonction Actualiser (générer) est désactivée | Aucune clé API enregistrée — ouvrez Paramètres → Intégrations → Cartes, ou collez une URL d’intégration directe (Chemin A) |
| Carte vide ou avertissement de l’API Google | Vérifiez que l’API d’intégration des cartes est activée dans Google Cloud ; assurez-vous que les restrictions de référent HTTP incluent votre domaine de production (et localhost lors des tests en local) |
| La carte s’affiche mal après avoir été collée | Réexportez-la depuis Google Maps via Intégrer une carte et collez à nouveau l’URL src complète |
| Le bloc fonctionne dans l’éditeur mais pas en ligne | Enregistrez la page, publiez-la et testez l’URL publique |
Pour les blocs de mise en page autour de la carte, consultez Référence des blocs de l’éditeur et de la mise en page.
Vérification de votre configuration
- Publiez une page de test avec un bloc Carte.
- Vérifiez que la carte s’affiche correctement sur l’URL publique (sur ordinateur et sur mobile).
- Si vous utilisez la méthode B, modifiez l’adresse dans Attr, cliquez sur Actualiser, enregistrez, puis vérifiez que l’intégration a bien été mise à jour.