Affichez une carte avec les lieux de votre choix pour vos visiteurs. Utilisez le widget Plan pour afficher l’adresse de vos boutiques physiques ou d’un événement spécial. Vous pouvez également vous en servir pour indiquer à vos clients où trouver des places de stationnement.

Pour ajouter le widget Plan :

1. Dans le panneau de gauche, cliquez sur « Widgets ».
2. Cliquez sur le widget Plan et déposez-le sur votre site.

DANS CET ARTICLE:

• Éditeur de contenu
• Éditeur de conception

Éditeur de contenu

Pour accéder à l’éditeur de contenu :

1. Effectuez un clic droit sur le widget, puis sélectionnez « Modifier le contenu ».
2. Saisissez l’adresse de votre entreprise dans le champ dédié.
3. Sélectionnez l’adresse dans la liste déroulante qui s’affiche. Si votre adresse ne s’affiche pas dans la liste déroulante, cela signifie que nous ne parvenons pas à la trouver dans l’API de MapBox (qui diffère parfois de la recherche sur carte).
   Pour résoudre ce problème, essayez plutôt de relier directement un widget Bouton à l’URL de la carte dans Google Maps. Si votre adresse ne figure pas dans MapBox, vous pouvez contacter directement MapBox pour demander son ajout.
4. Vous pouvez choisir d’afficher un bouton de carte au lieu d’une image de carte. Pour afficher un bouton de carte sur des appareils spécifiques, sélectionnez l’option « Utilisez le bouton sur »  pour choisir le type d’appareil concerné. Si vous ne sélectionnez aucun appareil, l’image de la carte sera affichée.
5. Saisissez le texte que vous souhaitez afficher sur le bouton dans le champ « Texte du bouton ».

Afficher une fenêtre contextuelle avec des informations de localisation

Pour afficher une fenêtre contextuelle contenant des informations de localisation sur le widget Plan :

1. Saisissez un titre et une description pour la fenêtre contextuelle.
2. Choisissez d’afficher la fenêtre « Au passage de la souris, Après un clic » ou « Toujours » dans le menu déroulant.

Éditeur de conception

Pour accéder à l’éditeur de design, faites un clic droit sur le widget et cliquez sur « Modifier le design ».

Cliquez sur l’onglet de mise en page pour modifier le design de la carte qui apparaît sur votre site.

Intégrer une carte Google Maps à l’aide du widget HTML

Pour intégrer une carte Google Maps à l’aide du widget HTML :

1. Rendez-vous sur Google Maps.
2. Recherchez l’adresse souhaitée.
3. Cliquez sur le menu dans le coin supérieur gauche, puis sur « Partager ou intégrer une carte ».
4. Cliquez sur l’onglet « Intégrer une carte ».
5. Copiez l’URL entre guillemets, après <iframe src = ». Assurez-vous de copier l’intégralité de l’URL comprise entre les guillemets.
6. Rendez-vous sur votre site et cliquez sur Widgets dans le panneau de gauche, puis faites glisser le widget HTML sur une rangée ou une colonne.
7. Utilisez le code d’intégration suivant et ajoutez l’URL copiée à partir de Google Maps entre les guillemets qui suivent iframe src= :<div class="embed-container"><iframe src=" " frameborder="0" allowfullscreen></iframe></div>
8. Accédez au Mode développeur.
9. Cliquez sur « Site HTML/CSS », puis sur « site.css ».
10. Intégrez les CSS suivants dans cette section :.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }La taille de la carte s’adaptera aux différents affichages des appareils. Si vous utilisez le code d’intégration normal de Google Maps, la taille du widget de la carte sera la même sur tous les appareils et sera coupée sur un affichage mobile.