Google maps integreren

uit de cursus Website bouwen met WordPress

Hallo vreemdeling,

wat leuk dat je onze site bezoekt. Bekijk gerust een paar video's en als het je bevalt kun je altijd abonnee worden.

Automatisch afspelen

Geef een reactie of stel een vraag

Geef een reactie

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Website bouwen met WordPress

perm_identity Walter van Rooij | video_library 34 video's | query_builder 3:06:49

Content Management Systeem (CMS) WordPress

Met het gratis Open Source CMS WordPress kun je professionele websites maken voorzien van alle functionaliteiten die je maar wenst. WordPress maakt gebruik van Thema’s voor de vormgeving en plug-ins voor de functionaliteiten.

Omdat WordPress wereldwijd een enorm populair CMS is en de basis vormt voor miljoenen websites is het een zeer betrouwbaar CMS waar continu gewerkt wordt aan veiligheid en functionaliteit. Vanwege de populariteit worden er ook veel plug-ins ontwikkeld door derden.

Je leert…

In deze cursus leer je hoe je met WordPress een website opzet met behulp van templates. We behandelen het downloaden en installeren van de meest belangrijke plug-ins. Denk aan SEO, Google maps, contactformulieren, privacyverklaring (GDPR), fotogallerijen etcetera

Uiteindelijk zorgen we ervoor dat je precies weet hoe je jouw website online op het world wide web krijgt. Binnen no time ben jij online.

Deze les gaat over het installeren

van een Google Map op je website.

Google Maps, bekende landkaarten gemaakt door Google

kun je gemakkelijk invoegen in je eigen website

dat kan je doen in een Post of in een Page

dus tussen de tekst of eronder

maar je kan ook een Google Map plaatsen in een Widget

en die op een van de beschikbare Widget-posities plaatsen in je website

Het plaatsen van een Google Map

kan op twee manieren.

De ene manier maakt gebruik van een Plugin

die zal ik in een andere les behandelen

de methode waar ik het nu over wil hebben

is de methode van een Embedded I-frame

Ik ga je laten zien hoe het werkt

Ik zou op mijn website graag

een Google Map plaatsen die het adres aangeeft van House of Media in Groningen.

ik heb in Google Maps het adres ingevoerd

dat ik wil laten zien op mijn website

en om deze kaart over te nemen en te plaatsen op- onze Wordpress-website

gebruik ik de functie Delen.

De functie Delen impliceert dat je een URL van deze kaart

kan doorspelen aan een vriend of een kennis.

maar als ik deze kaart wil plaatsen op mijn Wordpress-website

gebruik ik de functie Een kaart insluiten.

en daar krijg ik te zien dat ik een Iframe kan kopiëren.

Een Iframe is een stuk HTML-code

dat op een website binnen deze code een andere website vertoont.

Deze code zou ik dus willen kopiëren

en daarna ga ik naar mijn website.

Hier ben ik in mijn website.

Ik zou de Google Map graag willen plaatsen

onderaan de pagina

van deze Homepage.

Dus ná de tekst Have Fun.

Daarvoor log ik in op de achterkant van de website en ik ga naar Pages.

Mijn homepage heeft de naam Sample Page.

die open ik.

Hier ben ik in de Editor van mijn Sample Page

Ik scroll naar beneden.

en daar vind ik het onderste gedeelte van mijn tekst

en daar vind ik het onderste gedeelte van mijn tekst

daaronder wil ik graag een Block toevoegen.

Het Block dat ik wil toevoegen

vind ik in de categorie Formatting.

Daar heb ik verschillende keuzes

De haakjes lijken het meest voor de hand liggend, ik kies: Code

en ik zie inderdaad dat ik hier de gelegenheid heb om code in te voeren.

Ik plak de code

en ik Save de pagina.

En ik ga aan de voorkant van de website kijken wat het resultaat is.

Ik Refresh en ik scroll naar de plek waar ik de kaart verwacht.

Helaas, de kaart verschijnt nog niet.

Ik ga je laten zien waarom dat is en wat je eraan kan doen.

Ik ga terug naar de achterkant van de website.

Hier ben ik terug in de Editor en ik zie de code in mijn Block staan.

Het addertje onder het gras is

dat code plakken in de Visual Editor

niet het gewenste resultaat geeft.

Ik laat je zien hoe je dit oplost.

Ik klik op het Opties-blok

helemaal rechts in het venster

en daar zeg ik dat ik geen Visual Editor wil, maar een Code-Editor.

Die laat me de pagina zien in HTML-code.

en ik zie hier dat de Iframe-code

die onderin beeld staat

door Wordpress een beetje is veranderd,

en dat is nou precies waarom alles misloopt.

Wat ik hier het beste kan doen is de code die ik van Google kreeg

direct plakken in de Code-Editor

Het Blok dat ik hier heb staan gooi ik in zijn geheel weg

en op deze plek

Paste ik, plak ik, opnieuw de Iframe-code.

Je ziet dat nu de code Iframe tot en met /Iframe

in zijn geheel bewaard wordt en niet veranderd wordt.

Ik Save opnieuw

en ga naar de voorkant van de website waar ik Refresh.

en daar zie ik dat het nu wel gelukt is.