WordPress.org

Ready to get started?Download WordPress

Forums

WP Flexible Map
[resolved] Tabs & Map (12 posts)

  1. popsantiago
    Member
    Posted 1 year ago #

    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/

  2. webaware
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  3. popsantiago
    Member
    Posted 1 year ago #

    Hi @webaware,

    here it's my element url : http://choosart.popsantiago.com/evenement/lancement-choosart/

    Thank you,

    Laurent

  4. webaware
    Member
    Plugin Author

    Posted 1 year ago #

    G'day Laurent,

    You're not using jQuery UI, you're using jQuery Tools; 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>
  5. popsantiago
    Member
    Posted 1 year ago #

    Hi Webaware.

    Bad news, script doesn't fix it...

    Any other idea ?

  6. webaware
    Member
    Plugin Author

    Posted 1 year ago #

    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>
  7. popsantiago
    Member
    Posted 1 year ago #

    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/
    How can i increase the 100% height ?

    See you

    Laurent

  8. webaware
    Member
    Plugin Author

    Posted 1 year ago #

    @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

  9. webaware
    Member
    Plugin Author

    Posted 1 year ago #

    @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

  10. popsantiago
    Member
    Posted 1 year ago #

    Done and Works
    Thank you so much!
    See you

  11. xAgyex
    Member
    Posted 11 months ago #

    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.

  12. webaware
    Member
    Plugin Author

    Posted 11 months ago #

    @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

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.