Site Web avancé : Widgets – Carte

Pour en savoir plus sur l’ajout de widgets à votre site, consultez Ajouter des widgets .

Google Maps comme fournisseur de cartes par défaut

Mapbox est le fournisseur de cartes par défaut pour le widget Carte. Vous pouvez toutefois définir Google Maps comme fournisseur de cartes par défaut pour tous les sites, nouveaux et existants, de votre compte. Outre le widget Carte, Google Maps deviendra le fournisseur par défaut pour toutes les recherches de localisation et les cartes de la bibliothèque de contenu et des autres widgets applicables.

Toutes les données de localisation de Mapbox sont enregistrées et appliquées à Google Maps. Vous n'avez donc pas besoin de configurer à nouveau vos emplacements.

Pour définir Google Maps comme fournisseur de cartes par défaut :

1. Dans votre compte Google Maps, générez une clé API . Pour savoir comment générer une clé API, consultez la documentation Google . Nous vous recommandons de consulter les règles d'utilisation et de facturation de Google .
2. Depuis votre tableau de bord, cliquez sur votre avatar dans le coin supérieur droit et sélectionnez Compte .
3. Sur la page Paramètres du compte, faites défiler jusqu'à la section Intégration de Google Map et cliquez sur Configurer .
4. Collez votre clé API dans le champ, puis cliquez sur « Appliquer à tous les sites » . Google Maps devient alors la carte par défaut pour tous les sites, nouveaux et existants, de votre compte.

Vous pouvez désactiver Google Maps à tout moment et revenir à Mapbox. Toutes les données de localisation de Google Maps seront enregistrées et automatiquement appliquées à Mapbox lors de la transition.

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

6. Faites un clic droit sur le widget et sélectionnez Modifier le contenu .
7. Sélectionnez Options de configuration de la carte .
8. Saisissez l'adresse de votre entreprise dans le champ prévu à cet effet.
9. Sélectionnez l'adresse dans le menu déroulant. Si votre adresse n'apparaît pas dans le menu déroulant, cela signifie que la base de données HERE, utilisée par Guesty Sites Internet, ne contient pas cette adresse. Pour soumettre ou corriger l'adresse, contactez HERE Map Creator .
10. 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 le bouton Utiliser sur les appareils ( ) où vous souhaitez que le bouton apparaisse. Si aucun appareil n'est sélectionné, l'image de la carte s'affichera.
11. Saisissez le texte que vous souhaitez voir apparaître sur le bouton dans le champ Texte sur le bouton prévu à cet effet.
12. Sélectionnez « Afficher la fenêtre d'informations de localisation » (Fenêtre d'informations pour le marqueur de carte). Pour afficher une fenêtre d'informations de localisation sur le widget de carte :
    1. Saisissez un titre et une description pour la fenêtre contextuelle.
    2. Sélectionnez cette option pour afficher la fenêtre contextuelle au survol, au clic ou toujours dans la liste déroulante Affichage de la fenêtre contextuelle.

Pour accéder à l'éditeur de conception, cliquez avec le bouton droit sur l'élément, puis cliquez sur Modifier la conception .

Cliquez sur l’onglet Disposition pour modifier la conception de la carte qui apparaît sur votre site.

Pour plus d'informations sur les options de conception qui ne sont pas spécifiques à ce widget (par exemple, la disposition, le style ou l'espacement), voir Conception de widget .

Pour intégrer des cartes de Google Maps à l’aide du widget HTML :

1. Accédez à Google Maps.
2. Recherchez l'emplacement souhaité.
3. Cliquez sur le menu en haut à gauche, puis cliquez sur Partager ou intégrer la carte .
4. Cliquez sur l’onglet Intégrer la carte .
5. Copiez l'URL entre guillemets après <iframe src =". Assurez-vous de copier l'URL complète imbriquée entre guillemets.

   

6. Accédez à votre site et, dans le panneau de gauche, cliquez sur Widgets et faites glisser le widget HTML dans une ligne ou une colonne.
7. Utilisez le code d'intégration suivant et ajoutez l'URL que vous avez obtenue à partir de Google Maps dans les guillemets après iframe src= :

   <div class="embed-container"><iframe src=" " frameborder="0" allowfullscreen></iframe></div>

8. Passez en mode développeur.
9. Cliquez sur Site HTML/CSS, puis sur site.css .
10. Intégrez le CSS suivant 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 carte sera redimensionnée en fonction des différents appareils. Si vous utilisez le code d'intégration Google Maps standard, la taille du widget de carte sera statique sur tous les appareils et sera tronquée sur mobile.