Anyone have any ideas how to make this work?

Here's my live test example.

My example demonstrates Google Maps (almost) in action within jQuery UI tabs. Notice that the maps don't fully initialize in each tab. I know there's lots of questions and answers on this issue out there, but none of them apply to the way Google Maps for EE does it's thing with Google Maps API v3.

Any help would be forever and greatly appreciated :-)

  • I had to do the same sort of thing at one point, and got it working with Justin Kimbrell's help (@objectivehtml). It was a while ago now, but I seem to recall him having me add a click event listener within one of the Google Maps add-on files. It meant that the mapping would initialize when the nearest parent click event (in my case an accordion hide/reveal) was clicked. Apr 3 '13 at 18:25
  • Should be pretty easy. From jQuery UI docs: api.jqueryui.com/tabs/#event-activate Bind an event listener to the tabsload event: $( ".selector" ).on( "tabsload", function( event, ui ) {} ); Apr 3 '13 at 18:49
  • Thanks guys, my head is spinning already! Jean, any chance you have the code that you had to add in?
    – vibe9
    Apr 3 '13 at 21:59
  • Just as a tip I wouldn't try to load ALL maps at once. The page loading time is crazy long. Heavy widgets like Google Maps and social widgets are notorious in adding huge weight to a page so just load each one on request as Jean suggests. Binding an event handler to each tab to make the call.
    – Ian Young
    Apr 3 '13 at 22:09

Your issue is answered here I believe: https://stackoverflow.com/a/3066751/135935

I recently fixed the same problem by changing my CSS to use the off-left positioning suggested in the answer. Worked perfectly.

Use the off-left technique for hiding inactive tab panels. E.g. in your style sheet replace the rule for the class selector ".ui-tabs .ui-tabs-hide" with

.ui-tabs .ui-tabs-hide { position: absolute; left: -10000px; }

  • Stuck on a couple other projects at the moment Anna, but will be returning to this problem soon enough. Thanks for the input!
    – vibe9
    Apr 5 '13 at 6:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.