छिपा div

Question

में Google मानचित्र मेरे पास दो टैब वाला एक पृष्ठ है। पहले टैब में फोटो और दूसरा Google मानचित्र है। समस्या यह है कि Google मानचित्र पूरी तरह से ड्राइंग नहीं कर रहा है क्योंकि यह एक छिपे हुए div में है। इसलिए मैंने प्रारंभिक() फ़ंक्शन को ऑनक्लिक() का उपयोग करके मानचित्र टैब के href पर ले जाया। यह पहली बार काम करता है जब आप उस पर क्लिक करते हैं लेकिन जब आप फ़ोटो टैब पर वापस आते हैं और फिर मानचित्र टैब पर वापस जाते हैं तो मानचित्र केवल आंशिक रूप से खींचता है। यदि आप मानचित्र टैब पर दूसरी बार क्लिक करते हैं तो यह पूरी तरह से काम करता है। कोई विचार?

टैब जावास्क्रिप्ट:

<script type="text/javascript"> 

$(function() { 
    var tabContainers = $('div.tabs > div'); 

    $('div.tabs ul.tabNavigation a').click(function() { 
     tabContainers.hide().filter(this.hash).show(); 

     $('div.tabs ul.tabNavigation a').removeClass('selected'); 
     $(this).addClass('selected'); 

     return false; 
    }).filter(':first').click(); 
}); 

</script> 

Google मानचित्र JavaScript:

<script type="text/javascript"> 
    function initialize() { 
    var latlng = new google.maps.LatLng(<?=$lat ?>, <?=$lng ?>); 
    var myOptions = { 
     zoom: 15, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), 
     myOptions); 

    var marker = new google.maps.Marker({ 
     position: latlng, 
     map: map, 
     title:"<?=$fulladdress ?>" 
    }); 
} 
</script> 

एचटीएमएल:

<div class="tabs"> 
     <ul class="tabNavigation"> 
      <li><a href="#first">Photos</a></li> 
      <li><a href="#map_canvas" onclick="initialize(); return false;">Map</a></li> 
     </ul> 


     <div id="first"> </div> 
     <div id="map_canvas" ></div> 

Answer 1

मैं इस देखा है इससे पहले कि आप मानचित्र का आकार बदलना होगा:

google.maps.event.trigger(map, 'resize'); 
map.setZoom(map.getZoom()); 

,210

यह वी 3 के लिए है:

http://code.google.com/p/gmaps-api-issues/issues/detail?id=1448

एक छोटे से अधिक जानकारी:

https://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/251f20b769d116ea/ba3ca54f5e1352a2?pli=1

Answer 2

पीट से दिए गए लिंक का पालन करके, मुझे लगता है कि हल करने में सक्षम था।

आपके पास शायद CalcRoute() नामक एक फ़ंक्शन है। आपको इस फ़ंक्शन को दो बार ट्रिगर करने की आवश्यकता हो सकती है। सबसे पहले, जब यह ट्रिगर होता है तो यह ठीक हो जाता है, लेकिन जब आप टैब बदलते हैं तो आपको उस फ़ंक्शन को फिर से ट्रिगर करने की आवश्यकता हो सकती है। यह काम करना चाहिए!

Answer 3

यह मेरे लिए काम करता है:

google.maps.event.trigger(map, 'resize'); 

लेकिन, टैब दिखाई देता है के बाद ...

$('a[href="#mytab"]').on('shown', function (e){ 
     google.maps.event.trigger(map, 'resize'); moveTo(); 
    }); // realocate the map 

मैं बूटस्ट्रैप उपयोग कर रहा हूँ, jQuery UI में समान कार्य पाते हैं।

Answer 4

मैंने नियंत्रक को आकार बदलने वाले मानचित्र को बाध्य करके यह काम किया जो एक सेक्शन कंटेनर को अनदेखा करता है। यहां का महत्वपूर्ण हिस्सा नक्शा का आकार बदलने के लिए दो बार क्लिक करने की आवश्यकता से संबंधित है, जो सेटटाइम बिट में है। इससे नक्शा के चारों ओर रैपर पर चौड़ाई की गणना करने की अनुमति देने में पर्याप्त देरी होगी।

/** 
* This example will work with foundation 4 sections. However, the idea is the same for any collapsed map. 
* Load a map object 
* Find it's parent (which is hidden) 
* Bind a click event to the element which 'unhides' your container 
* */ 
(function($) { 
    Drupal.behaviors.foundationCollapseHack = { 
     attach: function(context, settings) { 
      // check whether we have a map 
      if(typeof settings.vrListingMap != 'undefined') { 
       // on page load 
       $(window).load(function() { 
       // grab a map object 
       var map = Drupal.behaviors.vrwebListingMaps.map; 
       // if we have a section container 
       if($(map.b).parents('.section-container').length > 0) { 
        // find any maps in these tabs and bind a click to it 
        $(map.b).parents('section').find('p.title').children('a').click(function() { 
         // B.c of timing - it's important to wrap the resize stuff in a timeOut. 
         // This assures that getComputedStyle is not null when resize fires 
         setTimeout(function() { 
          var coord = map.getCenter(); 
          google.maps.event.trigger(map, "resize"); 
          map.setCenter(new google.maps.LatLng(coord.lat(), coord.lng()), settings.vrListingMap.options.default_zoom);  
         }, 0); 
        }); 
        } 
       }); 
      } 
     } 
    } 

})(jQuery); 

Answer 5

इस दिन संघर्ष करने के बाद, मैंने पूछताछ के लिंक को उसकी समस्या का पालन किया।

मैं इस टुकड़ा कुछ कई बार

google.maps.event.trigger(map, 'resize'); 

और मैं बस कोड के इस टुकड़े डालने के लिए सही जगह नहीं पा सके देखा। प्रोग्रामिंग में नौसिखिया के रूप में, मैंने मानचित्र को कॉल करने के बाद, सभी जगहों पर कोशिश की, जिसमें इनिट के बाद शामिल है। कुछ भी काम नहीं किया।

फिर मैंने एक वास्तविक स्थिति का पालन करने का फैसला किया, वह व्यक्ति जिसने वास्तव में इस प्रश्न से पूछा था। यही वह है जो उसने किया, उसके लिए काम किया और यह मेरे लिए भी काम किया।मैंने मामूली बदलाव किया क्योंकि यह हमेशा ऐसा ही होता है। उसका लिंक टिप्पणी में से एक है।

मेरा एडोब डीडब्ल्यू इस विकल्प को क्लिक नहीं करता है, लेकिन ... यह काम करता है। आपको टैग एंकर पर सीधे प्रयास करना चाहिए जहां div छुपा हुआ है। यह उचित जगह हो सकती है। शरीर टैग (या एंकर टैग) पर init और हाल ही में कॉल करें। एक बार मानचित्र पर क्लिक करने के बाद, यह नक्शा हाल ही में होगा।

<body onclick="initialize(); center_map();"> 

function initialize { 
.... 

} 

के बाद दुनिया भर से इस एक

<script type="text/javascript"> 
function center_map() { 
var center = map.getCenter(); 
    document.getElementById("your_div_name").style.width = 'auto'; 
    document.getElementById("your_div_name").style.height = '250px'; 
    google.maps.event.trigger(map, 'resize'); 
    map.setCenter(center); 
} 
</script> 

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