Maandag 4 november en het is weer tijd voor JUG073. Op het menu van vanavond een Spaanse Kip en een fris biertje. Daarna de presentatie over "Google Maps verwerken in je website" van Hans Kuijpers.

Google Maps

Hans Kuijpers heeft een flink aantal pagina's met toffe links om zo een hands-on presentatie te geven over de implementatie van Google Maps op je website.

Een kaart of locatie delen

  1. Open Google Maps op uw computer.
  2. Ga naar de routebeschrijving, kaart of Street View-afbeelding die u wilt delen.
  3. Klik in de linkerbovenhoek op Menu Menu.
  4. Selecteer Kaart delen of insluiten. Als deze optie niet wordt weergegeven, klikt u op Link naar deze kaart.
    • Optioneel: Vink het selectievakje naast 'Korte URL' aan om een kortere link naar de webpagina te maken.
  5. Kopieer en plak de link overal waar u de kaart wilt delen.

Een kaart of routebeschrijving insluiten

Opmerking: Verkeersinformatie en andere Maps-gegevens zijn soms niet beschikbaar op de ingesloten kaart.

  1. Open Google Maps.
  2. Ga naar de routebeschrijving, kaart of Street View-afbeelding die u wilt insluiten.
  3. Klik in de linkerbovenhoek op Menu Menu.
  4. Klik op Kaart delen of insluiten.
  5. Klik op Kaart insluiten.
  6. Kies links van het tekstvak de gewenste grootte door op de pijl-omlaag Pijl omlaag te klikken.
  7. Kopieer de tekst in het vak. Plak de tekst in de HTML van uw website of blog.

Voorkom dat iFrame wordt gewist door Joomla

Een standaard Joomla installatie "schoont" content op bij het opslaan. Er worden scripts, event attributen (onclick, onmouseover enz) en style tags verwijderd. Dit is in te stellen per gebruikersgroep. Ga hiervoor naar Joomla Administrator > Systeem > Algemene Instellingen > Tabblad Tekstfilters. Wijzig aldaar per gebruikersgroep de settings.

Een veel gebruikte editor in Joomla is JCE. Ook verwijderd standaard een aantal tags, waaronder iFrames. Om iFrames toe te staan ga je naar Joomla Administrator > Componenten > JCE > Profielen. Open de gewenste Profiel en ga via het tabblad Parameters naar "Media Support". Zet IFrames daar op JA.

Responsive iFrame maken

De standaard iFrame voor Google Maps is niet responsive. Dat is niet zo mooi. Maar met een paar eenvoudige aanpassingen kan deze responsive gemaakt worden.

Wrap de iFrame code <div class="media-container><iframe-met-al-zijn-attributen></iframe></div>. Vervolgens helpt de volgende CSS code er voor dat de iFrame responsive is:

.media-container {
position: relative;
overflow: hidden;
margin-bottom: 16px;
}

.media-container:before {
display: block;
float: left;
content: " ";
padding-top: 56.25%;
}

.media-container:after {
content: " ";
clear: left;
display: table;
}

.media-container iframe {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}

Google Maps API Key

Sinds enige tijd moet je je credit card gegevens invullen bij Google om gebruik te kunnen maken van Google Maps. Doe je dit niet, dan verschijnt er donkere transparante laag over de map heen en een tekst dat de getoond Google Maps alleen voor developer purpose only is. Bijvoorbeeld op de pagina https://www.uitzinnig.nl/cat/0/filmclub-schijndel.aspx?loc=f07a4261-04ee-4cdd-a05e-8237e9375d8b Open aldaar ook de Javascript console en zie dat Google daar ook nog een melding geplaatst heeft:

You are using this API without a key. See https://developers.google.com/maps/documentation/javascript/error-messages?utm_source=maps_js&utm_medium=degraded&utm_campaign=billing#api-key-and-billing-errors

Ga naar de pagina en lees de uitleg hoe een en ander opgelost kan worden. Of ga direct naar https://developers.google.com/maps/documentation/javascript/get-api-key om een API Key aan te maken. Deze API Key is nodig om je te authenticeren bij Google Maps. Onderstaande call is nodig om deze connectie te maken. 

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
 
type="text/javascript"></script>

Google Maps met JLayout

De documentatie van Google is zeer uitgebreid, maar uiteindelijk komt het plaatsen van een Google Map met eigen code, zonder module of extensie, op het volgende neer:

  1. Plaats een div met een id waar de Google Map aan gekoppeld moet worden
    <div id="google-map"></div>
  2. Om verspringen van het scherm te voorkomen voeg je een beetje css toe die er voor zorgt dat de benodigde ruimte al in beslag genomen wordt. 
    <style>
     
    #google-map {
       
    width: 100%;
       
    height: 400px;
       
    background-color: grey;
     
    }
    </style>
    Gevolg is dat er een 100% breed grijs vlak staat van 400px hoog. Hierin zal de Google Maps gaan komen. 
  3. Plaats het script van Google Maps, met de eerder aangemaakte API Key
    <script>
    // Initialize and add the map
    function initMap() {
     
    // The location of Uluru
     
    var uluru = {lat: -25.344, lng: 131.036};
     
    // The map, centered at Uluru
     
    var map = new google.maps.Map(
          document
    .getElementById('google-map'), {zoom: 4, center: uluru});
     
    // The marker, positioned at Uluru
     
    var marker = new google.maps.Marker({position: uluru, map: map});
    }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>

Bovenstaande functie maakt verbinding met Google API en verzoek om iets te mogen doen. Daarbij komt de callbak "initMap". Dit is de naam van je functie die erboven staat. Deze functie zoekt het element met id=google-map om daar een te centreren, met schaal 4 in te zoomen en een marker te plaatsen op de opgegeven latitude en longitude. 

Door al het bovenstaande te verwerken in templates/jouw-template/html/layouts/google-map.php heb je een JLayout gemaakt die je waar dan ook kunt opvragen. Dit doe je door het plaatsen van echo LayoutHelper::_('google-map'); in een PHP stuk van een override.

Het stukje zoom en center zijn mapOptions die verder uitgebreid kan worden. Bijvoorbeeld met Styling. Ook hierover veel documentatie via https://developers.google.com/maps/documentation/javascript/styling. Middels de website https://mapstyle.withgoogle.com/ kun je eenvoudig een styling aanmaken of bestaande downloaden. De aangeboden json string verwerk je al value van style, net zoals 4 verwerkt is als value van parameter zoom. 

En vanaf hier zijn de opties legio. De locatie in het voorbeeld hierboven is hard-coded. Dit kan ook dynamisch gemaakt worden, door de JLayout uit te breiden met locatiegegevens lat en long die vanuit een com_content item komen. Bijvoorbeeld door de volgende code te plaatsen in een com_content article echo LayoutHelper::_('google-map', array('lat' => -25.344, 'long' => 131.036);. Daarmee is het nu nog steeds hard code, maar een stuk dynamischer. De volgende stap is dat de lat long informatie te verplaatsen naar een custom field. De volgende Custom Field plugin kan daarbij helpen: https://www.richeyweb.com/forum/extension-discussions/196-free-field-plugins En vanuit die custom field kan de informatie doorgegeven worden aan de JLayout. 

Google Map JLayout in com_content category

Met onderstaande alternate layout heb ik op de website van een klant de Custom Field Location informatie doorgestuurd naar de Google Map JLayout. Hiermee kun je dus de informatie van meerdere markers doorgeven aan Google Maps

<?php
if (!empty($this->items)) :
$data = array();

foreach ($this->items as $item)
{
$itemFields = $item->jcfields;
foreach ($itemFields as $itemField)
{
$itemFields[$itemField->name] = $itemField;
}

$lat = null;
$long = null;
$locationDealer = $itemFields['locationdealer'];

if (!empty($locationDealer->rawvalue))
{
$locationArray = explode(',', $locationDealer->rawvalue);
$lat = $locationArray[0];
$long = $locationArray[1];
}

if ($long && $lat)
{
$data[] = array(
'id' => $item->id,
'title' => $item->title,
'link' => Route::_(ContentHelperRoute::getArticleRoute($item->slug, $item->catid, $item->language)),
'longitude' => $long,
'latitude' => $lat
);
}
}

?>
<section class="article__headerimage">
<?php echo LayoutHelper::render('google-map', json_encode($data)); ?>
</section>

<?php endif;

Gebruik de Google Documentatie om de markers te plaatsen en te stylen. 

Veel succes en plezier. 

Dr Joomla

vraag: in het nieuwe jaar komt Joomla 4 uit. Dit is een major upgrade. Kunnen we weer dezelfde ellende verwachten als bij eerder major upgrades. 
antwoord: Joomla 3.x wordt nu al voorbereid op de komst van Joomla 4. Er wordt hard aan gewerkt om de ellendige overgangen van voorheen te voorkomen. Maar let op... de voorbereidingen die getroffen worden hebben betrekking op Joomla core code en niet op de 3th party extensies. Het devies luidt om het aantal extensies waar mogelijk te reduceren en de extensie developer te vragen naar de plannen voor de J4 migratie. Omdat Joomla 4 met Bootstrap 4 zal werken kun je de template hier al op voorbereiden. Testen, testen en testen. 

vraag: Ondersteunen de templates van RSJoomla bij release van Joomla 4 ook Bootstrap 4?
antwoord: navraag via een support ticket bij RSJoomla leert ons van wel: "Yes, since Bootstrap 4 will be the new standard once Joomla! 4 is released, we will also update our templates to support this Bootstrap version."

vraag: situatie is een Helix template in een PageBuilder website met Hikashop. De breadcrumbs worden boven de titel geplaatst, terwijl deze onder de titel moeten komen. .... je had er bij moeten zijn om de beelden voor ogen te halen. 
antwoord: In tegenstelling tot een override op Hikashop om de breadcrumbs aldaar te verwerken is de oplossing een stuk eenvoudiger. Open de Helix Template style en ga naar het tabblad Layouts. Aldaar kan tussen de titel en output van component een nieuwe modulepositie gemaakt worden alwaar de breadcrumbs getoond kan worden. 

vraag:  Hoe wijzig ik de HTML output van Hikashop, welke verwerkt zit in een class in administrator?
antwoord: Hoe stom is het dat frontend output verwerkt zit in administrator? Gelukkig dat de Hikashop class override toegepast kan worden. Die vraag had Hans Kuijpers ook eens gesteld bij Hikashop forum: https://www.hikashop.com/forum/checkout/878018-create-override-for-admin-classes-field-php.html
En het antwoord was terug te vinden in een andere post op het forum: https://www.hikashop.com/forum/product-category-display/873470-watermark.html#184987
In het kort: /template/jouw-template/html/com_hikashop/administrator/classes.field.override.php. In het voorbeeld hieronder heb ik de display functie uit hikashopFieldClass gekopieerd, maar nog niet gewijzigd. De output is daarmee nog hetzelfde, maar wel al in je eigen template. Nu kun je het gaan wijzigen. Veel plezier

<?php
defined('_JEXEC') or die('Restricted access');

include_once(JPATH_ADMINISTRATOR . '/components/com_hikashop/classes/field.php');

class hikashopFieldClassOverride extends hikashopFieldClass
{
function display(&$field, $value, $map, $inside = false, $options = '', $test = false, $allFields = null, $allValues = null, $requiredDisplay = true)
{
$field_type = $field->field_type;
$obj = $this->_getFieldTypeClass($field);
if (get_class($obj) == 'hikashopFieldItem')
return 'Plugin ' . $field_type . ' missing or deactivated';

if (is_string($value))
$value = htmlspecialchars($value, ENT_COMPAT, 'UTF-8');

$html = '';

if ($requiredDisplay && !empty($field->field_required))
{
$html .= ' <span class="hikashop_field_required">*</span>';
}
$html .= $obj->display($field, $value, $map, $inside, $options, $test, $allFields, $allValues);

return $html;
}
}

Handige links

Volgende keer

Volgende JUG is op dinsdag 3 december in Bar le Duc in ’s Hertogenbosch. Vragen voor Dr. Joomla kun je kwijt als reactie onder de aankondiging.

Reageer

1000 Resterende tekens