Hi,

I have recently upgraded to the latest JomSocial whilst updating to Joomla 3.3.3.
My problem did not occur prior to upgrading. So... this is odd, but... I have some google mapping pages on my Joomla website. 2 clicks and you get a Google Directions line that can be dragged to select a different route, just like getting directions on maps.google.com. The dragging of the line worked, but is now broken.

I've narrowed it down as much as I can myself, but cannot see the cause. Basically, if I enable the modules community - Hello Me, or Community - Events Module (Upcoming Events) I can no longer click on the directions line and drag it, but if I disable both then it works as expected.

I cannot see any change to the module code that may be conflicting, but I haven't been able to check the stylesheet. Whatever the cause, I suspect that something in the new version of JomSocial is now conflicting with Google's Directions Service.

I'm not sure if this is something that you are able to solve or not, but if you can't can you at least indicate what has changed in relation to those 2 modules between my old 3.1.somehting and the new 3.2.1.4?

Thanks,
Matthew

Hi, Matthew.

Please, enable modules so I could see the issue.
Then please update this thread.

Thanks Michal,

I've enabled the modules, and also disabled the JS and CSS optimisation from the T3 template (it doesn't effect the issue at all but I thought it would be easier to see what is going on). You will have to log in using the admin credentials I included at the front end and visit the following url as an example: cyclemycity.com/index.php?option=com_map...=createmap&Itemid=80
Click in 2 locations and then try to drag the blue line. The circle appears but the map pans instead of moving the line.

Thanks,
Matthew

Hi, Matthew.

That is strange... the only difference is... that this file is loaded:

<link rel="stylesheet" href="/components/com_community/assets/modules/module.css" type="text/css" />

No errors in console...

Please, edit your first post and add FTP credentials.

Yes, quite strange!
I can't get you FTP access because it requires an SSH key. However, I did go over the css file with a fine tooth comb (actually looked at the various elements in a working and non-working page) and I have found the switch that makes it work or not...

The module.css file contains ".gm-style .gmnoprint{display: none;}" which is added to an element in the Google Map when the modules are enabled. It is completely absent from the same element when the modules are disabled (the element has class="gmnoprint" and is nested under "gm-style", obviously, but as module.css is not there it is not adding anything to the particular element).

Anyway, if I change display: none to display:block in the element inspector I can drag the directions line again.

Do you know what the purpose of ".gm-style .gmnoprint{display: none;}" is in module.css and whether I can remove it or change it?

I've attached a screenshot of the element inspection showing the differences.

HI, Matthew.

A good catch :)

I don't see anywhere in our files where gm-style is called.. but it may be called dynamically with php.
So let's try method "the wolf is full and the sheep is save" :)

Try to add this to your current template main css:

#map_canvas .gm-style .gmnoprint {
display: block !important;
}

Michal,

Thanks for the suggestion. In my testing that has worked, but not as perfectly as if the display hadn't been set to none in the first place. The few problems I have found are:
1. There are a few elements in the map canvas that have similar classes and are now missing (which is odd), including the scale, report a problem and Google copyright notice (which I'm not allowed to remove),
2. A disabled 'rotate map 90 degrees' button has appeared near the map controls, and
3. direction lines from Google can have 8 waypoints added (by clicking and dragging a part of the line). With this solution I can keep dragging a ninth point, but the directions Google return only include the first 8 points. Usually Google could turn off the 'block' setting, but not with !important set, so I can try to set that 9th point now, but couldn't before.

It is only slightly imperfect in relation to the directions line. Looking back, I hadn't noticed that the scale and notices were missing. There must be other Google Map style settings that are messing with it too. Browsing through the elements on the map module.css appears to contribute to a handful of elements, including span, and other gmxxxx classes. It may be hard to cancel it our correctly without causing other issues.

Could you could ask the team for their logic in including the map setting in modules.css in the first place. If Jomsocial doesn't use them...? Even if it is for Google Maps in Joomla, why would they override Google's settings? The way it is it will mess with any site using Google Maps or Directions.

Failing everything else I'll try commenting out all the gmxxxx stlyes in module.css, but that isn't ideal if you can come up with a better solution.

Matthew

Hi,

I just did a quick check, and commenting out ".gm-style .gmnoprint{display:none}.gm-style .gm-style-cc{display:none}" from module.css, and not adding to my template .css made the maps work just as before. However, I've reverted module.css back to normal, as I don't know what the Jomsocial Team had intended those settings to be for and I thought I may break something elsewhere...

Currently I have the code you suggested in my template, and the modules enabled, but can you let me know about the reason for the settings in modules.css, and if they can be removed?

Thanks,
Matthew

HI, Matthew.

If my code works then you don't need to remove anything, especially that you'll have to do it every time after upgrade.

JomSocial uses Google Maps in events, friends location, photo locations, video location... so this class is probably used somewhere there. I've made a search through whole file system and couldn't find exact class name... but as I said it may be generated dynamically (one part of class is fixed and second part is created by echo or php condition).

Well yes, it almost works. I went and also added the block !important to gm-style-cc to get all of the elements back (I also have to find out how to turn one off that has now appeared and shouldn't, but I can look into that).

I found where Jomsocial uses that code though. You mentioned the events page so I went there. Now, with the block !important, all those elements are being forced to appear on the small maps there, whereas they were turned off before (I believe).

Functionally the additions to my template fix the major error, but it does produce some aesthetic problems that are not ideal. I can live with it, but it would be much better if the 'block !important' code could be applied to only the necessary maps, not all across the whole site. I suppose I can move it to the map page's code instead of the template css, can't I? I have 1 or 2 include files that are on all my map pages, so I can try to put it there so that I don't effect the events maps...

Please note though, that the code in modules.css will mess up any other Joomla website that uses maps too, possibly including those that use map addons from the Joomla extensions webpage.

I'll mark the problem as fixed, as it is patched up for me, but I think you should get someone to improve the way they set those styles. Overriding the standard Google settings for maps probably isn't a good idea (I also think you probably breach their licence by removing the Google copyrights, terms, etc from the map on the events page and elsewhere...

Thanks,
Matthew