JQuery 1.9.1, CSS and Google Maps: Display: None issue

Question

I am trying to get a Google map running on my site. The problem is that the card looks like this:

I understand that this is a known issue with recalibrating an object after it has been shown. (Changed from display: none; to display: block; which is)

I use jQueryUI tabs and display: none; in a div that encapsulates tabs.

I tried to remove the tabs and display everything as a block at startup, and then make changes to window.load - but it's pretty ugly when things with pictures move by themselves after you have loaded.

This JSFiddle demonstrates how I want (simplified), although it is erroneous because I cannot get it to work properly (it does not show the map at all).

Is there any other way to do this - or do I need to find a different kind of layout for my map functionality?

Answer 1

I found the only reliable approach is to initialize the map with the canvas in display:block , and then hide it. If this is done in the $ (function () {...}) structure, you should not see the map before hiding it.

You can also try to hide the canvas initially and initialize the map when it is needed first, after showing the canvas.

In any case, just initialize the map when its canvas is visible.

Answer 2

Using

 map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); $("#map_canvas").css("height", $(window).height()); 

Answer 3

This happens when you manipulate any external card dividers after they are initialized. Therefore, to fix this, you must initialize the map after displaying all its external divs.

So, just initialize the card at the very end:

 $mapsOuterDivs.slideToggle(700); setTimeout(function(){ initializeGoogleMap(); },300);