Dag 18: Google maps kaartje toevoegen

Vandaag gaan we een Google maps kaartje embedden op onze contact pagina, zoals te zien is via deze link: http://www.joomlain24dagen.nl/website/contact

Dat klinkt misschien ingewikkeld maar het is vrij makkelijk.

Stap 1: Zoek je locatie.

Ga naar Google maps en zoek de locatie die je wilt tonen. Tip: zoek op het adres en niet op de naam. Misschien krijg je meerdere ‘markers’ in je kaart en die komen straks ook je website te staan. Zoom in / uit tot je tevreden bent over de kaart.

Klik dan op op het ketting symbool links van de google maps kaart.

link

Je krijgt dan een pop-up scherm te zien met daaronder de embedd code. Je kunt deze nu al selecteren maar je kunt beter op de link hieronder klikken “Deze kaart aanpassen en als voorbeeld weergeven”

popup

Stap 2: Kaartje finetunen.

Hier kun je de maat van het kaartje gemakkelijk aanpassen en meteen zien hoe groot het wordt. En je kunt tevens kijken of de tekst balon mooi centreert en goed te zien is.

finetunen

Vind je het goed zo? Dan selecteer je de code uit het onderste vak en kopieer je deze naar je klembord. Doe dit heel precies! Vergeet geen tekens, want dan werkt de code niet meer.

Stap 3: Google maps code embedden.

De laatste stap doe je in het beheer gedeelte van Joomla. Je gaat naar het artikel waar je de google maps in wilt tonen. Dit doe je door te klikken op ‘inhoud’ en daarna ‘artikelen’. In ons geval willen we de kaart op de contact pagina en hiervoor hebben we al een artikel gemaakt dat ‘contact’ heet.

Je klikt op de naam van het artikel om deze te bewerken. Zit je in het artikel, dan zie je de WYSIWYG editor voor je. In elke WYSIWYG editor die we kennen voor Joomla zit de knop “Source” of zoals bij onze website “Edit HTML Source”.

htmlsource

Door op deze knop te drukken zie je de tekst en plaatjes van je artikel in HTML opmaak. Maak je geen zorgen, je hoeft hier niets in te bewerken. Het enige wat we moeten doen is de Google Maps code die als het goed is nog steeds in ons klembord zit te plakken bovenaan de pagina.

source

Wanneer je nu terug gaat naar de gewone mode. Dit doe je door op “update” te klikken. Dan zie je een geel vlak. Dit gele vlak staat voor de Google maps code die je net hebt ingevoegd. Je kunt dit vlak nog eventueel centreren, rechts of links uitlijnen. Verkleinen en vergroten gaat niet. De grote van de kaart is bepaald in de code. Vandaar dat we deze vooraf moesten bepalen bij het finetunen van de Google maps kaart.

Klaar.

Wanneer je nu het artikel opslaat. Zul je aan de voorkant van je website de Google maps kaart zien en hebben we een Google Maps kaart ge-embedd.

klaar

Er zijn andere manieren om Google Maps kaartje te maken. Zo kun je gebruik maken van 3rd party plugins die je kunt installeren en de kaart tonen. Het is echter de vraag of je voor zo’n simpele handeling een extra plugin moet installeren. Immers een extra plugin zorgt voor extra code, die ge-update moet worden. Extra code zorgt voor een tragere website en extra mogelijkheden voor hackers om in de website te komen.

Laatst gewijzigd op: