Title: Map on hidden Tab – Solution
Last modified: November 4, 2016

---

# Map on hidden Tab – Solution

 *  Resolved [CotswoldPhoto](https://wordpress.org/support/users/cotswoldphoto/)
 * (@cotswoldphoto)
 * [9 years, 7 months ago](https://wordpress.org/support/topic/map-on-hidden-tab-solution/)
 * So, I was using a tab in Visual Composer, The tabs are `<li>` tags with a link
   inside, and only the link has an ID. How to attach javascript to the li so when
   clicked it causes the map to appear instead of being grey, and then remove the
   javascript from the li? Here you go:
 *     ```
       <script>
       jQuery(document).ready(function($){
         var $mapclickparent = $('#ab759e6c-edb7-8').parent();
         var mapClickHandler = function () {
           $($mapclickparent).unbind('click', mapClickHandler);
           var evt = document.createEvent('UIEvents');
           evt.initUIEvent('resize', true, false, window, 0);
           window.dispatchEvent(evt); 
         };
         $($mapclickparent).bind('click', mapClickHandler);
       });
       </script>
       ```
   
 * Where you can see the ID number of the link. No need to resize the map, no need
   for a map ID, no need to hack the plugin.
 * Trevor (freelance support agent for plugins and themes).

Viewing 8 replies - 1 through 8 (of 8 total)

 *  Plugin Author [NickDuncan](https://wordpress.org/support/users/nickduncan/)
 * (@nickduncan)
 * [9 years, 7 months ago](https://wordpress.org/support/topic/map-on-hidden-tab-solution/#post-8413588)
 * Hi Trevor
    Thanks for getting in touch!
 * You can manually call the
 * `InitMap(_MAP_ID_);`
 * after the
 * `window.dispatchEvent(evt);`
 * line
 * Please let me know if this works for you.
 *  Thread Starter [CotswoldPhoto](https://wordpress.org/support/users/cotswoldphoto/)
 * (@cotswoldphoto)
 * [9 years, 7 months ago](https://wordpress.org/support/topic/map-on-hidden-tab-solution/#post-8413858)
 * So, the code I gave was just a heads up (ut thanks for the code snippet), in 
   that it works as is. No need for the InitMap. It works because the google code
   is already listening for a window resize, so the code I posted tricks the google
   code into thinking the window has been resized, and thus it resizes the map, 
   which it fact it does not have to. But in ‘resizing’ it, it initializes the map
   for you. As this code is written to run only once and then unbind itself, if 
   the map gets hidden again and shown again, it does not run a second time, saving
   on API calls.
 *  Plugin Author [NickDuncan](https://wordpress.org/support/users/nickduncan/)
 * (@nickduncan)
 * [9 years, 7 months ago](https://wordpress.org/support/topic/map-on-hidden-tab-solution/#post-8413928)
 * Hi Trevor
    I was half asleep when I replied to you. Sorry about that. Thank you
   so much for sending this snippet through. I will run some tests on it on our 
   side and include it in the next version! Please do get in touch with me on our
   website so I can chat to you about possible future work if you have capacity.
 *  Thread Starter [CotswoldPhoto](https://wordpress.org/support/users/cotswoldphoto/)
 * (@cotswoldphoto)
 * [9 years, 7 months ago](https://wordpress.org/support/topic/map-on-hidden-tab-solution/#post-8415158)
 * Let me know if the tests work out OK first 😉 You do of course, still need to
   know the element name or handle that needs to be clicked to reveal the hidden
   div with the map on. Not so hard, but still ….
 *  Thread Starter [CotswoldPhoto](https://wordpress.org/support/users/cotswoldphoto/)
 * (@cotswoldphoto)
 * [9 years, 7 months ago](https://wordpress.org/support/topic/map-on-hidden-tab-solution/#post-8416691)
 * The only issue that I have found thus far is, despite the map setting being to
   center the map, it appears with the pin to the left, just off the map 🙁
 *  [Jarryd Long](https://wordpress.org/support/users/jarryd-long/)
 * (@jarryd-long)
 * [9 years, 7 months ago](https://wordpress.org/support/topic/map-on-hidden-tab-solution/#post-8418164)
 * Hi [@cotswoldphoto](https://wordpress.org/support/users/cotswoldphoto/)
 * Thank you very much for your feedback. We’ll definitely look into that.
 * Would running `InitMap(_MAP_ID_);` instead of the ‘resize’ fix perhaps help? 
   By running the Init function, this should center the map properly.
 *  Thread Starter [CotswoldPhoto](https://wordpress.org/support/users/cotswoldphoto/)
 * (@cotswoldphoto)
 * [9 years, 7 months ago](https://wordpress.org/support/topic/map-on-hidden-tab-solution/#post-8423397)
 * Ok, my issue was to be able to find the map ID. So, what I did was install ACF
   and make a field called `map_id` and for each post that has a map in their put
   the map ID. Then, in a PHP widget for the single post page (outside the loop),
   this:
 *     ```
       <script>
       jQuery(document).ready(function($){
         var $mapclickparent = $('#ab759e6c-edb7-8').parent();
         var mapClickHandler = function () {
           $($mapclickparent).unbind('click', mapClickHandler);
           InitMap(<?php echo get_field('map_id');?>);
         };
         $($mapclickparent).bind('click', mapClickHandler);
       });
       </script>
       ```
   
 * And then in the loop, this to output the map:
 *     ```
       <?php
        echo do_shortcode( '[wpgmza id="' . get_field('map_id') . '"]' );
       ?>
       ```
   
 * Thanks to you, Jarryd, sorted!!
 *  [Jarryd Long](https://wordpress.org/support/users/jarryd-long/)
 * (@jarryd-long)
 * [9 years, 7 months ago](https://wordpress.org/support/topic/map-on-hidden-tab-solution/#post-8433816)
 * Hi [@cotswoldphoto](https://wordpress.org/support/users/cotswoldphoto/)
 * So glad this is now working as expected! Just shout if there’s anything else 
   we can assist you with 🙂

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Map on hidden Tab – Solution’ is closed to new replies.

 * ![](https://ps.w.org/wp-google-maps/assets/icon-256x256.png?rev=3058363)
 * [WP Go Maps - Google Maps, OpenStreetMap, Leaflet Map](https://wordpress.org/plugins/wp-google-maps/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/wp-google-maps/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/wp-google-maps/)
 * [Active Topics](https://wordpress.org/support/plugin/wp-google-maps/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/wp-google-maps/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/wp-google-maps/reviews/)

 * 8 replies
 * 3 participants
 * Last reply from: [Jarryd Long](https://wordpress.org/support/users/jarryd-long/)
 * Last activity: [9 years, 7 months ago](https://wordpress.org/support/topic/map-on-hidden-tab-solution/#post-8433816)
 * Status: resolved