Map on hidden Tab – Solution

  • Resolved CotswoldPhoto

    (@cotswoldphoto)


    8 years ago

    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

    (@nickduncan)

    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

    (@cotswoldphoto)

    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

    (@nickduncan)

    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

    (@cotswoldphoto)

    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

    (@cotswoldphoto)

    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

    (@jarryd-long)

    Hi @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

    (@cotswoldphoto)

    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

    (@jarryd-long)

    Hi @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.