Hoe voeg je Google Maps toe aan je website?

Google maps embedden op je webiste

Hoe voeg je Google Maps toe aan je website?

Maak je bedrijf beter vindbaar met een interactieve kaart

Wil je het je klanten makkelijker maken om je te vinden? Door een Google Maps kaart op je website te embedden, geef je bezoekers direct een duidelijk overzicht van je locatie, adres, reviews en routebeschrijving. Dit bespaart hen tijd en houdt ze langer op je website.

In dit artikel leer je niet alleen hoe je een Google Maps kaart toevoegt, maar ook hoe je de kaart aanpast, responsive maakt en meerdere locaties toevoegt. Zo zorg je ervoor dat jouw website echt een stap verder gaat dan de rest.

Waarom Google Maps op je website zetten?

Er zijn meerdere voordelen aan het embedden van Google Maps:

  • Klanten vinden je sneller: Ze hoeven niet apart Google Maps te openen om je locatie te zoeken.
  • Directe routebeschrijving: Bezoekers kunnen met één klik een route plannen.
  • Bedrijfsinformatie in één oogopslag: Je adres, telefoonnummer, website en reviews zijn meteen zichtbaar.
  • Meer vertrouwen door reviews: Je Google-recensies en sterrenwaardering worden weergegeven.
  • Toont nabijgelegen voorzieningen: Handig als klanten willen weten of er parkeergelegenheid of andere bedrijven in de buurt zijn.
  • Houdt bezoekers langer op je site: Interactieve elementen zorgen ervoor dat bezoekers niet meteen wegklikken.

Een Google Maps kaart op je website is een kleine moeite, maar levert veel op voor je online zichtbaarheid en gebruiksvriendelijkheid. Zo ziet dat er uit:

Het toevoegen van Google Maps is eenvoudig en duurt maar een paar minuten. Volg deze stappen:

  1. Open Google Maps en zoek je bedrijf of locatie.
  2. Klik op de “Delen” knop onder je bedrijfsnaam.
  3. Ga naar de tab “Kaart insluiten”.
  4. Kies de gewenste kaartgrootte (klein, medium, groot of aangepast).
  5. Kopieer de HTML-code die Google geeft (een <iframe>-code).
  6. Plak deze code op je website in de HTML-editor of tekstmodus waar je de kaart wilt tonen.
  7. Sla de wijzigingen op en bekijk je website om te zien hoe de kaart eruitziet.

Tip: Gebruik je WordPress? Plak de code eenvoudig in een “HTML-blok” in de blokeditor.

Hoe maak je een ingesloten Google Maps responsief?

Wil je dat de kaart zich automatisch aanpast aan verschillende schermformaten, zoals mobiel en tablet? Voeg dan de volgende CSS-code toe aan je website:

<style>
.map-container {
    position: relative;
    padding-bottom: 56.25%; /* Verhouding 16:9 */
    height: 0;
    overflow: hidden;
}
.map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>
<div class="map-container">
    <iframe src="JOUW_IFRAME_CODE_HIER" allowfullscreen></iframe>
</div>

Dit zorgt ervoor dat de kaart altijd goed wordt weergegeven, ongeacht het apparaat van de gebruiker.

Meerdere locaties toevoegen aan Google Maps op je website

Heb je meerdere vestigingen of wil je meerdere locaties tonen op één kaart? Volg dan deze stappen:

  1. Ga naar Google My Maps (https://www.google.com/mymaps).
  2. Klik op “Nieuwe kaart maken”.
  3. Voeg je locaties toe door op “Een marker toevoegen” te klikken en de adressen in te voeren.
  4. Pas de naam en beschrijving van elke locatie aan.
  5. Klik op “Delen” en zorg ervoor dat de kaart openbaar is.
  6. Klik op “Insluiten op mijn site” en kopieer de <iframe>-code.
  7. Plak de code op je website zoals eerder uitgelegd.

Dit is een uitstekende manier om bijvoorbeeld al je winkels, kantoren of servicegebieden in één overzichtelijke kaart te tonen.

Veelgestelde vragen over Google Maps embedding

Is een ingesloten Google Maps kaart gratis?

Ja, het insluiten van een Google Maps-kaart via de <iframe>-code is volledig gratis.

Kan ik de kaart responsief maken (geschikt voor mobiel)?

Ja, voeg de hierboven beschreven CSS-code toe om de kaart zich automatisch te laten aanpassen aan verschillende schermformaten.

Hoe centreer ik de kaart op mijn website?

Gebruik bij WordPress de “align center” optie in de editor om de kaart in het midden van de pagina te plaatsen.

Kan ik een aangepaste stijl aan de kaart toevoegen?

Ja, via de Google Maps API kun je aangepaste kleuren en stijlen toepassen, zoals een minimalistische zwart-witte kaart of een bedrijfskleurenschema. Dit vereist echter wat meer technische kennis.

Conclusie

Een Google Maps kaart op je website zetten is een kleine moeite, maar maakt een groot verschil in hoe klanten jouw bedrijf kunnen vinden. Door deze stappen te volgen, zorg je voor een betere gebruikservaring en verhoog je de kans dat bezoekers sneller contact opnemen of langskomen.

Wil jij jouw website verder optimaliseren? Laat het weten.

Hoi, 👋 Kunnen we je ergens mee h