Google map partly rendered inside vertical tabs and collapsible fieldsets

Same here, and it seems that now the module wont load geolocation js files.

If i load it manually all the css's crashes. what can i do?

Here's a patch that introduces compatibility with vertical tabs and collapsible fieldsets.

The reason why the map isn't completely rendered is because it was hidden and has no height or width. The patch will resize the map on display.

I applied the patch and it worked with vertical tabs and collapsible fields, as described.

Can the same logic be applied to the multipage field type?

Also, the map image is up and over to the left when displaying a map under a views accordion format - maybe the same issue.

The patch does not apply.

Checking patch modules/geolocation_googlemaps/geolocation_googlemaps_widget.js...
error: modules/geolocation_googlemaps/geolocation_googlemaps_widget.js: No such file or directory

@derjochenmeyer - #2 applies cleanly on Geolocation 7.x-1.1:

cd sites/all/modules/geolocation
wget http://drupal.org/files/fix-partly-rendered-gmap-in-hidden-fieldsets-1277888-3.patch 
patch -p1 < fix-partly-rendered-gmap-in-hidden-fieldsets-1277888-3.patch
rm fix-partly-rendered-gmap-in-hidden-fieldsets-1277888-3.patch

So I applied the patch and it does not work for me.

I have to click on a colorbox image so the modal will load within one of the fieldgroups so the map will show.

I checked in the firebug console and it seems as if the geolocation_googlemaps_widget.js file isn't even loading as I can't find it under the loaded scripts. I then tried forcing it with the drupal_add_js function in my template.php, but this seemed to make it worse, as the map wouldn't even show up when clicking on the colorbox image (perhaps because the file was loading twice).

I even tried rearranging the fields so that the map field is outside of the fieldgroup (tabs) but it still won't show without clicking on the modal - see attached images.

It seems like this should have a simple workaround.
Maybe there's something I did wrong?
Any ideas?

I have my map in a collapsible fieldset. The patch did not work for me right away, I had to change "children" to "find" to look in all sub-elements for the title.

Also the first part for vertical tabs did not work for me at all, I've commented it out. From what I can see the link function seems to be missing () and arguments, why is it even there?

The patch in #2 worked for me. This was a frustrating issue and deserves to be committed to the module.

What about the issue mentioned in #7?

Hello patch #2 worked for me.

However, on the front end, I am using Twitter bootstrap tabs.

I tried to implement the same solution on the tabs but it doesn't seem to work.

Can anyone help with that?

Anyone can update patch #2 or #7 to geolocation 1.4?

Updated patch for Geolocation 1.5

Looks nice and clean. Thanks!
Committed: Please test in current dev.

Hi, sorry, this patch doesn't seem to work for me, the event is never triggered. I've replaced the resize function with an 'alert' and it doesn't appear?

I see why now, this patch is fine for collapsible fieldsets, but doesn't fix the problem for vertical tabs (as the issue title suggests).

This is because the code only targets
.closest('fieldset.collapsible').find('a.fieldset-title').click(function() {

A solution should work for both instances?

I agree, we should fix both.

As a temporary fix the following code works for me for vertical tabs, changing the selector as follows. Obviously this isn't the 'correct' solution for a patch though:

$("#geolocation-map-" + i).closest('div.vertical-tabs').find('.vertical-tab-button a').click(function() {

I'd try to come up with a solution but I am not using vertical tabs.

How can I test this? Which technique do you use to put the Google Maps widget inside a vertical tab?

Vertical tabs are created using the field_group module, see the attached screenshot for a standard setup.

I've created a patch that applies against the latest dev, which uses the same approach as the committed patch #12 but works for vertical tabs as well.

I'm not sure that using .closest() is the most efficient approach, but at least this fixes the issue according to the title: for collapsed field-sets and vertical tabs.

Sorry for the noise, there was whitespace in the last patch.

Thanks for the patch. Lets commit the fix like this.

At the moment I am working on the Drupal 8 branch of Geolocation Field maybe I find a more generic solution and we can backport it to the D7 branch later.

Hello,

the actual dev works now with vertical tabs so far, but has a problem, the map isnt centered correctly. already entered vales will be centered in the top left corner, with the marker invisible because it is out of bounds.
i made a patch to solve this. (its my first patch - hope this is correct)

Peter

Looks good to me, sorry I didn't spot this with the last patch, but +1 for #28!
Since it is a fairly straightforward patch I'm marking it straight to RTBC.

Back to fixed :)

Hopefully that'll fix this issue for good :P Thanks derjochenmeyer

Thanks guys! Added a new release 7.x-1.6 which should be available as soon as the drupal.org packaging script is ready.

The same problem with views accordion 7.x-1.1 and Geolocation 7.x-1.6+5-dev

when collapsible fieldsets are used the problem remains

The same problem apply also when using multipage panes in Fieldgroups.
To fix it you should add also:

            $("#geolocation-map-" + i).closest('div.multipage-panes').find('.multipage-link-next').click(function() {
              google.maps.event.trigger(Drupal.geolocation.maps[i], "resize");
              Drupal.geolocation.maps[i].setCenter(mapOptions.center);
            });
            $("#geolocation-map-" + i).closest('div.multipage-panes').find('.multipage-link-previous').click(function() {
              google.maps.event.trigger(Drupal.geolocation.maps[i], "resize");
              Drupal.geolocation.maps[i].setCenter(mapOptions.center);
            });  

Is there a way to get this working with Bootstrap fieldgroup tabs too?

I tried adding following, but can't get it to work.

$("#geolocation-map-" + i).closest('div.bootstrap-nav-wrapper').find('.field-group-bootstrap_fieldgroup_nav_item a').click(function() {
              google.maps.event.trigger(Drupal.geolocation.maps[i], "resize");
              Drupal.geolocation.maps[i].setCenter(mapOptions.center);  
            });

I'm having trouble when using the geolocation field with the https://www.drupal.org/project/conditional_fields module.

Does anybody know how to get the Google map to display correctly when it is initially hidden with the conditional_fields module?

I'm using the 7.x-1.x-dev

If I use the following in modules/geolocation_googlemaps/geolocation_googlemaps_widget.js after line 318, it seems to work with the https://www.drupal.org/project/conditional_fields module which uses Drupal states js to hide show elements.

var $document = $(document);
$document.on('state:visible', function (e) {
    if (e.trigger) {
        google.maps.event.trigger(Drupal.geolocation.maps[i], "resize");
        Drupal.geolocation.maps[i].setCenter(mapOptions.center);
    }
});

For the Google Maps D8 widget located at modules/geolocation_googlemaps_d8/geolocation_googlemaps_d8.js after line 62, I had to use:

var $document = $(document);
$document.on('state:visible', function (e) {
    if (e.trigger) {
      google.maps.event.trigger(Drupal.geolocation.maps[canvasId], "resize");
      Drupal.geolocation.maps[canvasId].setCenter(mapOptions.center);
    }
});

I hacked this together based on what I could find on the internet. I don't really understand the code, but it works.

If this looks useful, I could submit a patch?

Here is a patch for Drupal7 for #40 and a patch for #40 to include the comment in #37 for Fieldgroup's multipage panes.

Hope that helps someone.

I am seeing the same issue in Drupal 8.

I'm seeing the same issue in Drupal 8, too. Using field_group and placing the field inside a tab or an detail will not render the map correctly (=not usable). Should I open a new isuee with 8.x version?

Hey snsblvd,

there is already an issue on D8 for that. The underlying issue is simply, that GoogleMaps won't bother to render map tiles that are not visible to the user anyway. You can call the resize() method or something like that on the map once the map becomes visible with your custom code. The only general approach I have seen on this, was JS that would constantly keep track on all maps and check every X milliseconds if it has become visible, and I will not follow that approach. It's bad for performance and prone to fail and several scenarios.

What is the D8 issue? I can confirm this is still happening with fieldgroup Tab closed and using Leaflet on D8

I have the same problem with fieldgroup 8.x-1.0 and Leaflet 8.x-1.4 except that it's in the initially open tab. Is there an issue for fix this?

Closing all 7.x issues. It's time.