[4.0.0 Alpha3] Google Map Controls - Not Visible

[jb80]

Hi Forum Users,

For the last few weeks, I have migrated across to Gallery [4.0.0 Alpha3]. Overall this has been a good experience. Some of the earlier bugs were resolved in the Aplha changes, notably for me, was the multiple image upload was causing problems. This seems to be fixed now.

My Gallery configuration is using "Display Geotagging (Categories)" enabled. So the Google Map with Categories is displayed on the home page.

Since upgrading to [4.0.0 Alpha3] I have a strange problem where the Google Map Controls for the "scale" function is not properly visible. The functions operate if I hover the mouse icon over its expected position, but the scale picture is not properly visible. The appearance of the Google Map Controls has been distorted.

The problem doesn't exist in [3.2.3] on another Joomla build. I compared the functions between versions and they're exactly the same. (I have images of both examples but was unable to upload them on this forum)

Temporary image link
http://awesomescreenshot.com/0d2xqqi71

Perhaps someone can give me some pointers.

Code: Select all

function getPhocaMap(){
   if (tstPhocaMap.offsetWidth > 0) {
var phocaLatLng = new google.maps.LatLng(25, 30);
var phocaOptions = {
zoom: 2,
center: phocaLatLng,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DEFAULT},
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.DEFAULT},
scaleControl: true,
scrollwheel: true,
disableDoubleClickZoom: false,
mapTypeId: google.maps.MapTypeId.ROADMAP

[Jan]

Hi, there were no changes regarding this, maybe this can be caused by some conflict e.g. with template?

[jb80]

Hi Jan,

This was my original thought, maybe a problem with the template. I have tested various templates unfortunately the behaviour is the same.
# Protostar - J3 Default
# Meet Gavern - By GavickPro

I have also tested on various client pc's, browsers, etc, all the same behaviour, i.e. the Google Map scale is distorted

Again, the web server hardware is the same as my Joomla 2.5 site which doesn't have this problem.

[Jan]

Hi, is your template based on bootstrap, seems like bootstrap has common prolbems with Google Maps, e.g. now I am making phoca maps and there needs to be this part of code:

Code: Select all

#phocamaps img {
  max-width: none;
}

So I am planning to do it for Phoca Gallery map area too.

Jan

[jb80]

Hi Jan,
Yes, they are both bootstrap templates.

[Jan]

So, yes, the bootstrap should be customized or aditionally code needs to be added, for now, in bootstrap there is:

Code: Select all

#map_canvas img,
.google-maps img {
  max-width: none;
}

so the id for phoca maps needs to be added too.