Title: Tabs & Map
Last modified: August 20, 2016

---

# Tabs & Map

 *  Resolved [popsantiago](https://wordpress.org/support/users/popsantiago/)
 * (@popsantiago)
 * [13 years, 2 months ago](https://wordpress.org/support/topic/tabs-map/)
 * Hi,
 * I got a problem with the map jquery tabs content, i saw your note on FAQ off 
   this problem but my skill in jQuery don’t fix the issue with your faq =/
 * In my template file i got this code for my tabs systeme :
 *     ```
       <script type="text/javascript">	jQuery(document).ready(function($){	jQuery("ul.tabs-nav").tabs("> .pane"); }); </script>
   
       <div class="post-tabs-ver">
       <ul class="tabs-nav"><li class="current">Lieux de l'évènement</li><li class="">Carte & transports</li><li class="">Autres</li></ul>
   
       <div class="pane" style="display: block;">
       <h4><?php the_field('location_name_event'); ?></h4>
       <p>Description : <?php the_field('location_description_event'); ?></p>
       </div>
   
       <div class="pane" style="display: none;">
       <p><strong>Carte :</strong><br/>
       <?php
       $address = get_post_meta($post->ID, 'location_adresse_event');
       $address1 = $address[0]['address1'];
       $address2 = $address[0]['address2'];
       $city = $address[0]['city'];
       $state = $address[0]['state'];
       $postal_code = $address[0]['postal_code'];
       $address = $address1 ." ". $postal_code ." ". $city;
       $shortcode_address = "[flexiblemap address='". $address ."' width='100%' height='400' title='Adelaide Hills' directions='true']";
       echo do_shortcode($shortcode_address); ?>
       <p><strong>Transports : </strong><?php the_field('transport_event'); ?></p>
       </div>
   
       <div class="pane" style="display: none;">
       <p><strong>Moyens de visite : </strong> <?php the_field('moyen_de_visite_event'); ?></p>
       </div>
       ```
   
 * How can i configure and witch class i need to put in your function jquery ?
 *     ```
       <script>	jQuery(function($) {
       $('div.ui-tabs').bind('tabsshow', function(event, ui) {
           $("#" + ui.panel.id + " div.flxmap-container").each(function() {
               var flxmap = window[this.getAttribute("data-flxmap")];
               flxmap.redrawOnce();
           });
       });
       });
       </script>
       ```
   
 * Thanks for help.
 * Laurent
 * [http://wordpress.org/extend/plugins/wp-flexible-map/](http://wordpress.org/extend/plugins/wp-flexible-map/)

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

 *  Plugin Author [webaware](https://wordpress.org/support/users/webaware/)
 * (@webaware)
 * [13 years, 2 months ago](https://wordpress.org/support/topic/tabs-map/#post-3407702)
 * G’day Laurent, can you provide a link to this on the web? I’d like to inspect
   the classes on elements after jQuery-UI is running.
 *  Thread Starter [popsantiago](https://wordpress.org/support/users/popsantiago/)
 * (@popsantiago)
 * [13 years, 2 months ago](https://wordpress.org/support/topic/tabs-map/#post-3407819)
 * Hi [@webaware](https://wordpress.org/support/users/webaware/),
 * here it’s my element url : [http://choosart.popsantiago.com/evenement/lancement-choosart/](http://choosart.popsantiago.com/evenement/lancement-choosart/)
 * Thank you,
 * Laurent
 *  Plugin Author [webaware](https://wordpress.org/support/users/webaware/)
 * (@webaware)
 * [13 years, 2 months ago](https://wordpress.org/support/topic/tabs-map/#post-3407852)
 * G’day Laurent,
 * You’re not using [jQuery UI](http://jqueryui.com/), you’re using [jQuery Tools](http://jquerytools.org/);
   different jQuery plugin, so different script required.
 * I haven’t tried this, but I reckon it should work. Please give it a try and let
   me know.
 *     ```
       <script>
       jQuery(function($) {
   
       $("ul.tabs-nav .pane").has("div.flxmap-container").click(function() {
           $("div.flxmap-container", this).each(function() {
               var flxmap = window[this.getAttribute("data-flxmap")];
               flxmap.redrawOnce();
           });
       });
   
       });
       </script>
       ```
   
 *  Thread Starter [popsantiago](https://wordpress.org/support/users/popsantiago/)
 * (@popsantiago)
 * [13 years, 2 months ago](https://wordpress.org/support/topic/tabs-map/#post-3407860)
 * Hi Webaware.
 * Bad news, script doesn’t fix it…
 * Any other idea ?
 *  Plugin Author [webaware](https://wordpress.org/support/users/webaware/)
 * (@webaware)
 * [13 years, 2 months ago](https://wordpress.org/support/topic/tabs-map/#post-3407894)
 * Right, you need to add a class or ID to the LI for that tab, and to the DIV containing
   that tab. Here’s some sample code. I’ll try to work this into the FAQ for the
   next release.
 *     ```
       <script>
       jQuery(function($){
   
       $("ul.tabs-nav").tabs("> .pane");
   
       $("ul.tabs-nav li.has-map").click(function() {
           $("div.pane.has-map div.flxmap-container").each(function() {
               var flxmap = window[this.getAttribute("data-flxmap")];
               flxmap.redrawOnce();
           });
       });
   
       });
       </script>
   
       <div class="post-tabs-ver">
       <ul class="tabs-nav">
       	<li class="current">Lieux de l'évènement</li>
       	<li class="has-map">Carte & transports</li>
       	<li class="">Autres</li>
       </ul>
   
       <div class="pane" style="display: block;">
       <h4>Example</h4>
       <p>Lorem ipsum dolor sit amet, consectetur...</p>
       </div>
   
       <div class="pane has-map" style="display: none;">
       <p><strong>Carte :</strong><br/>
       $map
       </div>
   
       <div class="pane" style="display: none;">
       <p><strong>Moyens de visite : </strong>moyen_de_visite_event</p>
       </div>
       ```
   
 *  Thread Starter [popsantiago](https://wordpress.org/support/users/popsantiago/)
 * (@popsantiago)
 * [13 years, 2 months ago](https://wordpress.org/support/topic/tabs-map/#post-3407911)
 * Hi Webaware,
 * That’s work ! Really thanks.
 * Last question not in JS (hummm i think ;-), the word itineraire (direction) is
   out of the tooltip marker… [http://choosart.popsantiago.com/evenement/lancement-choosart/](http://choosart.popsantiago.com/evenement/lancement-choosart/)
   
   How can i increase the 100% height ?
 * See you
 * Laurent
 *  Plugin Author [webaware](https://wordpress.org/support/users/webaware/)
 * (@webaware)
 * [13 years, 2 months ago](https://wordpress.org/support/topic/tabs-map/#post-3407912)
 * [@laurent](https://wordpress.org/support/users/laurent/): actually, that means
   it doesn’t quite work. But this works! 🙂
 * You need to load the map only when that tab is clicked for the first time. You
   can do that by tricking the map into thinking it’s in AJAX mode:
 *     ```
       // tell the map isajax='true', and grab it as a JSON-encoded string
       $shortcode_address = "[flexiblemap address='". $address ."' width='100%' height='400' title='Adelaide Hills' directions='true' isajax='true']";
       $map = json_encode(do_shortcode($shortcode_address));
       ```
   
 * Then change the JavaScript to load the map on the first click; the map will replace
   the div with id=”hidden-map”:
 *     ```
       <script>
       jQuery(function($){
   
       $("ul.tabs-nav").tabs("> .pane");
   
       $("ul.tabs-nav li.has-map").on("click", showMap);
   
       function showMap() {
       	$(this).off("click", showMap);
       	$("#hidden-map").html(<?php echo $map; ?>);
       }
   
       });
       </script>
   
       <div class="post-tabs-ver">
       <ul class="tabs-nav">
       	<li class="current">Lieux de l'évènement</li>
       	<li class="has-map">Carte & transports</li>
       	<li class="">Autres</li>
       </ul>
   
       <div class="pane" style="display: block;">
       <h4>Example</h4>
       <p>Lorem ipsum dolor sit amet, consectetur...</p>
       </div>
   
       <div class="pane has-map" style="display: none;">
       <p><strong>Carte :</strong><br/>
       <div id="hidden-map"></div>
       </div>
   
       <div class="pane" style="display: none;">
       <p><strong>Moyens de visite : </strong>moyen_de_visite_event</p>
       </div>
       ```
   
 * I’m going to have to update the FAQ on this one, both for jQuery Tools tabs and
   for adding the map late so that the infowindow displays properly. Thanks for 
   raising this problem!
 * cheers,
    Ross
 *  Plugin Author [webaware](https://wordpress.org/support/users/webaware/)
 * (@webaware)
 * [13 years, 2 months ago](https://wordpress.org/support/topic/tabs-map/#post-3407913)
 * [@popsantiago](https://wordpress.org/support/users/popsantiago/): please note,
   I edited the above code after I submitted it, so please use the code from this
   page and not from what you received by email.
 * cheers,
    Ross
 *  Thread Starter [popsantiago](https://wordpress.org/support/users/popsantiago/)
 * (@popsantiago)
 * [13 years, 2 months ago](https://wordpress.org/support/topic/tabs-map/#post-3407914)
 * Done and Works
    Thank you so much! See you
 *  [xAgyex](https://wordpress.org/support/users/xagyex/)
 * (@xagyex)
 * [12 years, 6 months ago](https://wordpress.org/support/topic/tabs-map/#post-3408089)
 * Hello all,
    can you assist me with a similar problem?
 * I am unable to load the map on my home page, tab, but loads find when I am on
   the actual page.
 *  Plugin Author [webaware](https://wordpress.org/support/users/webaware/)
 * (@webaware)
 * [12 years, 6 months ago](https://wordpress.org/support/topic/tabs-map/#post-3408090)
 * [@xagyex](https://wordpress.org/support/users/xagyex/): please start a new topic,
   and fully describe the problem with a link to the page where your map is. I’ll
   be glad to help you then.
 * cheers,
    Ross

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

The topic ‘Tabs & Map’ is closed to new replies.

 * ![](https://ps.w.org/wp-flexible-map/assets/icon-256x256.png?rev=2590627)
 * [Flexible Map](https://wordpress.org/plugins/wp-flexible-map/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/wp-flexible-map/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/wp-flexible-map/)
 * [Active Topics](https://wordpress.org/support/plugin/wp-flexible-map/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/wp-flexible-map/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/wp-flexible-map/reviews/)

 * 11 replies
 * 3 participants
 * Last reply from: [webaware](https://wordpress.org/support/users/webaware/)
 * Last activity: [12 years, 6 months ago](https://wordpress.org/support/topic/tabs-map/#post-3408090)
 * Status: resolved