Map doesnt work in quicktabs

Looks like quicktabs is another one of those modules that hides the map, Google's T&C demands that the map be visible at all times, if their software detects that the map request is hidden then it aborts the load which looks like what has happened.

Correct, in order to reinitialize the map you must reload the page.

I need more information, the image is unreadable.

The map is empty because you have a javascript error. See #1 for why you cannot view a map in a tab.

Hi,
Thank you for your very useful module

The fact that google maps does not work correctly in tabs is a known problem. You can usually fix this by calling the command string, after the activation of the map tab:

var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);

View source -> http://blog.codebusters.pl/demo/ukryta_mapa_rozwiazanie1.html
and description -> http://blog.codebusters.pl/pl/entry/google-maps-w-ukrytym-div

If GetLocations seems like it should be like this:

var cnt = getlocations_map[key].getCenter();
google.maps.event.trigger(getlocations_map[key], "resize");
getlocations_map[key].setCenter(cnt);

However, this solution does not work, if anyone can write what should be the function of resizing and recentering the map?

Sorry for my english, I hope that what I write is understandable.

Best Regards

How about something like this:

if($(this).attr('href')=='#tab2'){
  var key = 'key_1';
  var center = getlocations_map[key].getCenter();
  google.maps.event.trigger(getlocations_map[key], "resize");
  getlocations_map[key].setCenter(center);
}

There are not working, and not working with my API - Error: "TypeError: getlocations_map [key] is undefined"

You will need to make sure that it is loaded after getlocations.js
Look in your source html.

I'm using the bootstrap tabs. The script is loaded at the very end, just before the /body tag. GetLocations load files in the head.
Script fragment responsible for switching tabs:

  $(function () {
    $('body').on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
      e.preventDefault()
      $(this).tab('show');
       if($(this).attr('href')=='#mapa'){
        alert('Właśnie ukryłeś akapit');//optionally - in order to check the operation
        var key = 'key_1';
        var center = getlocations_map[key].getCenter();
        google.maps.event.trigger(getlocations_map[key], "resize");
        getlocations_map[key].setCenter(center);
        }
    })
  })

in my script the "alert" is working properly, so the script captures the moment of switching the tab with the map

Thank you very much for pointing :) works in this version:

  $(function () {
    $('body').on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
      e.preventDefault()
      $(this).tab('show');
       if($(this).attr('href')=='#mapa'){

        var key = 'key_2';
        var center = getlocations_map[key].getCenter();
        google.maps.event.trigger(getlocations_map[key], "resize");
        getlocations_map[key].setCenter(center);
        }
    })
  })

var key = 'key_2';

Best regards

Excellent!

If you can write this up in full that would help others, see https://drupal.org/node/2036635 which is where I want to put things like this, if you have editing rights you can put it there yourself.

Hello,
I added the solution to the problems of the location map to tabs.
If possible, you please correct my English so as to be understood by all.

Thank you for your help in solving. A small thing, but a nice one :)

Best Regards

Thank you very much, I will just tidy things up a bit.

Any patch?

See Quicktabs example 2 for a howto for quicktabs

Quicktabs example 2 is a very good solution, thank you! But there is some obsolete code ($settings2 is't working for me), so I wrote some additional code (I use Drupal.settings.getlocations settings).
My soution is:

(function ($) {
  Drupal.behaviors.mytheme = {
    attach: function() {
      function redomap(key) {
        var settings = Drupal.settings.getlocations[key];
        
        google.maps.event.trigger(getlocations_map[key], "resize");
        
        cenlat = Drupal.settings.getlocations.key_1.latlons[0][0];
        cenlon = Drupal.settings.getlocations.key_1.latlons[0][1];

             if (cenlat  && cenlon) {
              var c = new google.maps.LatLng(
                parseFloat(cenlat),
                parseFloat(cenlon)
              );
              getlocations_map[key].setCenter(c);
            }
        
      }

       // use this example for a leaflet map
      function redoleafletmap(key) {

        var settings = Drupal.settings.getlocations_leaflet[key];
        var minmaxes = (getlocations_leaflet_data[key].minmaxes ? getlocations_leaflet_data[key].minmaxes : "");
        var datanum = getlocations_leaflet_data[key].datanum;
        
        if (datanum > 1) {
          if (minmaxes) {
            var mmarr = minmaxes.split(",");
            var sw = L.latLng(parseFloat(mmarr[2]), parseFloat(mmarr[3])),
              ne = L.latLng(parseFloat(mmarr[0]), parseFloat(mmarr[1])),
              bounds = L.latLngBounds(sw, ne).pad(0.1);
            getlocations_leaflet_map[key].invalidateSize().fitBounds(bounds, {reset: true});
          }
        }


      }

      // the machine name of your quicktabs block
      var block = "city_tabs";
      // are you on a page with your quicktabs
      if ($("#quicktabs-" + block).is("div")) {
         // the first tab is "0", the second tab is "1" etc
        var tabnum = 1;
        $("#quicktabs-" +
          block +
          " a#quicktabs-tab-" +
          block + "-" + tabnum).one("click", function(event) {
          // each map has a key, eg key_1, key_2 etc
          redomap("key_1");
        });
      }
    }
  };
})(jQuery);

$settings2 will work with any version after 7.x-1.11 (or therabouts), current stable is 7.x-1.13.
I would strongly recommend upgrading, there are many fixes and improvements in Getlocations.

Hi,

I am trying to setup my map with Quicktabs module, i have read all the instructions,installed 'jQuery Update version 1.7' put the 'scripts[] = script.js' in mytheme.info copy/paste the code from 'Quicktabs example 2' in theme folder as script.js, my problem is that i can t figure out what to change in the code , at the top of the code i have changed 'Drupal.behaviors.mytheme' to 'Drupal.behaviors.kinetosfat.ro' kinetosfat.ro is my theme name, then // the machine name of your quicktabs block var block = 'maps'; i did not changed becouse my quicktabs instance is called maps then is('div')) changed with is('.front')) , var tabnum = 0; because the map is under the first tab and finaly redomap('key_3'); my map key. I can t figure out what to change in the code.
I ended with this but is not working.

/**
* Refresh maps hidden in quicktabs
*
*/

(function ($) {
Drupal.behaviors.kinetosfat.ro = {
attach: function() {

function redomap(key) {
var settings = Drupal.settings.getlocations[key];
var settings2 = getlocations_data[key];
var minmaxes = (settings2.minmaxes ? settings2.minmaxes : '');
var minlat = '';
var minlon = '';
var maxlat = '';
var maxlon = '';
var cenlat = '';
var cenlon = '';
if (minmaxes) {
minlat = parseFloat(minmaxes.minlat);
minlon = parseFloat(minmaxes.minlon);
maxlat = parseFloat(minmaxes.maxlat);
maxlon = parseFloat(minmaxes.maxlon);
cenlat = ((minlat + maxlat)/2);
cenlon = ((minlon + maxlon)/2);
}
google.maps.event.trigger(getlocations_map[key], "resize");

if (! settings.inputmap && ! settings.extcontrol) {
if (settings.pansetting == 1) {
Drupal.getlocations.doBounds(
getlocations_map[key],
minlat,
minlon,
maxlat,
maxlon,
true
);
}
else if (settings.pansetting == 2) {
Drupal.getlocations.doBounds(
getlocations_map[key],
minlat,
minlon,
maxlat,
maxlon,
false
);
}
else if (settings.pansetting == 3) {
if (cenlat && cenlon) {
var c = new google.maps.LatLng(
parseFloat(cenlat),
parseFloat(cenlon)
);
getlocations_map[key].setCenter(c);
}
}
}
}

// use this example for a leaflet map
function redoleafletmap(key) {
var settings = Drupal.settings.getlocations_leaflet[key];
var minmaxes = (getlocations_leaflet_data[key].minmaxes ? getlocations_leaflet_data[key].minmaxes : '');
var datanum = getlocations_leaflet_data[key].datanum;
if (datanum > 1) {
if (minmaxes) {
var mmarr = minmaxes.split(',');
var sw = L.latLng(parseFloat(mmarr[2]), parseFloat(mmarr[3])),
ne = L.latLng(parseFloat(mmarr[0]), parseFloat(mmarr[1])),
bounds = L.latLngBounds(sw, ne).pad(0.1);
getlocations_leaflet_map[key].invalidateSize().fitBounds(bounds, {reset: true});
}
}

// the machine name of your quicktabs block
var block = 'maps';
// are you on a page with your quicktabs
if ($("#quicktabs-" + block).is('#front')) {
// the first tab is '0', the second tab is '1' etc
var tabnum = 0;
$("#quicktabs-" +
block +
" a#quicktabs-tab-" +
block + "-" + tabnum).one('click', function(event) {
// each map has a key, eg key_1, key_2 etc
redomap('key_3');
});

// another tab with another tabnum and map key here
var tabnum = 2;
$("#quicktabs-" +
block +
" a#quicktabs-tab-" +
block + "-" + tabnum).one('click', function(event) {
// each map has a key, eg key_1, key_2 etc
redomap('key_2');
});
// another tab with another tabnum and map key here
// this one handles a leaflet map
var tabnum = 3;
$("#quicktabs-" +
block +
" a#quicktabs-tab-" +
block + "-" + tabnum).one('click', function(event) {
// each map has a key, eg key_1, key_2 etc
redoleafletmap('key_3');
});

}
}
};
})(jQuery);

First of all change Drupal.behaviors.kinetosfat.ro to Drupal.behaviors.kinetosfat_ro. Dots have "meaning" in javascript.

The is() function needs to have a html element, not a class or id, so div, p, h3, input, select etc
see http://api.jquery.com/

You can use
Drupal.getlocations.redoMap('key_3') instead of redomap('key_3'); and leave out the function redomap() altogether, same for redomap('key_2');
Same goes for redoleafletmap(key), use Drupal.getlocations_leaflet.redoMap()

This assumes you are using getlocations_leaflet module.

I am not sure why you have two maps with the same id, eg 'key_3', each map should have a distinct id.

Great, is working now, i had two options: copy/ paste this code in my css file

.quicktabs-hide {
display: block;
position: absolute;
left: -10000px;
top: -10000px;
}

Or chose your your js code from 'Quicktabs example 2 ', both of them are working but finally i used your code.
For the moment the map is displaying properly using quicktabs Ajax option 'No: Load all tabs on page view.' but when my 'all nodes view map' will have a substantial content on it i think this will cause a slow page load, so i am trying to display the map with the 'Ajax Yes: Load only the first tab on page view' the first tab will be a normal text block and the second will be the map loaded with ajax, but this option is failing the load the entire map (blank).

I found this but is not doing me any well :

(function ($) {
Drupal.behaviors. = {
attach: function (context, settings) {
$('.quicktabs-tabs a', context).click(function() {
//New tab has been clicked, remove the opened tab page
$(".quicktabs-tabpage").remove();
$('.quicktabs-tabs a').removeClass('quicktabs-loaded');
});
}
}
})(jQuery)

Quicktabs ajax load will not work because there will not be any javascript installed to run the maps as you can see in the source html when quicktabs ajax is enabled. The maps are not "sent" from the webserver, they are fetched from the mapservers direct to the browser.

I understand, you think if i can writte a custom javascript will solve my problem?

You can try.
I would do your best to speed up the map, as few layers and markers as possible, use a markermanager, there are two of them available.

Is there any good script for this issue ?