Google Maps op uw website embedden stelt gebruikers in staat om eenvoudig locatiegegevens te bekijken, een kaartpin voor een specifiek adres weer te geven en te navigeren met functies zoals routebeschrijving en Street View. Het verbetert ook uw lokale SEO.
Google Maps handmatig insluiten via code
Volg de onderstaande stappen om Google Maps handmatig in te sluiten of via WordPress-widgets. Zo werkt het:
- Open Google Maps
- Klik op Delen en Een kaart insluiten en Kopieer de embed-code
- Plak de embed-code in de HTML van uw website
Stap 1: Open Google Maps
Ga naar https://www.google.com/maps/ en zoek uw gewenste locatie in de zoekbalk. U kunt uw bedrijfsadres nauwkeurig markeren, een bestemming bekijken, of overschakelen naar satellietweergave voor meer details.
Stap 2: Genereer de embed-code
- Klik op de Delen-icoon in de kaartweergave.
- In de Delenvenster, selecteer het tabblad “Een kaart insluiten”.
- Kopieer de verstrekte insluitcode (iframe).
Stap 3: Plak de embed-code in de HTML van uw website
- Open je HTML-code Open het bestand met elke code-editor of open uw WordPress-pagina en selecteer een HTML-widget.
- Vind het gedeelte waar je de kaart wilt weergeven en plak de iframe-code.
- Sla de wijzigingen op en ververs je webpagina om de ingebedde kaart te zien.
Voorbeeld van een iframe-embedcode:
Code kopiëren
Gekopieerd
Gebruik een andere browser
<code id="dm-code-raw" class=" no-wrap language-markup"><iframe src="https://www.google.com/maps/embed?..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe></code>
Een responsieve kaart maken
Om ervoor te zorgen dat de kaart er op alle schermformaten goed uitziet, kunt u het iframe in een container plaatsen met CSS:
Code kopiëren Gekopieerd Gebruik een andere browser<code id="dm-code-raw" class=" no-wrap language-markup"><div style="position:relative; padding-bottom:56.25%; height:0; overflow:hidden;"> <iframe src="https://www.google.com/maps/embed?..." style="position:absolute; top:0; left:0; width:100%; height:100%; border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> </div></code>
Google Maps insluiten met WordPress-paginabouwers
De meeste WordPress-paginabouwers zoals Elementor, Divi of WPBakery bevatten een Google Maps widget. Deze methode vereenvoudigt het proces en maakt handmatige codering overbodig. Widgets bieden vaak aanpassingsmogelijkheden zoals zoomniveaus, kaarttypes (standaard, satellietweergave, enz.), en aanpassingen aan markers.
Zo kun je in Elementor een Google Maps-kaart insluiten:
- Zoeken naar de Kaarten widget
- Het slepen van de Kaarten widget op je pagina
- Voer de naam van uw bedrijfslocatie in
Als WordPress-gebruiker wilt u wellicht ook meer leren over Zo doe je SEO in WordPress!
Veelvoorkomende problemen en foutoplossingen
- Kaart wordt niet weergegeven: Controleer nogmaals of de iframe-code correct is gekopieerd en geplakt.
- API-sleutelproblemen: Sommige geavanceerde functionaliteiten vereisen mogelijk een API-sleutel voor integratie.
- Browserbeperkingen: Zorg ervoor dat uw site iframes toestaat en dat er geen conflicterende plug-ins of scripts zijn.
Veelgestelde vragen
Kan ik Google Maps gratis op mijn website inbedden?Ja, je kunt Google Maps gratis insluiten met de iframe-embedcode die door Google Maps wordt aangeboden.
Helpt het insluiten van Google Maps bij SEO?Ja, het embedden van Google Maps kan de lokale SEO verbeteren door duidelijke locatiegegevens te leveren en de gebruikerservaring te verbeteren.
Conclusie
Het insluiten van Google Maps is een eenvoudige manier om uw website te verbeteren. Of u nu kiest voor handmatige code of een WordPress-widget, biedt u uw bezoekers waardevolle locatie-informatie en verbetert u de functionaliteit van uw website. Voor WordPress-gebruikers raden wij aan onze gekoppelde tutorial te bekijken voor stapsgewijze instructies over het gebruik van Google Maps-widgets.
I’m an experienced SEO professional with over a decade of helping over 100 businesses rank higher online, especially local businesses, e-commerce stores and SaaS. As the co-founder of LPagery, I specialize in practical, proven strategies for regular SEO and Local SEO success.
Deze post kan affiliate-links bevatten waar wij een commissie op verdienen wanneer een product wordt aangeschaft.
I’m an experienced SEO professional with over a decade of helping over 100 businesses rank higher online, especially local businesses, e-commerce stores and SaaS. As the co-founder of LPagery, I specialize in practical, proven strategies for regular SEO and Local SEO success.