JB Maps 2 - zoom controls not displaying correctly

Sunny-Day

Hi there

I believe that Google Maps have just (13 August 2018?) updated from version 3.33 to version 3.34. Since then the zoom and full screen icons on Google Maps may not display i.e. those tiles are blank. There is a suggested workaround which entails adding v=3.33 in the Google Map code (version 3.33 apparently displays the zoom controls correctly).
[https://developers.google.com/maps/documentation/javascript/versions]
[https://stackoverflow.com/questions/51832781/huge-google-maps-controls-possible-bug]
[https://stackoverflow.com/questions/51833112/google-maps-api-not-showing-icons-for-zoom-buttons-streetview-or-fullscreen]

It is likely that Google may quickly release an update to 3.34 that resolves the issue but in the meantime is there any way to specify the Google Maps version when using JB Maps 2?

Thanks for your help.

Brian

Sunny-Day

Hello again

I noticed that a solution was suggested in a new post added to the following page:
[https://stackoverflow.com/questions/51833112/google-maps-api-not-showing-icons-for-zoom-buttons-streetview-or-fullscreen] see post by TFOH on that page.

Translating this so that it works with JB Maps 2:

(1) Add following in custom.css file for the template:
.gmaps * {box-sizing: content-box;}
Save

(2) Go to JB Maps 2 module for the relevant map(s) and add in 'Advanced' under 'Module Class Suffix':
gmaps
Ensure there is a blank space before gmaps
Save

(3) Clear caches including supercacher if using Siteground as host.

We have used the above solution on two sites so far and it works on both. It does not solve the issue regarding the zoom boxes being larger than they were with previous Google Maps versions but it does now show the zoom and full screen icons correctly.

Brian

paulus1031

Hi There,

Can you add a link together with user access details and perhaps a screenshot of the problem?

I just tested the maps2 module and I don't appear to have the same problem - although it may be possible google has staggered the update for different parts of the world

Cheers
Paul

Sunny-Day

Hi Paul

I noticed late yesterday (14 August) Google downgraded Google Maps from 3.34.1 to 3.33.10 and the icon size went back to their usual smaller size - possibly in response to the 'icon not displaying' issues reported. This morning (15 August) they are now on version 3.34.1a and the icon sizes are now much larger which is presumably what Google want as mentioned on their issue tracker site: [https://issuetracker.google.com/issues/112520084]:

Reported Issue
Google Maps JavaScript API weekly channel (3.34) will be using the larger control UI.
As we are seeing increases of touch operations on various devices, we adjusted the control UI to fit for both finger touches and mouse clicks.

It's possible to opt out of this by loading the API with v=quarterly, v=3, v=3.33 or v=3.32.

The 3.34 updates may also cause problems with Content Security Policies in that 'data' now has to be included in the CSP in order to allow the display of the icons and this is not an ideal situation.

So as at version 3.34.1a the workaround to allow the display of the icons by adding '.gmaps * {box-sizing: content-box;}' to custom.css file etc seems like it is no longer needed.

You can check which Google Maps version your browser is using on JBMap2 pages by using Google Developer Tools:
(1) Launch Developer Tools in Google Chrome
(2) Press escape button on keyboard
(3) A blank 'Console' screen should appear which should allow you to paste the following text:
google.maps.version
Then press return on keyboard and it should show the version of Google Maps being used. I've attached a screen grab as an example.

Brian

paulus1031

Hi Brian,

Thanks for the info - I'm having a few problems with google maps today and have also just replied to a different thread where the icon problems are apparent

I thought that was how it worked loading the version number but not working for me at the moment

Will check with the team

Thanks again

Cheers
Paul