Menu icon Foundation
Foundation 4 - Map as a tab content

HI!

I want to include an OpenStreetMap-map in a section.
There a three tabs and three different maps - On loading the site only the one in the active tab works. When you switch between the different tabs you see, that the others are totally zoomed out.

Toghether with the CMSMS-forum I found out, that the problem is the visibility at loading the tab - when you set all tabs on active, the maps are showing up perfectly.
Is there a possibilty to preload the content of the tabs?

Here the link to the forum (there you find links to the site):
http://forum.cmsmadesimple.de/viewtopic.php?pid=29082#p29082

Thanks a lot!

mapstabs

HI!

I want to include an OpenStreetMap-map in a section.
There a three tabs and three different maps - On loading the site only the one in the active tab works. When you switch between the different tabs you see, that the others are totally zoomed out.

Toghether with the CMSMS-forum I found out, that the problem is the visibility at loading the tab - when you set all tabs on active, the maps are showing up perfectly.
Is there a possibilty to preload the content of the tabs?

Here the link to the forum (there you find links to the site):
http://forum.cmsmadesimple.de/viewtopic.php?pid=29082#p29082

Thanks a lot!

Meena about 5 years ago

The solution below works after trying out various options.

Asynchronously Loading the API

You may wish to load the Maps API JavaScript code after your page has finished loading, or on demand. To do so, you can inject your own tag in response to a window.onload event or a function call, but you need to additionally instruct the Maps JavaScript API to delay execution of your application code until the Maps JavaScript API code is fully loaded. You may do so using the callback parameter, which takes as an argument the function to execute upon completing loading the API.

The following code instructs the application to load the Maps API after the page has fully loaded (using window.onload) and write the Maps JavaScript API into a tag within the page. Additionally, we instruct the API to only execute the initialize() function after the API has fully loaded by passing callback=initialize to the Maps API :

https://developers.google.com/maps/documentation/javascript/tutorial#asynch

The below code works:

HTML Markup

<!--Tab Layout - Details and Map--> 

<dl class="tabs" data-tab>
        <dd class="active"><a href="#panel-details">Details</a></dd>
        <dd id= "mapTab" class="map_tab" ><a href="#map"  onclick="loadScript();">Map </a></dd>
 </dl>


    <!--Tab Layout Content--> 
    <div class="tabs-content">      
        <div class="content active" id="panel-details">
            <p>Details...</p>
        </div>

        <div class="content " id="map">
            <p>Map Locations</p>
            <div id="map-canvas" style="width: 100%; height: 480px;"> </div>
        </div>

Javascript Code

<script type='text/javascript'>
    function initialize() {
        var mapOptions = {
          zoom: 8,
          center: new google.maps.LatLng(53, -1.33)
        };
        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    }

    function loadScript() {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize';
        document.body.appendChild(script);
    }

    window.onload = loadScript;
</script>


Artem over 4 years ago

Thank you! It worked!