Samenvatting
Wil je een interactieve kaart op je website tonen? Bijvoorbeeld op een contactpagina of een "vind ons"-sectie? Dat kan met het kaart-element in Mach3Blocks. Je voegt een Google Maps-kaart toe, vult een adres in, en bezoekers kunnen inzoomen, rondkijken en de route plannen. Je hebt hiervoor een Google Maps API-sleutel nodig.
Hoe werkt het
Het kaart-element toont een interactieve Google Maps-kaart op je pagina. Na het instellen van een API-sleutel en het invoegen van een geschikt blok, vul je het adres in en pas je het zoomniveau en de weergave-opties aan.
Kaartopties
Als je het kaart-element selecteert, vind je in het Instellingen-paneel (rechts) de volgende opties:
- Adres — het adres waar de kaart op gecentreerd wordt
- Zoomniveau — hoe ver ingezoomd de kaart wordt getoond (hoger getal = meer ingezoomd)
- Controls aan/uit — of bezoekers de zoomknoppen en streetview-knop zien
- Grijstinten-modus — toont de kaart in zwart-wit, handig als kleuren niet bij je huisstijl passen
Grootte en positie aanpassen
Selecteer het kaart-element → ga naar het tabblad Opmaak in het rechter paneel → pas breedte, hoogte, uitlijning en marges aan. Controleer de weergave op verschillende schermformaten via de apparaat-icoontjes in de toolbar.
Wat heb je nodig?
- Een geldige Google Maps API-sleutel (die maak je aan via het Google Cloud Console)
- De API-sleutel moet ingesteld zijn in Mach3Blocks via Website-instellingen → tabblad Algemeen → Google API-sleutel
Zonder geldige API-sleutel kan de kaart niet worden geladen.
Stappenplan
Stap 1: API-sleutel instellen
- Ga naar de Website-instellingen van je website.
- Open het tabblad Algemeen.
- Vul je API-sleutel in bij Google API-sleutel.
- Sla de instellingen op.
Stap 2: Blok met kaart invoegen
- Open de editor van de pagina waarop je de kaart wilt plaatsen.
- Klik op Blok invoegen.
- Kies een blok dat een kaart-element bevat, of voeg een kaart-element toe aan een bestaand blok.
Stap 3: Adres instellen
- Klik op het kaart-element in de editor.
- Open het rechter paneel → tabblad Instellingen.
- Vul bij Adres het adres in dat je op de kaart wilt tonen.
Stap 4: Zoomniveau en opties aanpassen
- Stel het zoomniveau in — hoe hoger het getal, hoe meer ingezoomd
- Schakel controls aan of uit naar wens
- Zet grijstinten-modus aan als je de kaart in zwart-wit wilt
Stap 5: Grootte aanpassen
- Selecteer het kaart-element.
- Ga naar het tabblad Opmaak in het rechter paneel.
- Pas breedte, hoogte, uitlijning en marges aan.
Publiceer de pagina om de kaart live te zetten.
Wanneer gebruik je dit
- Je wilt een interactieve kaart tonen op een contactpagina
- Je wilt een locatie-overzicht of "vind ons"-sectie bouwen
- Je wilt een adres visueel weergeven voor bezoekers