JangoSteve
Google Maps revisited
Hi All,
So, Google Maps revisited. I am getting EasyTabs to display my Google Map via the resize workaround, which I have placed below the following section of the js file:
$container.trigger("easytabs:after", [$clicked, $targetPanel, settings]);
below this I placed the following resize code:
google.maps.event.trigger(map, 'resize');
map.setZoom(mapOptions.zoom);
map.setCenter(mapOptions.center);
it works fine, however not perfectly for my map that is dynamically generated. I was reading a post by Steve from 2011 and he mentioned the following, in response to another query: "fb: You could load the Google map in the panel container before instantiating EasyTabs, and that should solve the problem of loading it into a display: none div." so what I'm wondering is, how would I do this with the current version of jquery?
I have also read the issue "Google map does not show in tab #100" but the links in that thread are now broken. which is a shame because apparently it offered a workaround of some sort.
what I'm trying to do is get the map to load in the hidden tab without the resize function. I have tried to set a dimension (width and min-height) for the hidden tab, based on a thread on a separate forum, but that doesn't work. How would I do what Steve suggested, to load the map in the panel container before instantiating EasyTabs. Is there an event handler for this?
Thanks a million. I have tried to find a solution the entire weekend and I'm lost. And thanks for a great tab solution!
just as a small follow-up, I was reading some of the google map solutions for the jqueryui tabs. one of them on stackoverflow, http://stackoverflow.com/a/3473868, mentioned redefining the class for the hidden tab and setting the css as follows: .ui-tabs .ui-tabs-hide { position: absolute !important; left: -10000px !important; display:block !important; } would this work in EasyTabs. or is Steves solution better?
hmm, I forgot about that. If you still want to see them I can put them up again.
hi CableGuy67, sorry for the delayed response. It was kind of you to reply. Could you please do that. I'm currently resizing the map and it's not the ideal when the user navigates among the tabs several times. Many thanks in advance.
I'm not sure if it is exactly what you mean but I am doing it this way. It is the old example from above. Probably. Most likely. At any rate, you can bounce from tab to tab and the centering will stay without any special magic. http://www.ipreferpi.eu/test/easytab/nested-gmap.html
this still uses resize, which is what I want to avoid. I think what I'll do is position the map out of screen view on page load, then push it into view with jquery when the tab is clicked on page load. all of the resizing will push up my geocode requests. thanks anyway for the help!
Yeah, no problem. After I came back and read what you were talking about I didn't think it was what you were after. Next time...