Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Jquery 1.9.1, CSS & Google Maps: "Display: none" issue

Jquery 1.9.1, CSS & Google Maps: "Display: none" issue


I'm struggling to get a Google map working on my website. The problem is that the map shows like this:

Which I understand is a known issue with re-sizing the object after it's div has been shown. (Changed from display: none; to display: block; that is)

I'm using JQueryUI Tabs and a display: none; on the div that encapsulates the tabs.

I did try removing the tabs and displaying all as a block on start, and then do the changes on window.load - but it's rather ugly having the watch things move around by itself after you have loaded.

This JSFiddle demonstrates how I want it (simplified), although it's flawed as I cannot make it work properly (it's not showing the map at all).

Is there another way to do it - or do I have to find a different kind of layout for my map functionality?

Problem courtesy of: rnngau


I have found the only reliable approach is to initialize the map with the Canvas at display:block, then hide it. If this is done in a $(function() {...}) structure, then you shouldn't see the map before it's hidden.

You can also try hiding the canvas initially and initializing the map when it is first needed, after showing the canvas.

Either way, only initialize the map when its canvas is visible.

Solution courtesy of: Beetroot-Beetroot


View additional discussion.

This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Jquery 1.9.1, CSS & Google Maps: "Display: none" issue


Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription