Ajouter une carte Google au contenu HubSpot

Ajoutez un Google Map interactif au contenu HubSpot en copiant le code intégré du mappage et en l’insérant dans un module de texte enrichi. Cette méthode fonctionne dans l’éditeur de contenu et dans les modèles qui prennent en charge les modules de texte enrichi. 

Avant de commencer

Avant d’ajouter Google Map à votre contenu HubSpot, vérifiez les exigences et considérations suivantes. 

Compréhension des limites et des considérations

• Les cartes Google Maps intégrées sont gérées par Google. Le comportement d’affichage, le style et les fonctionnalités dépendent des paramètres d’intégration de Google. 

Obtenir le code d'intégration de la carte Google

1. Accédez à Google Maps.
2. Dans la barre de recherche, saisissez une adresse. 
3. Dans la liste des adresses, cliquez sur Partager.

4. Dans la boîte de dialogue, cliquez sur l'onglet Intégrer une carte. 
5. Cliquez sur le menu déroulant de taille de la carte et sélectionnez une taille. 
6. Cliquez sur Copier le code HTML pour copier le code intégré du mappage.

Ajouter un Google Map dans l’éditeur de contenu 

1. Accédez à votre contenu :

   • Blog : Dans votre compte HubSpot, accédez à Contenu > Blog.
   • Pages de site web : Dans votre compte HubSpot, accédez à Contenu web > Pages de site web.
   • Pages de destination : Dans votre compte HubSpot, accédez à Contenu > Pages de destination.
2. Cliquez sur le nom de votre contenu. 
3. Dans l'éditeur de contenu, cliquez sur l'icône add Add dans la barre latérale gauche. 
4. Cliquez pour développer la section Text , puis cliquez sur le module Rich Text et faites-le glisser en position.
5. Dans la barre d'outils texte riche, cliquez sur le menu déroulant Avancé et sélectionnez Code source. 
6. Dans la boîte de dialogue, collez le code d'intégration de la carte, puis cliquez sur Enregistrer. 

7. Pour appliquer vos modifications, cliquez sur Publier ou Mettre à jour dans l'angle supérieur droit.

Ajouter un Google Map à un modèle

Si votre modèle glisser-déposer ou votre modèle codé ne contient pas de module de texte enrichi, ajoutez-en un dans le gestionnaire de conception. Après avoir publié le modèle, modifiez le module de texte enrichi dans l’éditeur de contenu.

Ajouter un module de texte enrichi à un modèle de glisser-déposer

Ajoutez un module de texte enrichi à un modèle de glisser-déposer afin que Google Map puisse être ajouté dans l’éditeur de contenu. Découvrez-en davantage sur l’utilisation des modules dans les modèles de glisser-déposer. 

1. Accédez à votre contenu :

   • Blog : Dans votre compte HubSpot, accédez à Contenu > Blog.
   • Pages de site web : Dans votre compte HubSpot, accédez à Contenu web > Pages de site web.
   • Pages de destination : Dans votre compte HubSpot, accédez à Contenu > Pages de destination.
2. Cliquez sur le nom de votre contenu. 
3. Cliquez sur le menu Settings et sélectionnez Template. 
4. Cliquez sur Modifier ce modèle. Vous serez dirigé vers le gestionnaire de conception.
5. Cliquez sur + Ajouter dans l’inspecteur. 
6. Dans la barre de recherche, saisissez un texte riche. 

7. Cliquez sur le module de texte enrichi et faites-le glisser jusqu’à l’emplacement souhaité sur votre modèle. 
8. Dans l'angle supérieur droit, cliquez sur Publier les modifications.
9. Poursuivez l’ajout de Google Map dans l’éditeur de contenu.

Ajouter un module de texte enrichi à un modèle codé

Ajoutez un module de texte enrichi à un modèle codé afin que Google Map puisse être ajouté dans l’éditeur de contenu. Découvrez-en davantage sur l’utilisation des modules dans les modèles codés. 

1. Accédez à votre contenu :
   • Blog : Dans votre compte HubSpot, accédez à Contenu > Blog.
   • Pages de site web : Dans votre compte HubSpot, accédez à Contenu web > Pages de site web.
   • Pages de destination : Dans votre compte HubSpot, accédez à Contenu > Pages de destination.
2. Cliquez sur le nom de votre contenu.
3. Cliquez sur le menu Paramètres et sélectionnez Modèle.
4. Cliquez sur Modifier ce modèle.
5. Dans l’éditeur de code, ajoutez le module de texte enrichi à l’endroit où la carte doit apparaître. Par exemple :

{Le module %
"map_embed"
path="@hubspot/rich_text"
label="Google Map" %}

6. Dans l'angle supérieur droit, cliquez sur Publier les modifications.
7. Continuez d’ajouter Google Map dans le module de texte enrichi.