Hi,
I'm using Gmap module with API v3 and I display 3 maps each in a different tab. If you try to initialise the map on a hidden div, then it will fail to display.

I found the solution with google.maps.event.trigger(map, 'resize'); But when I use this in my js file inside my tabs custom code, it doesn't work, because "map" is not defined.

Is there a solution for this?

Comments

n20’s picture

n20 commented

Did you figured out how to run the resize trigger event? Im facing the same problem right now.

Anonymous’s picture

Anonymous (not verified) commented

same problem(

gillarf’s picture

gillarf commented

I'm having a very similar problem - I'm not sure of the name of the map to resize when I show the tabbed pane that the map is in. Using gmap in views.

Smartforcedev’s picture

Smartforcedev commented

Same here. Did someone figured out how to fix this?

gillarf’s picture

gillarf commented

You can define the id of the map in the macro (e.g [gmap id=my-map]). Then put javascript similar to this in your event handler:

var mapObj = Drupal.gmap.getMap('my-map');
google.maps.event.trigger(mapObj.map,'resize');
Smartforcedev’s picture

Smartforcedev commented

Thanks gillarf!

Here is my solution to fix Bootstrap3 Tabs:

// Fix Map
    function initialise() {
        mapObj = Drupal.gmap.getMap('gmap-auto1map-gmap0');
        google.maps.event.trigger(mapObj.map, 'resize');
        var ob = mapObj.map.markers[0].position.ob;
        var pb = mapObj.map.markers[0].position.pb; 
        latLongShit = new google.maps.LatLng(ob, pb);
        mapObj.map.setCenter(latLongShit);
    }
    
    $('a[href="#map"]').on('shown.bs.tab', function(e){
        initialise();
    });
podarok’s picture

podarok
🇺🇦 he/him/his
Primary language Ukrainian
Location Ukraine
commented
Issue summary: View changes
Status: Active » Patch (to be ported)
capellic’s picture

capellic
he/him/his
Location Austin, Texas
commented

Thanks @Smartforcdev in comment #3. Really helped me out!

taote’s picture

taote commented

I have a similar problem using collapsible fieldset, and trying to use #6 solution, I got the following error:

TypeError: mapObj.map.markers is undefined
	
var ob = mapObj.map.markers[0].position.ob;

Also tried this

jQuery("div.gmap-gmap").each(function(i,e){
						var id = jQuery(this).attr("id");
						var idArr = id.split("-");
						var mapId = idArr[1];
						var mapObj = Drupal.gmap.getMap(mapId);
						var center = mapObj.map.getCenter();
						google.maps.event.trigger(mapObj.map,"resize");
						mapObj.map.setCenter(center);
						});

But same result. Any help please? This is driving me crazy!!

Anonymous’s picture

Anonymous (not verified) commented

I use jQuery UI Tabs and this works for me:

$('#tab-container-id').on('tabsactivate', function(event, ui) {
    if (ui.newPanel.selector == "#tab-selector-id") {
        var mapObj = Drupal.gmap.getMap('gmap-auto1map-gmap0');
        var center = mapObj.map.getCenter();
        google.maps.event.trigger(mapObj.map, 'resize');
        mapObj.map.setCenter(center);
    }
  });
dougn7’s picture

dougn7 commented

Hi guys, ive been using version 7.x-2.9 and #10 solution work great for me, but #6 not. The version 7.x-2.10+1-dev (last until now) dont fix this problem.
You can can do this smoothly replacing setCenter() to panTo():

mapObj.map.panTo(center);

drupix’s picture

drupix
Primary language French
Location Geneva, 🦊🇨🇭
commented

#10 worked for me, thanks!