Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Google map iframe not rendering Javascript?

    Hi All,

    Create a Slick Tabbed Content Area using CSS & jQuery - Tuts+ Code Tutorial

    I have followed this awesome tutorial that helps you build a tabbed content area and uses javascript and now have it running in my project (The above link). However, I have a slight issue I'm wondering if you can help as my Javascript is not very strong. On one of the tabs content I have a placed a google map iFrame but when i click on the tab it doesnt render properly and I think there maybe some java script conflicting somewhere. The reason I think this is because if I place the google iFrame outside of the tab area it renders fine.

    Can someone please help?

    Thanks

    Paul

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,105
    Thanks
    23
    Thanked 594 Times in 593 Posts
    Please post YOUR code here.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,932
    Thanks
    56
    Thanked 552 Times in 549 Posts
    the most common cause for this is (if I understand what "this" is) is that you have to resize the map when opening a tab. You can trigger the event like this:
    Code:
    google.maps.event.trigger(map, 'resize');
    once the tab has been opened

  • #4
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This is my javascript file called functions.js

    function tabSwitch(active, number, tab_prefix, content_prefix) {

    for (var i=1; i < number+1; i++) {
    document.getElementById(content_prefix+i).style.display = 'none';
    document.getElementById(tab_prefix+i).className = '';
    }

    document.getElementById(content_prefix+active).style.display = 'block';
    document.getElementById(tab_prefix+active).className = 'active';
    }

    Sure here are the tabs

    <ul class="tabs">
    <li><a href="javascript:tabSwitch(1, 7, 'tab-', 'tab-content-');" id="tab-1" class="active">Tab 1</a></li>
    <li><a href="javascript:tabSwitch(2, 7, 'tab-', 'tab-content-');" id="tab-2">Tab 2</a></li>
    <li><a href="javascript:tabSwitch(3, 7, 'tab-', 'tab-content-');" id="tab-3">Tab 3</a></li>
    <li><a href="javascript:tabSwitch(4, 7, 'tab-', 'tab-content-');" id="tab-4">Tab 4</a></li>
    <li><a href="javascript:tabSwitch(5, 7, 'tab-', 'tab-content-');" id="tab-5">Tab 5</a></li>
    <li><a href="javascript:tabSwitch(6, 7, 'tab-', 'tab-content-');" id="tab-6">Tab 6</a></li>
    <li><a href="javascript:tabSwitch(7, 7, 'tab-', 'tab-content-');" id="tab-7">Tab 7</a></li>
    </ul>

    The google map is place inside tab 2 and here is the iFrame code. Please note the post code value is populate dynamically. But I know it is not an issue with this value because it works when i take it outside of the tabbed are.

    <div id="tab-content-1" class="tab-content">
    Content Goes here
    </div><!-- end content 1 div -->

    <div id="tab-content-2" class="tab-content">
    <div id="gmap"><iframe width="450" height="250" src="https://maps.google.co.uk/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=<umbraco:Item field="postcode" runat="server" />&amp;output=embed"></iframe></div>
    </div><!-- end content 2 div -->

    <div id="tab-content-3" class="tab-content">
    Content Goes here
    </div><!-- end content 3 div -->

    <div id="tab-content-4" class="tab-content">
    Content Goes here
    </div><!-- end content 4 div -->

    <div id="tab-content-5" class="tab-content">
    Content Goes here
    </div><!-- end content 5 div -->

    <div id="tab-content-6" class="tab-content">
    Content Goes here
    </div> <!-- end content 6 div -->

    <div id="tab-content-7" class="tab-content">
    Content Goes here
    </div> <!-- end content 7 div -->

    </div> <!-- end tabbed area div -->

    Inside the tab
    Google map iframe not rendering Javascript?-map-1.jpg

    Outside the tab
    Google map iframe not rendering Javascript?-map-2.jpg

    Hope you can help.

    Thanks

    Paul

  • #5
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This is my javascript file called functions.js

    function tabSwitch(active, number, tab_prefix, content_prefix) {

    for (var i=1; i < number+1; i++) {
    document.getElementById(content_prefix+i).style.display = 'none';
    document.getElementById(tab_prefix+i).className = '';
    }

    document.getElementById(content_prefix+active).style.display = 'block';
    document.getElementById(tab_prefix+active).className = 'active';
    }

    here are the tabs

    <ul class="tabs">
    <li><a href="javascript:tabSwitch(1, 7, 'tab-', 'tab-content-');" id="tab-1" class="active">Tab 1</a></li>
    <li><a href="javascript:tabSwitch(2, 7, 'tab-', 'tab-content-');" id="tab-2">Tab 2</a></li>
    <li><a href="javascript:tabSwitch(3, 7, 'tab-', 'tab-content-');" id="tab-3">Tab 3</a></li>
    <li><a href="javascript:tabSwitch(4, 7, 'tab-', 'tab-content-');" id="tab-4">Tab 4</a></li>
    <li><a href="javascript:tabSwitch(5, 7, 'tab-', 'tab-content-');" id="tab-5">Tab 5</a></li>
    <li><a href="javascript:tabSwitch(6, 7, 'tab-', 'tab-content-');" id="tab-6">Tab 6</a></li>
    <li><a href="javascript:tabSwitch(7, 7, 'tab-', 'tab-content-');" id="tab-7">Tab 7</a></li>
    </ul>

    The google map is place inside tab 2 and here is the iFrame code. Please note the post code value is populate dynamically. But I know it is not an issue with this value because it works when i take it outside of the tabbed are.

    <div id="tab-content-1" class="tab-content">
    Content Goes here
    </div><!-- end content 1 div -->

    <div id="tab-content-2" class="tab-content">
    <div id="gmap"><iframe width="450" height="250" src="https://maps.google.co.uk/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=<umbraco:Item field="postcode" runat="server" />&amp;output=embed"></iframe></div>
    </div><!-- end content 2 div -->

    <div id="tab-content-3" class="tab-content">
    Content Goes here
    </div><!-- end content 3 div -->

    <div id="tab-content-4" class="tab-content">
    Content Goes here
    </div><!-- end content 4 div -->

    <div id="tab-content-5" class="tab-content">
    Content Goes here
    </div><!-- end content 5 div -->

    <div id="tab-content-6" class="tab-content">
    Content Goes here
    </div> <!-- end content 6 div -->

    <div id="tab-content-7" class="tab-content">
    Content Goes here
    </div> <!-- end content 7 div -->

    </div> <!-- end tabbed area div -->

    Inside the tab
    Click image for larger version. 

Name:	map 1.JPG 
Views:	20 
Size:	23.8 KB 
ID:	12731

    Outside the tab
    Click image for larger version. 

Name:	map 2.JPG 
Views:	37 
Size:	33.7 KB 
ID:	12732

    Hope you can help.

    Thanks

    Paul

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Did you try to resize the map as xelawho suggested?

  • #7
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,932
    Thanks
    56
    Thanked 552 Times in 549 Posts
    you can't resize the map (in the way I suggested at least) because the code's not using the maps API - it's just loading an embedded map into an iframe.

    But I guess it's the same issue. I would suggest giving your iframe an id (let's call it "myframe") and loading the source once that tab is clicked on in the tabSwitch function:

    Code:
    if (active === 2){
    document.getElementById("myframe").src="https://maps.google.co.uk/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=<umbraco:Item field="postcode" runat="server" />&amp;output=embed";
    }
    like I say, just a guess...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •