Welke stappen moet je zetten om een kaartje op jouw contactpagina te plaatsen?

Er zijn meerdere mogelijkheden

1. Gebruik maken van een plug-in

Er zijn meerdere plug-ins beschikbaar om kaartjes op jouw pagina te plaatsen.
Plug-ins hebben extra mogelijkheden: zo kan je bijvoorbeeld een kaart een andere kleur geven, of extra mogelijkheden in /uit schakelen. Maar een plug-in levert ook problemen op. Zo moet een plug-in ge-update worden en moet er een API code worden verkregen.
Het plaasten van een kaart gaat met extra (tussen-)stappen m.b.v. [shortcode].

2. Geen gebruik maken van een plug-in

Door de z.g. “embed code” of insluit-code  te gebruiken kan j eook rechtstreeks een kaartje op je website plaatsen. Volg deze stappen voor Google kaartje:
1. Maak een pagina (of widget klaar waar je straks de code kan plaatsen.
2. Ga naar maps.google.com en type jouw adres in.
3. zorg ervoor dat de marker in het midden van de kaart staat en dat het zoom niveau naar wens is.
4. Klik dan op: DELEN

5. Er opent nu een extra pop-up venster.  Kies voor “EEN KAART INSLUITEN”

6. Bij kaart insluiten krijg je een nieuwe pop-up.  Hier kopieer je de HTML code die begint met <iframe> .

7. Deze HTML code moet je plakken op de pagina, of in de widget waar je de kaart wilt tonen op de website.  Ga dus daar die pagina of widget.
8. Op de pagina of in de widget kies je voor TEXT modus. Dus niet VISUEEL
9. Nu plak je de  EMBED code in de teksmodus van de pagina.
Je ziet nu zoeits als:
<iframe src=”https://www.google.com/maps/embed?pb” width=”600″ height=”450″ frameborder=”0″ style=”border:0″ allowfullscreen></iframe>

Door de width en de height aan te passen wijzig je de afmetingen van de kaart.
width=”100%” zorgt ervoor dat de kaart de breedte van de tekst krijgt.

10 Sla de pagina op en bekijk het resultaat.

Alternatief:
In plaats van Google kaarten kan je ook gebruik maken van Openstreet Maps.
Ga dan naar: https://www.openstreetmap.org
Herhaal bovenstaande stappen.  De deelknop voor de <iframe> code vind je onder de deelknop –> html.

Resultaat

Openstreet Map voorbeeld


Grotere kaart bekijken

Google maps voorbeeld