Google Map API V3 on hidden div (jquery-ui tabs)

I know this problem is ancient, but I can't seem to find a clear instruction for it.

The gist of the problem is the Google Map wouldn't load completely (partly shown) when it's loaded on a hidden (display:none) divs, e.g. jQuery tabs, etc.

API V3 wouldn't accept checkResize() any more, the 'left:-1000px' is not an elegant solution.

I've heard delaying constructing the map, and reload the map when click the tabs, but please help me on the exact codes.

Answers


Why do you say "left:-1000px' is not an elegant solution"? It works for me greatly in API v2 and should work also for API v3 (not tested, let me know if it doesn't work).

Redraw, i.e. API v2 checkResize() is accomplished this way in API v3:

google.maps.event.trigger(map, 'resize');

Here is an example of my CSS for jquery-ui tabs (inspired by http://jqueryui.com/demos/tabs/):

.ui-tabs .ui-tabs-hide#my_tabs-1 { /* my_tabs-1 contains google map */
    display: block !important;
    position: absolute !important;
    left: -10000px !important;
    top: -10000px !important;
}

Need Your Help

How to avoid false import compile error with Java Annotation?

java annotations javac false-positive

Let's assume ClassGenerated.java is generated by running the java annotation processor on ClassGeneratedParent.java and ClassA imports both ClassGenerated and ClassGeneratedParent.

Add code to package private library method

java aspectj

I have a library class with a package private method. Directly overriding this method by a subclass is no option. Is there any way, no matter how ugly, to execute own code when this package private

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.