Naar inhoud
Draw on a Map
Begin met tekenen

Een interactieve kaart voor je website maken

Teken het pad, de ingang of het verzorgingsgebied dat je bezoekers wilt laten zien. Kopieer één iframe om je interactieve kaart aan je website toe te voegen.

Door het Draw on a Map-team · Bijgewerkt

Een gewone ingesloten kaart toont een markering. Daarmee vindt een gast niet vanzelf de zijingang, volgt een bezoeker niet het pad vanaf het station en ziet een klant niet waar je bezorgt. Met Draw on a Map teken je eerst die details en sluit je daarna de voltooide kaart in. Je hebt geen API-sleutel of account nodig.

Maak de kaart en kopieer de insluitcode

Sla de kaart in je account op voordat je de insluitcode kopieert als je website latere wijzigingen moet tonen. Code van een niet-opgeslagen kaart maakt een vaste kopie.

  1. Open Draw on a Map en zoek je locatie.
  2. Teken de route, het gebied, de pijlen of de notities.
  3. Verschuif en zoom de kaart naar de weergave die bezoekers als eerste moeten zien. De insluiting opent in die weergave.
  4. Kies Insluiten (</>) in de bovenste werkbalk.
  5. Kies waar je de code gaat plakken: HTML, WordPress, Wix of Squarespace. Het venster toont de stappen voor dat platform.
  6. Stel de hoogte in en kies Code kopiëren.
  7. Plak de code in je pagina, publiceer en controleer de pagina op een computer en telefoon.

Het venster Deze kaart insluiten met websiteopties, hoogte en Code kopiëren

Plak de code in WordPress in een blok Aangepaste HTML. Voeg in Wix Embed Code → Embed HTML toe. Voeg in Squarespace een Code-blok toe dat op HTML is ingesteld.

Zo ziet de code eruit

<iframe
  src="https://drawonamap.com/embed/#..."
  title="Draw on a Map embed"
  width="100%"
  height="420"
  style="border:0;"
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade"
  allow="geolocation"
  allowfullscreen></iframe>

Dit is een sjabloon. Kopieer de echte code uit het venster Insluiten, dat de src voor je kaart invult. De breedte past zich aan de kolom aan. Verander height als je pagina een hogere of lagere kaart nodig heeft.

Gratis ingesloten kaarten tonen “Powered by Draw on a Map”. Sla de kaart op en neem Pro om die vermelding te verwijderen.

Houd de ingesloten kaart actueel

Sla de kaart in je account op voordat je de code kopieert. De insluiting toont dan de laatst opgeslagen versie. Zo kun je een route corrigeren of een markering verplaatsen zonder je website te wijzigen.

Code van een niet-opgeslagen kaart bewaart de tekening in de URL. Die verandert niet als je de kaart bewerkt. Open na een wijziging opnieuw Insluiten, kopieer de nieuwe code en vervang het oude iframe.

Grote geïmporteerde datasets passen niet in een URL. Vraagt het venster Insluiten om eerst op te slaan, sla de kaart dan op en open Insluiten opnieuw.

Als de kaart niet verschijnt

Gebruik een blok dat HTML of iframecode accepteert. Een veld dat alleen een webadres accepteert werkt niet met het volledige iframe. Verdwijnt de kaart na publicatie, dan verwijdert je websitebouwer mogelijk iframes. Controleer de instellingen voor ingesloten inhoud.

Ideeën voor websitekaarten

  • Evenementen en bruiloften: markeer de juiste ingang, de pendelhalte en parkeergelegenheid op één kaart.
  • Verhuur en reizen: teken de wandeling van het station naar het appartement of de kortere weg naar het strand.
  • Dienstverleners: teken het gebied waarin je werkt. Moeten bezoekers hun eigen adres controleren, dan maakt de betaalde verzorgingsgebiedwidget van die grens een adreschecker voor je site.

Maak je websitekaart

Gerelateerde handleidingen

Terug naar het blog