Redrawing Google Maps with a Tabs Interface

Hey Tijmen,

I tried that one script before (took it from that link above) but i keep getting a error on the console -> Uncaught ReferenceError: map is not defined

That’s why I am a bit lost. Any idea why?

Cheers!

Hey Tijmen,

Thanks again for the quick replies… still not working for me… I am getting the following console error now:

Uncaught ReferenceError: initializeGmap is not defined

Cheers!

Hey Tijmen,

I was actually adding it to an external .js… 🙁

So I added it at the end of the plugin’s .js… it’s seems to work but only after I click a second time on the tab. First click map loads with only one tile, second click it resets and loads map correctly. So close to it finally working. Any ideas what might be happening? This might all be solved by lazy loading the div with the map maybe.

Cheers!

Hey Tijmen,

Yeah I tried both… the code below gives me either unexpected token errors or Uncaught TypeError: resetMap is not a function.

$('#tabid').click(function (e) {
     resetMap(map);
   });
});

function resetMap(m) {
     x = m.getZoom();
     c = m.getCenter();
     google.maps.event.trigger(m, 'resize');
     m.setZoom(x);
     m.setCenter(c);
   };
});

The code below works but only after the second click on the tab.

$('#tabid').click(function (e) {
     initializeGmap();
   });
});

It might just be my placement of the code inside the plugin’s .js… is the a specific line I should drop it into? I am posting below how the ending of the file looks like for me.

/**
 * Close all the dropdowns
 *
 * @since 1.2.24
 * @returns void
 */
function closeDropdowns() {
	$( ".wpsl-dropdown" ).removeClass( "wpsl-active" );
	$( ".wpsl-dropdown div" ).css( "height", 0 );
}

if ( $( "#wpsl-gmap" ).length ) {
    google.maps.event.addDomListener( window, "load", initializeGmap );
}

/* Resize google map after click on tab */
$('#tabid').click(function (e) {
     initializeGmap();
   });

});

Hey Tijmen,

Added the delay to the function and it is now working. I think the tab script on bootstrap has a fade-in effect that was messing with the timing of the map and the rendering. So the code that worked for me is below:

/* Resize google map after click (with a delay) on tab */
$("#tabid").click(function() {
    setTimeout(function (e) {
	    initializeGmap() }, 190)
	});

Thanks again for all your help. Dunno if this is the most elegant solution but works for the time being. Please let me know if you find another way.

Cheers!