Lisää Google-kartta HubSpot-sisältöön

Lisää interaktiivinen Google Map HubSpot-sisältöön kopioimalla kartan upotuskoodi ja lisäämällä se rikkaan tekstin moduuliin. Tämä menetelmä toimii sisältöeditorissa ja rikkaan tekstin moduuleja tukevissa malleissa.

Ennen kuin aloitat

Ennen kuin lisäät Google-kartan HubSpot-sisältöön, tutustu seuraaviin vaatimuksiin ja näkökohtiin.

Ymmärrä rajoitukset ja näkökohdat

• Upotettuja Google Maps -karttoja hallinnoi Google. Näytön käyttäytyminen, muotoilu ja toiminnot riippuvat Googlen upotusasetuksista.

Hanki Google Mapin upotuskoodi

1. Siirry Google Mapsiin.
2. Kirjoita hakupalkkiin osoite.
3. Napsauta osoitteen luettelossa Share (Jaa).

4. Napsauta valintaikkunassa Embed a map (Upota kartta ) -välilehteä.
5. Napsauta Kartan koko -pudotusvalikkoa ja valitse koko.
6. Kopioi kartan upotuskoodi napsauttamalla Copy HTML .

Google-kartan lisääminen sisältöeditorissa

1. Siirry sisältöön:

   • Blogi: Siirry HubSpot-tililläsi kohtaan Sisältö > Blogi.
   • Verkkosivuston sivut: Dans votre compte HubSpot, accédez à Contenu web > Pages de site web.
   • Laskeutumissivut: Siirry HubSpot-tililläsi kohtaan Sisältö > Aloitussivut.
2. Napsauta sisällön nimeä.
3. Napsauta sisältöeditorissa vasemman sivupalkin add Add -kuvaketta.
4. Laajenna Teksti-osio napsauttamalla sitä, napsauta sitten Rich Text -moduulia ja vedä se paikalleen.
5. Napsauta rikkaan tekstin työkalupalkissa pudotusvalikkoa Advanced (Lisäasetukset ) ja valitse Source code (Lähdekoodi).
6. Liitä kartan upotuskoodi valintaikkunaan ja napsauta sitten Tallenna.

7. Voit ottaa muutokset käyttöön napsauttamalla oikeassa yläkulmassa Julkaise tai Päivitä .

Google-kartan lisääminen malliin

Jos vedä ja pudota -malline tai koodattu malli ei sisällä rikkaan tekstin moduulia, lisää sellainen Design Managerissa. Kun olet julkaissut mallin, muokkaa rikkaan tekstin moduulia sisältöeditorissa.

Rikastekstimoduulin lisääminen vedä ja pudota -malliin

Lisää rikas tekstimoduuli vedä ja pudota -malliin, jotta Google Map voidaan lisätä sisältöeditorissa. Lisätietoja moduulien käyttämisestä vedä ja pudota -malleissa.

1. Siirry sisältöön:

   • Blogi: Siirry HubSpot-tililläsi kohtaan Sisältö > Blogi.
   • Verkkosivut: Dans votre compte HubSpot, accédez à Contenu web > Pages de site web.
   • Laskeutumissivut: Siirry HubSpot-tililläsi kohtaan Sisältö > Aloitussivut.
2. Napsauta sisällön nimeä.
3. Napsauta Asetukset-valikkoa ja valitse Malli.
4. Napsauta Muokkaa tätä mallia. Sinut ohjataan Design Manageriin.
5. Napsauta + Lisää tarkastajassa.
6. Kirjoita hakupalkkiin rikas teksti.

7. Napsauta rikkaan tekstin moduulia ja vedä se paikalleen mallissa.
8. Napsauta oikeassa yläkulmassa Julkaise muutokset.
9. Jatka Google Mapin lisäämistä sisältöeditorissa.

Rikastekstimoduulin lisääminen koodattuun malliin

Lisää rikkaan tekstin moduuli koodattuun malliin, jotta Google Map voidaan lisätä sisältöeditorissa. Lisätietoja moduulien käyttämisestä koodatuissa malleissa.

1. Siirry sisältöön:
   • Blogi: Siirry HubSpot-tililläsi kohtaan Sisältö > Blogi.
   • Verkkosivut: Dans votre compte HubSpot, accédez à Contenu web > Pages de site web.
   • Laskeutumissivut: Siirry HubSpot-tililläsi kohtaan Sisältö > Aloitussivut.
2. Napsauta sisällön nimeä.
3. Napsauta Asetukset-valikkoa ja valitse Malli.
4. Napsauta Muokkaa tätä mallia.
5. Lisää koodieditoriin Rich text -moduuli, jossa kartan pitäisi näkyä. Esim:

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

6. Napsauta oikeassa yläkulmassa Julkaise muutokset.
7. Jatka Google-kartan lisäämistä rich text -moduuliin.