Google मानचित्र और jQuery टैब

Question

मुझे सरल jQuery टैब में शामिल Google मानचित्र के साथ मामूली समस्या है।

jQuery:

मैं नीचे कोड चिपकाया

<div class="bluecontainer"> 
    <ul class="tabs"> 
     <li><a href="#tab1">Tab1</a></li> 
     <li><a href="#tab2">Tab2</a></li> 
     <li><a href="#tab3">Tab3</a></li> 
     <li><a href="#tab4">Tab4</a></li> 
    </ul> 
    <div class="tab_container"> 
     <div id="tab1" class="tab_content"> 
      <h2>Tab1</h2> 
     </div> 
     <div id="tab2" class="tab_content"> 
      <h2>Tab2</h2> 
     </div> 
     <div id="tab3" class="tab_content"> 
      <div> 
       google Map 
      </div> 
     </div> 
     <div id="tab4" class="tab_content"> 
      <h2>Tab4</h2> 
     </div> 
    </div> 
</div> 

मैं वास्तव में करने के लिए क्या करना है पता नहीं है:

$(document).ready(function() { 

    //Default Action 
    $(".tab_content").hide(); 
    $("ul.tabs li:first").addClass("active").show(); 
    $(".tab_content:first").show(); 

    //On Click Event 
    $("ul.tabs li").click(function() { 
     $("ul.tabs li").removeClass("active"); 
     $(this).addClass("active"); 
     $(".tab_content").hide(); 
     var activeTab = $(this).find("a").attr("href"); 
     $(activeTab).fadeIn(); 
     return false; 
    }); 

}); 

यहाँ टैब के लिए HTML है। क्या यह Google मानचित्र के साथ एक सामान्य समस्या है या मेरे टैब के साथ कुछ है? लेकिन वे सबकुछ ठीक से काम कर रहे हैं।

आप v2 या गूगल मैप्स एपीआई का v3 का उपयोग कर रहे हैं अग्रिम

Answer 1

मैंने समस्या हल कर दी है।

jQuery में css.visibility में छुपाएं() बदल गया, तो टैब इस तरह दिखते हैं।

$(document).ready(function() { 

    //Default Action 
    $(".tab_content").css({'visibility':'hidden' , 'position':'absolute'}); 
    $("ul.tabs li:first").addClass("active").show(); 
    $(".tab_content:first").css({'visibility':'visible' , 'position':'static'}); 

    //On Click Event 
    $("ul.tabs li").click(function() { 
     $("ul.tabs li").removeClass("active"); 
     $(this).addClass("active"); 
     $(".tab_content").css({'visibility':'hidden' , 'position':'absolute'}); 
     var activeTab = $(this).find("a").attr("href"); 
     $(activeTab).css({'visibility':'visible' , 'position':'static'}); 
     return false; 
    }); 

}); 

सब कुछ ठीक काम करता है।

Answer 2

में आपकी मदद के लिए धन्यवाद? अतीत में इस समस्या के बारे में कई प्रश्न हैं, उदाहरण के लिए this एक (जो कुछ अन्य समान प्रश्नों से भी जुड़ा हुआ है)। यह उन लोगों के माध्यम से पढ़ने लायक हो सकता है और देख सकता है कि सुझाए गए समाधानों में से कोई आपके लिए काम करता है या नहीं।

अपनी टिप्पणी के आधार पर नीचे मैं कोशिश करते हैं और बजाय एक अस्पष्टता एनीमेशन का उपयोग करने के लिए सुझाव है कि fadeIn [संपादित करें]:

//Default Action 
$(".tab_content").animate({ opacity: 0 }, 0); 
$("ul.tabs li:first").addClass("active").show(); 
$(".tab_content:first").animate({ opacity: 1 }, 0); 

//On Click Event 
$("ul.tabs li").click(function() { 
$("ul.tabs li").removeClass("active"); 
$(this).addClass("active"); 
$(".tab_content").animate({ opacity: 0 }, 0); 
var activeTab = $(this).find("a").attr("href"); 
$(activeTab).animate({ opacity: 1 }, 500); 
return false; 
}); 

मैं एक पेज गूगल मैप्स एपीआई v3 और JQuery उपयोग करने के लिए इसे अपने आप का इस्तेमाल किया है (JQuery टैब नहीं, हालांकि) और यह मेरे लिए ठीक काम किया।

Answer 3

मैं एक अलग दृष्टिकोण के साथ गया - टैब सक्रिय होने के बाद मानचित्र को आरंभ करें।

//Default Action 
jQuery(".tab_content").hide(); //Hide all content 
jQuery("ul.tabs li:first").addClass("active").show(); //Activate first tab 
jQuery(".tab_content:first").show(); //Show first tab content 

//On Click Event 
jQuery("ul.tabs li").click(function() { 
    jQuery("ul.tabs li").removeClass("active"); //Remove any "active" class 
    jQuery(this).addClass("active"); //Add "active" class to selected tab 
    jQuery(".tab_content").hide(); //Hide all tab content 
    var activeTab = jQuery(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content 
    jQuery(activeTab).fadeIn(); //Fade in the active content 
    if(activeTab == '#location_tab') {  
     initialize(); 
    } 
    return false; 
}); 

यह सुनिश्चित करें कि अपने नक्शे के आईडी के साथ टैब स्क्रिप्ट के साथ मेल खाता है: यहाँ मेरी कोड है। मेरे मामले में इसकी "location_tab"।

Answer 4

जब टैब खोला जाता है तो नक्शा आरंभ करना निश्चित रूप से जाने का तरीका है। यदि आप मानचित्र को छिपे हुए div पर प्रारंभ करने का प्रयास करते हैं, तो यह प्रदर्शित करने में विफल रहेगा। आपके पास जो भी कार्य है, वह आपके div को 'दिखाता है', div को दिखाए जाने के बाद मानचित्र को आरंभ करने के लिए उस फ़ंक्शन का उपयोग करें।

if(!maploaded && $("#" +tab2id+ "content").hasClass("map")) { 
    LoadGoogleMap(); 
    maploaded = true; 
} 

एक बार नक्शा लोड किया गया है, आप सुरक्षित रूप से छुपाने या बिना किसी समस्या के फिर से div दिखा सकते हैं, तो यह जाँच करने के लिए है कि क्या यह पहले ही लोड हो रहा है एक ध्वज जोड़ने के लायक है।

Answer 5

जब आप टैब बदलते हैं तो jquery टैब जैसे तत्व छिपाते हैं तो Google मानचित्र अच्छी तरह से काम नहीं करते हैं।

सरल समाधान jQuery टैब वस्तु की tabsshow घटना के लिए गूगल मानचित्र आरंभीकरण समारोह बाध्य करने के लिए है

$("#tabs").bind("tabsshow", function(event, ui) { 
      if(ui.index == 4) { //my map tab has index 4. This will avoid initialization for other tabs 
      initialize(); //google map initialization code 
     } 
     }); 

यह समाधान किसी भी अन्य प्लग है जो इस तरह के रूप में चौड़ाई और DOM तत्व की छिपाने पर निर्भर करता है के साथ काम करता jquery चिनाई प्लगइन।

Answer 6

यदि आप अभी भी इस तरह के अधिकार को पाने के लिए संघर्ष कर रहे हैं, तो इसे आजमाएं।

var hasLoadedMap = false; 
$("#tabs").tabs({ 
     activate: function(event, ui) { 
      //console.log(ui.newTab.context.id); 
      if(!hasLoadedMap && ui.newTab.context.id == 'ui-id-4') { //my map tab has index 4. This will avoid initialization for other tabs 
       console.log(ui.newTab.context.id); 
       initialize(); //google map initialization code 
       hasLoadedMap = true; 
      } 

     } 
}); 

मैंने उपरोक्त अन्य उत्तरों को कुछ और वर्तमान में अनुकूलित किया है।

Answer 7

मैं इसके साथ भी संघर्ष कर रहा हूं। तो मैं कोड प्रदान करूंगा जिसने मुझे यह करने में मदद की, Fuzz द्वारा प्रदान किए गए कोड के लिए धन्यवाद (मुझे खेद है कि मैं आपके उत्तर को वोट नहीं दे सकता क्योंकि मेरे पास पर्याप्त प्रतिष्ठा नहीं है ...)

I Google मानचित्र प्रदर्शित करने के लिए उन्नत कस्टम फ़ील्ड्स का उपयोग करें। मैंने एसीएफ वेबसाइट पर प्रलेखन के एसीएफ द्वारा प्रदान किए गए कोड का उपयोग किया और बूटस्ट्रैप्स पतन का उपयोग करके अपना नक्शा दिखाने में सक्षम होने के लिए अंतिम बिट ("दस्तावेज़ तैयार" भाग) संशोधित किया। मानचित्र के साथ div को पतन स्क्रिप्ट द्वारा छुपाया गया है और जब यह दिखाया गया है कि मानचित्र दिखाने के लिए जावास्क्रिप्ट निकाल दिया जाएगा। मानचित्र को छिपाने के बाद मुझे समस्या का सामना करना पड़ा कि नक्शे को फिर से दिखाते समय नक्शा स्थान सेटिंग्स चली गईं। फज़ के स्क्रिप्ट के टुकड़े की मदद से मुझे यह सही तरीके से काम कर रहा है। उम्मीद है कि यह दूसरों की भी मदद करेगा।

var hasLoadedMap = false; 
$('#map').on('shown.bs.collapse', function(e){ 
if(!hasLoadedMap){ 
$('.acf-map').each(function(){ 

    render_map($(this)); 

}); 
hasLoadedMap = true; 
} 

}); 

Answer 8

Bootstrap3: https://github.com/twbs/bootstrap/issues/2330

$('a[href="#edit_tab_map"]').on('shown.bs.tab', function(e) 
    { 
     google.maps.event.trigger(map, 'resize'); 
    });