Knowledge Base support case for Likno Web Tabs Builder, abstracted and stripped of all user’s private info.


Initial Email From:
Debbie
Initial Email Subject: Google Maps in Web Tabs
Support Case Month: June 2012

Hi,

I'm trying to put a google map into a web tab. I've managed to get the map to appear, but it isn't resizing when the tab is activated.

I've done some extensive searching and have come across many different ways to solve it, but none of them seem to work.

So I'm wondering if you can tell me how I can get the map to automatically resize to fill the whole div container, when it's tab is activated?

Many thanks if you can solve this very frustrating problem for me.

Debbie

Reply From: Likno Customer Support

Dear Debbie,

Can you please send me an example? Please send me your Tabs project and the URL to see your test-page.

Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider or design for your websites!
Like us on Facebook – Follow us on Twitter

Reply From: Debbie

Hi Kostas,

Unfortunately, the website is still in development mode on my machine, so I can't give you an url to it.

Also, it's not actually a problem with the tabs project.  It's just that I can't figure out how to make a google map appear inside a tab correctly and was wondering whether you had come across this before and already had a solution to it.

The Google map js seems to be working OK, but the map itself appears as just a small square in the top left of the div.

By all accounts on the forums, this can be solved by triggering the map's resize event whenever the tab is activated.  So, what I need to know is how I can do that with your tabs.  It would need to be done dynamically, rather than included in the project, because only a few pages have a map, but the majority of pages would need to act normally.

Could you tell me how I could achieve this resizing event only on specific pages, please?

Warm Regards,
Debbie

Reply From: Likno Customer Support

Dear Debbie,

I am afraid that there is no way currently to make a JS call when the selected tab changes. I guess the best solution would be to use the “external url” and keep the google map in a separate page.

This way, the page will load into the tab only when it is shown for the first time and the map should appear properly.

Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider or design for your websites!
Like us on Facebook – Follow us on Twitter

Reply From: Debbie

Hi Kostas,

That's an interesting idea, but can you confirm whether I've understood you correctly?

Are you saying create another page and get the tab to call it when it is activated?  If so, does that mean it is opened in a frame or something like that.

I tried to use your Modal Windows Builder to call the google maps url last night thinking that could be a way to avoid using a tab.  Unfortunately, it seems that google don't like their pages being displayed inside a frame, because all I got was an error message to that effect.  Grrr, and I thought I was being smart.

Will you be including a way to get your tabs to perform a custom script when an event triggers in a future release?

Warm Regards,
Debbie

Reply From: Likno Customer Support

Dear Debbie,

Well, if Google Maps do not like being in a frame, then I guess my suggestion would not work.

Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider or design for your websites!
Like us on Facebook – Follow us on Twitter

Reply From: Debbie

Hi Kostas,

Anyway, I did manage to get the maps working by using your suggestion of creating a separate page that accepts the lat and long as parameters and linking to it using external url on the div of the first page.

So thank you very much for your suggestion, because I can now finally move on to the next part of the application.

Warm Regards,
Debbie