nl en de fi id nl nl nl nl nl en en nl nl en en nl nl nl en en nl en en nl nl en en nl it nl nl nl en en nl nl nl fi en nl nl nl en en en nl nl nl nl nl nl nl nl nl nl nl nl nl nl nl nl nl nl nl nl nl nl nl nl nl nl nl nl nl nl nl nl nl nl nl nl en nl fr en nl it pl en it pl de en nl en en en en en en en nl en nl en en en en nl en en nl en nl en nl
Domeinnaam Je adres op internet met extensies als .nl & .com. Mail Professioneel e-mailen met je eigen domein – veilig en reclamevrij. Mailarchivering Automatische en veilige archivering voor je bedrijf.
SSL-certificaten Bescherm je website optimaal dankzij versleuteling Microsoft 365 Je documenten altijd bij de hand met Office 365.
Websites voor beginners en professionals.
Sitebuilder Perfect voor beginners: zonder voorkennis je eigen website. Webshop Snel en professioneel online verkopen.
Snel, veilig en krachtig: hosting & WordPress van professionals voor professionals.
WordPress hosting In een handomdraai je eigen, veilige WordPress site. Hosting Perfect voor professionele en supersnelle websites. Hosting Mini Ons mini-hostingpakket – voor een mini-prijs.
WooCommerce Je eigen webshop maken met WordPress
Monitor het succes en verbeter de performance van je website
STRATO marketingRadar Het perfecte starterspakket voor online marketing. STRATO rankingCoach Snel en simpel een toppositie in zoekmachines als Google. STRATO listingCoach Verschijn met één klik in de belangrijkste online directory's.
STRATO adCoach Maak en beheer eenvoudig Google Ads-campagnes.
Sneller gaat niet: 100% merk-hardware voor virtual en dedicated systemen.
VPS Linux Krachtige Linux VPS met SSD-power & Plesk. VPS Windows VPS met véél RAM & Windows Datacenter-licentie. Cyber Protect Veiligheid dankzij professionele back-ups & anti-malware
Dedicated Server Linux Eigen hardware met root-rechten – voor veeleisende hosting. Dedicated Server Windows Merk-hardware met Administrator-toegang. ServerCloud Flexibele, schaalbare servers in de cloud.
Bestanden online opslaan & automatisch back-uppen naar de Europese cloud.
HiDrive Sla je bestanden op in de Europese cloud. HiDrive Business Veilig teamwork met je online harde schijf. HiDrive S3 De object storage voor je bedrijfsdata.
Cyber Protect Veiligheid dankzij professionele back-ups & anti-malware
Google Maps toevoegen: API of iFrame?
Een kaart van Google Maps in je website integreren
Google Maps in je website integreren
Hoe kun je Google Maps toevoegen aan je website?
Google Maps toevoegen aan je website: een account aanmaken en eigen kaarten maken
Google Maps met iFrame insluiten
Kaarten integreren met Google Maps API’s
Google Maps insluiten via API
Wat kost het gebruik van Google Maps API’s?
Google Maps toevoegen aan je website: een kwestie van knowhow en toepassing
Hoe kun je Google Maps toevoegen aan je website?
Toen Google Maps op 8 februari 2005 werd gelanceerd, hadden zelfs de verantwoordelijken van het bedrijf geen vermoeden hoezeer de online kaartendienst ons dagelijks leven zou veranderen. Al ruim tien jaar voorziet de webservice zijn gebruikers van satellietbeelden van plaatsen over de hele wereld en sinds de opkomst van mobiele telefoons is Google Maps al helemaal onmisbaar geworden. Nog thuis wordt heel eenvoudig uitgezocht hoe ver het gekozen hotel van het strand af ligt of welke hippe restaurants zich in de buurt bevinden. Google Maps is onderweg regelmatig een redder in nood en wijst je de weg naar je bestemming – te voet, op de fiets of met de auto. Zelfs de vertrektijden van de trein en de bus kunnen worden opgevraagd.
Als websitebeheerder kun je van de diensten van Google gebruikmaken door (gedeeltes van) Google Maps op je website te plaatsen. Hierin kun je bijvoorbeeld de locatie van je bedrijf, hotel, winkel of praktijk markeren of een routebeschrijving toevoegen, zodat je bezoekers je eenvoudig kunnen vinden. Hoe kun je Google Maps integreren in je site en met welke voorwaarden moet je rekening houden voor het commerciële gebruik?
Google Maps toevoegen aan je website: een account aanmaken en eigen kaarten maken
Om een kaart te maken, heb je een Google account nodig. Heb je deze nog niet, dan kun je een Google-account aanmaken. Na het inloggen open je je Google apps en start je de kaartendienst met een klik op “Maps”.
Door op ‘Maps’ te klikken, opent de kaartendienst van Google (bron: Google.com)
Vervolgens zie je in het navigatiemenu verschillende configuratiemogelijkheden waarmee je bijvoorbeeld fietsroutes of de routes van het openbaar vervoer kunt integreren en er staan tips en trucs. Via het menupunt ‘My Maps’ start je de Map-editor waarmee je je eigen kaart kunt maken. Je kunt ook gebruikmaken van reeds bestaande kaarten.
Google Maps met iFrame insluiten
Zodra je je eigen kaart naar wens hebt gemaakt, integreer je die in je website. Daarvoor open je het navigatiemenu en selecteer je ‘Kaart delen of insluiten’. Google Maps maakt meteen een HTML-code aan die in een pop-upscherm verschijnt:
Zodra je je kaart klaar hebt, kun je deze met behulp van de HTML-code in je website insluiten (bron: Google.com)
Daarna kopieer je deze code in de broncode van je website. Met het aantal pixels in de code (in het voorbeeld 640 x 480 pixels) regel je de grootte van de kaart. Omdat de ingesloten HTML-code een zogenaamd iFrame-element is, wordt de kaart telkens parallel aan het openen van jouw website door de server van Google geladen, zonder dat jouw webserver hierbij betrokken is. Deze inline frame technologie (iFrame) wordt door bijna alle browsers ondersteund en wordt bijvoorbeeld ook gebruikt bij het insluiten van social media-elementen.
De integratie van Google Maps via iFrame is alleen toegestaan voor privégebruik. Wanneer je Google Maps wilt weergeven op een commerciële website, moet je de service integreren met de officiële Google Maps API’s.
Kaarten integreren met Google Maps API’s
Het insluiten van Google Maps op een commerciële website is met behulp van een Google Maps API (application programming interface) iets complexer dan met de iFrame-technologie. Tegelijkertijd biedt het gebruik van deze programmeerinterface ontwikkelaars nieuwe mogelijkheden om Google Maps te integreren in je site. Bij WhatsApp is het dankzij zo’n API bijvoorbeeld mogelijk om je vrienden de exacte locatie op een kaart te sturen. En ook de webservice planefinder.net die alle vertrek- en aankomsttijden van het vliegverkeer wereldwijd toont, maakt gebruik van verschillende Google Maps API’s.
Om een overzicht van de verschillende API’s te krijgen en uit te vinden welke programmeerinterfaces het beste passen bij jouw webproject is het raadzaam om de Google API Picker te raadplegen.
Google Maps insluiten via API
Het werken met Google Maps API’s is niet geschikt voor onervaren gebruikers zonder specifieke programmeerkennis. Een degelijke kennis van JavaScript helpt in het bijzonder bij het insluiten van complexe kaarten.
Net als bij het insluiten van Google Maps via iFrame moet je voor het gebruik van de API’s een Google-account hebben. Kies de API die jij wilt gebruiken en vraag een sleutel aan. In dit voorbeeld hebben wij gekozen voor de JavaScript API.
De Google Maps JavaScript API biedt een uitstekende mogelijkheid om je eigen kaart te integreren (bron: https://developers.google.com)
Vervolg het proces door op ‘GET A KEY’ te klikken, de naam van je project in te voeren en de gebruikersvoorwaarden te accepteren. Wanneer je op ‘CREATE AND ENABLE API’ klikt, krijg je de Google Maps API-key te zien.
De Google Maps API key kun je meteen gebruiken voor je website. Om te weten wat je in je HTML-document moet invoeren en waar de sleutel moet worden geïntegreerd, heeft Google een stap-voor-stap handleiding gemaakt.
Wat kost het gebruik van Google Maps API’s?
Het gebruik van Google programmeerinterfaces is niet altijd aan kosten verbonden. Het hangt ervan af wat voor een soort website of app je beheert. Bij bijvoorbeeld projecten die iedereen gratis kan gebruiken, betaal je voor de meeste API’s alleen als je website meer dan een bepaald aantal bezoekers per dag of per maand heeft. Wanneer je website of app de locatie van mensen of objecten volgt, kost het integreren van Google Maps API’s altijd geld. Een overzicht van de verschillende prijs- en gebruiksmodellen vind je hier. Op deze overzichtspagina kun je ook de contactinformatie vinden van het verkoopteam van Google als je twijfelt welk model het beste bij jouw project past.
Google Maps toevoegen aan je website: een kwestie van knowhow en toepassing
De voordelen van het integreren van de Google online kaartendienst in je eigen website zijn duidelijk: je laat je bezoekers eenvoudig zien hoe ze je kunnen vinden, terwijl de webserver van Google het werk doet en het jouw webserver geen extra capaciteit kost. Om deze reden heeft Google in 2012 het professionele gebruik voor webprojecten met veel bezoekers gedeeltelijk betaald gemaakt. Voor deze projecten, net als voor commerciële apps en websites, is het gebruik van Google Maps API’s verplicht voor het insluiten van de kaarten.
Wanneer je in de kaart meer dan alleen een markering van je locatie wil, heb je kennis nodig van JavaScript en HTML. Wie Google Maps wil integreren in een site die alleen voor privédoeleinden wordt gebruikt en ook geen grote hoeveelheden bezoekers verwacht, kan voor het insluiten het best gebruikmaken van het eenvoudige iFrame.