Je kaart is altijd bereikbaar via een eigen URL, wat best handig is. Maar soms wil je de kaart interactief tonen op je eigen website. Hier leggen we uit hoe je dat doet.

Standaard embed

De meest eenvoudige manier om je kaart in te sluiten hebben we al voor je klaargezet, zowel voor de volledige kaart als voor een specifieke locatie. De embed-code vind je onder 'Deel kaart'.

embed-deel.png

Hieronder zie je de standaard embed-code voor het insluiten van de kaart vanuit het deelscherm. Je kunt deze in je eigen websitecode plaatsen om de volledige kaart op je website weer te geven.

<iframe width="560" height="315" src="<https://wolfmaps.com/embed/a7b997b?zoom=1>" title="Duurzame Stadsgids - Groener Groningen" allow="geolocation *" frameBorder="0"></iframe>

Tip: Pas vooral de breedte en hoogte aan om deze het beste te laten uitkomen op je website.

Specifieke embed

Het kan zijn dat je niet altijd de volledige kaart wilt tonen, maar juist een specifieke selectie. Bijvoorbeeld in een blogartikel waarin je iets vertelt over een specifieke categorie. Hier leg ik uit hoe je dat kunt doen.

1. Basic embed code

Allereerst pakken we de standaard embed-code die je kunt kopiëren vanuit het deelscherm.

embed-deel.png

<iframe width="560" height="315" src="<https://wolfmaps.com/embed/a7b997b?zoom=1>" title="Duurzame Stadsgids - Groener Groningen" allow="geolocation *" frameBorder="0"></iframe>

2. Filter je kaart

Selecteer op de kaart aan de linkerkant de categorie of tag die je wilt tonen in de embed op je website.

embed-filter.png

3. URL in de adresbalk

Als ik bijvoorbeeld twee categorieën heb gekozen zoals in de afbeelding hierboven, dan ziet de URL in de adresbalk er zo uit.

<https://wolfmaps.com/kaart/duurzame-stadsgids-groener-groningen-a7b997b?preview=true**&c=37bda7b&c=e7b2e9b**#14.95/53.21785/6.56805>

4. Kopiëren