Maps plugin not working inside Tabs

[MRine]

Hi,

I’m trying to place a Google Maps inside of Tabs on my page.

So i have Tabs like: Description | Pictures | Maps for example.

Inside of the mapstab I would like to place the Google Map. It’s not working, it loads my complete website inside of the frame where the map should be.

Could you please help me?

[Abe]

Hi, And the exact Google map shows well when not in a tab? Strange. Put a link to that page to check

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[sharmstr]

@abe – This is happening no matter where you put the map. I just tried putting it in an accordion element on a portfolio page. The current page loaded within an iFrame element. So then I tried just putting in the link to the map, but it doesnt display at all. Then I tried putting on a page by itself and the same thing happened. See screenshot.

It seems to work if I put the iframe code in a text element by itself, but not within an accordion.

HEEEELLLLLLPPPPP! 🙂

(and for a bonus, you get to see a picture of me. lol)

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[sharmstr]

FYI I just tested it over on the VC demo site and it works over there.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[sharmstr]

Okay, I have it partially figure out. The iframe link is getting screwed up. You were missing some important code in your vc_gmaps.php file. I’ve attached my edited copy which is basically the vc_gmaps.php that comes with VC with a few changes.

It works in its own element now and partially within the accordion. Within the accordion, it displays, but the map isnt zoomed properly.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Abe]

Testing it right now. Thank you @sharmstr
I am on for the picture 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Abe]

The thing is that inside the Link input you should put something like https://maps.google.com/maps?q=New+York&hl=en&sll=40.686236,-73.995409&sspn=0.038009,0.078192
and not the whole iframe

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[sharmstr]

Hmmm. Well, I put the whole iFrame code when I tested on VC Demo site and it worked. And the instructions say paste the iframe code. And its a pain in the rear to copy out just that piece. Shall I go on? LOL 🙂

I’ll test that for now, but you should really clarify it or we’ll get this question again.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[sharmstr]

Visit Google maps to create your map. 1) Find location 2) Click “Share” and make sure map is public on the web 3) Click folder icon to reveal “Embed on my site” link 4) Copy iframe code and paste it here.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[sharmstr]

I reverted back to your code and the map still doesnt zoom properly when in an accordion element. Did you try it?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Abe]

I have updated the code to work with iframe too. This is how it was in the past so I guess they changed it by now. At the moment I have overridden the template for the gmaps shortcode to fix something that wasn’t working as supposed but now I see it works well so I will just remove the vc_gmaps.php from the vc_templates folder.

So as a SOLUTION please remove the file vc_templates/vc_gmaps.php until next update.
I also applied some CSS related to the gmap so please replace content of this file assets/css/shortcodes.min.css with the content from the one attached

Thanks

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[sharmstr]

Whooop! Thank you. So much easier to just get the embed code instead of … create a map, share the map, only copy part of the embed code, blah, blah. No fun 🙂

You’re a star, Abe.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Abe]

hihi, thanks you too.
Waiting for the photo 😀

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[sharmstr]

Its in the screenshot. My google avatar. LOL.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Abe]

hmm … got tricked 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[sharmstr]

Hey Abe, Its still not working the way I would expect it to. You dont have to do it now, but when you get a chance, bring up a location in google maps. Then click on the gear icon in the lower right, then Share and Embed. Copy the embed code into the VC Map Element WITHIN AN ACCORDION then view it.

Ahhh, it doesnt work right when its in part of the accordion that’s initially collapsed. If its in the first element that expanded on page load, then its fine.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Abe]

I see what you mean. Will check it

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Abe]

Fixed it. Also update the assets/js/app.min.js file content with the one from the attached file

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[sharmstr]

*high five* Works perfectly. Sorry for being too lazy to figure it out myself. Its been a long week already 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Abe]

🙂 No problem. I had to add some JS to support moving around the tabs

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[sharmstr]

@abe – Was this fix included in 2.2 beta 3? I just uploaded it to my site and its back to loading the page in the map container.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Abe]

yes it should be available in it @sharmstr
just packing the update but will do a check 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Abe]

just checked both possibilities with the iframe or just the link. Check not to have the vc_gmaps in vc_templates in the parent theme or your child theme since now it should be deleted and we use the default one from the plugin

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[sharmstr]

That was it. Since I uploaded the beta via FTP, it obviously doesn’t delete vc_maps in Kleo.

Thank you! 😀

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Abe]

oh 🙂 great. no problem

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Author]

Posts