Geo-tagging display problem with certain template

[Phish]

Hi,
I've got a Joomla 3.4.8 installed with a few templates and Phoca Gallery 4.2.2. We decided to use the template "Music free" as default (gavick.com/joomla-templates/music-free).
Unfortunately, any inserted geo-tagging GoogleMaps is displayed only gray. However, you can navigate, zoom, etc. Firefoxes network monitor shows, that new tiles are loaded from google's server. When I switch to another theme for such a page including a geo-tagging map, it works flawlessly. Also tested on different computers, different browsers, and different connections - no change in behaviour.

I cannot see any javascript error, the network monitor tells that all tiles are loaded in each scenario, and as far as I understand it, there is no CSS problem either. Maybe you have any quick hints or could name tools which might help me to find the issue?

Here are some screenshots:
Map is gray in "music free" theme; pins are located correctly; map is responsive; network monitor shows traffic when I pan or zoom or interact generally.
Also note, that the zoom-controls and the street-view-guy are not displayed in the bottom right corner.

http://fs5.directupload.net/images/160113/xzbflqvr.png

Working perfectly in another theme, here "Allrounder":

http://fs5.directupload.net/images/160113/dfammh5a.png

In case it does NOT work, this is what the Firefox network monitor shows as traffic to google:

http://fs5.directupload.net/images/160113/x2pkrnbf.png

In case it DOES work, the traffic looks like this:

http://fs5.directupload.net/images/160113/at7b7kcw.png

The code that is inserted by Phoca Gallery to display the map is exactly the same with both themes.
However, the themes have different containers wrapped around.
Thats the tree view to the first tile of the map, which I selected to see its CSS properties (case 'does NOT work'):


The tree expanded to the first map tile in the case it DOES work:


I would appreciate any help, already spent too many hours searching and debugging...
Thanks in advance guys,
Greetings Flo

[christine]

Hi,

your screenshots are not readable. Pls provide us with an URL, to get an idea, propably.
Kind regards, Christine

[Phish]

Hi,
the forum displays them only smaller than they really are.
I added the links to the images just below for convenience, but you could right-click + view image to see them in full size.
As it is not allowed to have more than 5 links per post, here are clickable links to the last two screenshots:
http://fs5.directupload.net/images/160113/kzojmip9.png
http://fs5.directupload.net/images/160113/vapjuh45.png

Greetings Flo

[Jan]

Hi, what you exactly mean with the themes? Do you mean a Joomla! template?

If yes, does the template (one of them) overrides Phoca Gallery output?

Jan

[Phish]

Hi Jan,

thanks for your reply.
Yes, I ment a Joomla! template. And no, the Phoca Gallery output is exactly the same.
I can provide an account (by PM) for testing if needed,

Flo

[Jan]

Hi, just let me know the link to the site where this occurs so I can test it.

Thank you, Jan

[Phish]

Hi Jan,
how can I send you the login data?
Private Messaging is not allowed for a forum newbie like me,

thanks, Flo

[Jan]

Hi, the map is hidden by this CSS style:

http:// ... /templates/gk_music_free/css/joomla.css

Disabling this style will display the map, so the conflict should be found in this CSS.


Jan

[Phish]

Hi Jan,

thanks for looking into this!

As you pointed out, there is a style in .../templates/gk_music_free/css/joomla.css that prevented Google Maps from work:

Code: Select all

section img { /* to avoid problems with too big images in category/blog view */
	height: auto !important;
	max-width: 100% !important;
}

I commented out the "max-width" element and now it is working correctly - problem solved!

If you don't mind it would be interesting to know how you found out. Did you disable one sheet after another? Did some tools like Firebug point you to that direction?

Thank you again,
Flo

[Jan]

Hi, in Firefox - Development Tool - CSS - Disable Styles - Disable Individual Style Sheet - and disabling them step by step tells which part then hides it - of course there are many other development tools to hide the styles (e.g. Firebug too) and many other ways (disable them e.g. per source edit, etc.)

Jan