Uitbreidingen-Google maps integreren (Google Maps)

uit de cursus Starten met Joomla (CMS)

Uitbreidingen-Google maps integreren (Google Maps)
Geef een waardering

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.

Starten met Joomla (CMS)

perm_identity Walter van Rooij | video_library 30 video's | query_builder 02:57:24

Volg nu de online cursus Joomla!

Leer hoe je complexe websites kunt maken, met diverse functionaliteiten als een contactformulier, fotogalerij, zoekfunctie tot het creëren van een meertalige website?

Met Joomla bouw je een complete en complexe website met allerlei functionaliteiten zonder dat je verstand hoeft te hebben van programmeren.

Joomla is een CMS (Content Management Systeeem)

Joomla behoort samen met WordPress en Drupal tot de meest populaire CMS systemen. Veel webbedrijven en -designers maken gebruik van een CMS om hierin complexe websites voor hun klanten te bouwen. Waarom zou je het wiel opnieuw gaan uitvinden als er CMS’en bestaan die het fundament voor de website al voor je klaarzetten.
Het grote voordeel van een CMS is dat de klant/opdrachtgever zelf zorg kan dragen voor de content van de website.

Wat ga je in deze online cursus leren?

Je leert allereerst hoe je het programma installeert op je eigen computer zodat je eerst lokaal de website kunt bouwen. Aan het einde van de cursus leer je hoe je de website migreert naar de server waarop de website gehost gaat worden. Je leert hoe je een template installeert en daarna de website gaat inrichten met artikelen, categoriën, menu-onderdelen, modules, plugins en componenten.

Je leert hoe je moet omgaan met de database waar de inhoud van de website in bijgehouden wordt. Hoe je veiligheidsmaatregelen neemt om de database en de website te backuppen. Kortom alle basisvaardigheden die je nodig hebt om een website met Joomla te bouwen, in te richten en online te zetten.

Voor wie is deze cursus bedoeld?

Wil jij leren websites te maken voor klanten en bedrijven die zelf hun site willen vullen met content? Je wilt het meteen goed aanpakken en een gebruikersvriendelijke website maken die goed gevonden kan worden. Dan maak je met Joomla een goede keuze. Je hebt geen enkele voorkennis nodig om deze online cursus te kunnen volgen. Uiteindelijk zul je wel baat hebben bij kennis van html en css. Maar dat kan ook prima na het volgen van deze cursus.

In deze les gaan we een Google-maps plattegrond aan de website toevoegen.

Om een Google maps plattegrond aan een Joomla website toe te voegen

zijn er een aantal Plug-ins beschikbaar.

Maar zonder Plug-ins te gebruiken kan het natuurlijk ook.

Het werkt met het principe van de iframes,

en Google helpt ons daarbij.

Ik ga om te beginnen naar Google maps om daar een plattegrond op te zoeken.

Ik tik gewoon Maps

in het zoekveld van Google en ik kom bij Google maps.

Daar typ ik het gewenste adres.

Daar typ ik het gewenste adres.

en hier vind ik de kaart die ik nodig heb.

Om deze kaart nu in mijn Joomla website te krijgen, klik ik

in Google maps op de functie Delen.

In dit scherm is de URL te zien en dus ook te kopiëren

maar liever nog wi ik de functie Kaart insluiten gebruiken.

en daar zie ik dat de code via een zogenaamd iframe werkt.

Een iframe is een HTML-code, die

binnen zijn kader een hele website kan vertonen binnen een website.

Klinkt goed, daar ga ik gebruik van maken.

Ik kopieer deze code

en ik ga ermee naar Joomla.

Hier ben ik in mijn Joomla-website.

Ik heb de achterkant nodig.

Ik ben hier in de achterkant van Joomla

ik ga naar Content >

Articles.

en ik kies een willekeurig artikel

waar ik de plattegrond in ga plaatsen.

Hier is de Editor

met de al aanwezige inhoud van de betreffende pagina.

Ik kan nu simpelweg de code kopiëren en plakken

Direct plakken in de Editor is niet het beste plan.

In de Editor zien we Source-code-haakjes, Chevrons genaamd.

Daar klik ik op.

Nu krijg ik de inhoud van de pagina te zien, maar dan in HTML-code

Nu krijg ik de inhoud van de pagina te zien, maar dan in HTML-code

Nu krijg ik de inhoud van de pagina te zien, maar dan in HTML-code

en hier

ga ik mijn iframe invoegen.

ok.

Maar wat blijkt: ik krijg niets te zien.

We hebben hier te maken met een lastig probleem van de standaard-Editor van Joomla.

TinyMCE genaamd.

Die laat namelijk niet zomaar elke HTML-code toe. Uit veiligheidsoverwegingen.

Op zichzelf een goed idee, maar in dit geval helemaal niet wenselijk.

Wat ik zou kunnen doen, maar in dit geval helaas niet gaat werken,

ga ik jullie toch even laten zien.

Ik close dit artikel,

Ik ga naar Extensions > Plugins, want

Ik ga naar Extensions > Plugins

de Editor die we hier in Joomla gebruiken

is een plugin.

is een Plugin. Hij heeft de naam

TinyMCE

en als ik daarop zoek, dan vind ik de Editor ook.

en ik heb de gelegenheid om hem te openen. Als ik naar beneden scroll kom ik daar tegen

dat hij elementen als iframes wel degelijk toestaat.

en toch lukt het niet.

Dit is een vervelend probleem en ook een bekend probleem.

Een hoop mensen zijn om die reden geen fan van de standaard Editor TinyMCE

en kiezen liever een andere oplossing,

namelijk de JCE-editor.

Omdat ik dat eigenlijk ook vind, kies ik ook voor de JCE-editor

Ik ga laten zien waar ik hem haal en hoe ik hem installeer.

Ik Close de TinyMCE-plugin.

en ik ga proberen een betere Editor te verkrijgen, de JCE-editor.

Daarvoor ga ik naar Extensions > Manage

wat ik wil is een Install.

Ik ga die Install op het web regelen.

Ik heb hier de gelegenheid om een Plugin te zoeken van mijn keuze,

ik zocht de JCE-editor

en daar is de JCE-editor. Ik selecteer hem,

De JCE-editor is geïnstalleerd.

Vervolgens moet ik in Joomla, in het Control-panel,

aangeven dat ik ook wil dat de JCE-editor de standaard editor is

die de achterkant van het systeem in gebruik neemt.

Daarvoor ga ik naar System > Global Configuration.

Ik ben hier in het scherm Global Configuration,

en ik zie hier staan dat de Default editor editor TinyMCE is.

Maar ik heb JCE geïnstalleerd en ik switch. Ik Save and Close.

en voordat ik verderga, ga ik deze plugin

JCE editor, eerst configureren.

Ik moet namelijk nog een kleine wijziging doen waar het allemaal om begonnen is.

Hij moet iframes toelaten.

In tegenstelling tot de TinyMCE-editor

zit de JCE-editor nu als een component in het systeem.

Dat houdt vaak in dat er veel meer instellingen mogelijk zijn.

en ook in dit geval is dat waar.

Ik ga naar Components > JCE-editor.

De specifieke aanpassing die ik wil moet ik maken in Editor Profiles

daar kies ik het in gebruik zijnde profiel uit.

Aan het vinkje kan ik zien dat het Default profiel in gebruik is.

Daar is een tabblad Plugin-Parameters.

en dat klik ik aan. Ik scroll naar beneden

om daar Media-support tegen te komen.

en als ik daarop klik

dan zie ik dat Allow iframes op No staat.

dus op dit moment staat de JCE-editor nog steeds niet goed ingeregeld.

Maar dat ga ik nu wijzigen door op Yes te klikken. Ik Save and Close.

en nu heb ik de gelegenheid om eindelijk mijn Google-maps iframe in een artikel van Joomla te plaatsen.

Dat ga ik doen. Ik ga naar Content > Articles

Ik selecteer opnieuw Nieuw artikel,

hier is het artikel

en ik zie inderdaad dat de editor-interface,

het aangezicht van de Editor, is veranderd.

Ik heb wat meer mogelijkheden, lijkt het.

Nou, dat is waar, ik heb om te beginnen de mogelijkheid

om mijn iframe-code te plakken.

daarvoor ga ik naar het Code-tabblad.

daar zie ik de code

ik plaats mijn cursor aan het einde van de code, geef een regeltransport

en plak de code op zijn plek.

Als ik nu naar het tabblad Editor ga,

zie ik dat er inderdaad iets van een iframe zichtbaar wordt.

Ik Save and Close.

Nu is het ten slotte zaak om te kijken naar de voorkant van de website.

Ik wil natuurlijk weten of daar ook de Google map te zien is.

Hier ben ik in de voorkant van de website, Ik refresh

en ik ga naar Nieuw artikel.

en inderdaad, daar staat de plattegrond.

Het positioneren van een iframe is gelukt.

Ditzelfde zou ik ook kunnen doen met een plugin, daarvan volgt een andere les.