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.
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’.
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.
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.
Allereerst pakken we de standaard embed-code die je kunt kopiëren via de knop ‘Deel kaart’.
<iframe width="560" height="315" src="https://wolfmaps.com/embed/a7b997b?zoom=1" title="Duurzame Stadsgids - Groener Groningen" allow="geolocation *" frameBorder="0"></iframe>
Selecteer op de kaart aan de linkerkant de categorie of tag die je wilt tonen in de embed op je website.
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**&c=37bda7b&c=e7b2e9b**#14.95/53.21785/6.56805
Kopieer uit deze URL alleen het stukje met ‘&c=37bda7b&c=e7b2e9b’, dit zijn de twee categorieën. Plak ze achter de standaard embed-code zoals hieronder vetgedrukt aangegeven en maak de eerste ‘&’ een ‘?'.
<iframe width="560" height="315" src="https://wolfmaps.com/embed/a7b997b**?c=37bda7b&c=e7b2e9b**" title="Duurzame Stadsgids - Groener Groningen" allow="geolocation *" frameBorder="0"></iframe>
Let op: Je kunt niet de volledige URL uit de adresbalk in de embed-code plaatsen, anders werkt de embed niet.
Bij stap 3 zie je nog wat extra code in de URL. Voor de eerste slash is het zoomniveau, daarna volgen de coördinaten. Als je deze ook meeneemt, ziet de bezoeker exact wat jij zag op de kaart.
#14.95/53.21828/6.56791
Dat ziet er dan zo uit:
<iframe width="560" height="315" src="https://wolfmaps.com/embed/a7b997b#14.95/53.21828/6.56791" title="Duurzame Stadsgids - Groener Groningen" allow="geolocation *" frameBorder="0"></iframe>
Plak nu de embed-code op je website!
Er zijn een paar zaken handig om te weten voordat je gaat embedden.
Heb je nog vragen? Stuur gerust een mailtje naar hello@wolfmaps.com en wij helpen je graag verder.
