How to load the map within a hidden tab?
Whenever the map is hidden within a tab when the page loads, It can cause problems when the map tries to auto load itself. You can fix the problem by removing your existing embedding code of:
<script src="https://hosting.simplemaps.com/users/RANDOM_ID/mapdata.js"></script> <script src="https://hosting.simplemaps.com/users/RANDOM_ID/usmap.js"> </script> <div id="map"></div>
and replacing it with the following:
<script src="https://hosting.simplemaps.com/users/RANDOM_ID/mapdata.js"></script> <script>simplemaps_usmap_mapdata.main_settings.auto_load = 'no';</script> <script src="https://hosting.simplemaps.com/users/RANDOM_ID/usmap.js"></script> <script> simplemaps_usmap.hooks.ready = function(){ document.getElementById('Your_placeholder_tab_id').onclick = function(){ setTimeout(function(){simplemaps_usmap.load()}, 500);} } </script> <div id="map"></div>
This code switches your map over to manual loading, and only loads the map after your your tab (with an id of Your_Placeholder_tab_id) is clicked. A delay of half a seconds (500 ms) is needed because the tab loads itself using an animation.