Joomla! - iCagenda non mostra mappa

iCagenda, è uno dei migliori componenti per la gestione di eventi che si possono utilizzare all'interno del CMS Joomla!
Affidabile, semplice ed intuitivo, la versione free dalla versione pro, differisce per pochi piccoli particolari:

• La presenza del modulo lista eventi.
• La possibilità di cancellare la frase powered by iCagenda in fondo alle pagine gestite dal componente.

La semplicità con la quale si possono gestire eventi, newsletters e archiviazione degli eventi, nonché condividerli sui social network, lo rende sicuramente un validissimo strumento da integrare nel famoso CMS.
Fermo restando, che nella scelta dei componenti, va scelto quello più affidabile, attento agli aggiornamenti di Joomla! ed eventuali problemi di sicurezza, mi sento di consigliarlo dopo averlo usato più volte e su diversi siti.

Uno dei siti sui quali lo ho installato e configurato, è italiankoiclub.it (IKC), sito che rappresenta l'associazione italiana degli amanti di queste meravigliose creature, le carpe broccate giapponesi, Nishikigoi o meglio conosciute come carpe Koi.
In effetti, è il sito ufficiale dell'Italian Koi Club e come tutte le associazioni che si rispettino, hanno necessità di uno strumento che consenta di pubblicare riunioni ed eventi ai propri associati che ne visitano le pagine o ricevono gli aggiornamenti attraverso le mail.
Per questo, è stato integrato nel website dell'associazione, iCagenda.

Purtroppo, non tutti i template vanno estremamente d'accordo con questa estensione che molto spesso soffre di problemi legati all'uso improprio delle jQuery (soprattutto nella versione precedente di Joomla!, la 2.5) e di regole css che controllano i comportamenti generali di alcuni tag HTML.

Nel mio caso, o meglio, nel caso di italiankoiclub.it, il problema era che le mappa Google Maps nella view dell'evento singolo, non veniva visualizzata interamente.
La mappa veniva caricata solo parzialmente e a parte il marchio Google, i controlli Mappa/Satellite e poco altro, lasciava lo spazio ad uno sfondo grigio sul quale il marker rosso si perdeva.
Nella console JavaScript invece, compariva solo l'errore relativo allo script JS di Google Maps: A Network error occurred.

Ricerca jQuery Conflict

Di istinto, conoscendo molto bene le jQuery, ho svolto una serie di prove volte a eliminare e correggere tutte le inclusioni in eccesso delle suddette librerie.

Ma non c'erano componenti, moduli o plugin che ne giustificassero il malfunzionamento. Infatti, vedendo il codice sorgente della pagina, non vi era traccia di richiami doppi o maldestri a librerie jQuery.

Soluzione: CSS Conflict  

La soluzione, è arrivata dal forum ufficiale iCagenda, che sebbene non dicesse di preciso la soluzione identificava perfettamente il problema:

TOPIC: [SOLVED] Google Maps Problem

Per la soluzione, ecco qui la pagina su stackoverflow.com che suggerisce addiritura il codice da inserire nel file css per eliminare il problema:

Google Maps API V3 : weird UI display glitches (with screenshot)

La soluzione, da me adottata (dopo un paio di ore di ricerche e grattacapi):

#map_canvas img { max-width: none; }

Se non dovesse funzionare, provate con questa direttiva:

img { max-width: none !important; }

Sperando che eviti malditesta ad altri che come me si ritrovino alle prese con iCagenda e la sua antipatia per certi template...