google.maps.event.trigger (मानचित्र, 'आकार बदलें') का उपयोग कैसे करें

Question

मैं जेएस के लिए नया हूं, और पिछले प्रश्न का उत्तर मिला है, जिसने एक नया सवाल उठाया, जिसने मुझे यहां फिर से लाया।

मेरे पास एक खुला मॉडल है जिसमें Google मानचित्र API शामिल है। जब कोई बटन क्लिक किया जाता है, तो मॉडल प्रकट होता है, और Google मानचित्र प्रदर्शित करता है। मेरी समस्या यह है कि मानचित्र का केवल एक तिहाई प्रदर्शित हो रहा है। ऐसा इसलिए है क्योंकि एक आकार बदलने वाले ट्रिगर को लागू करने की आवश्यकता है। मेरा सवाल यह है कि मैं google.maps.event.trigger (मानचित्र, 'आकार बदलें') को कैसे कार्यान्वित करूं? मैं कोड के इस छोटे स्निपेट कहां रखूं?

यहां मेरी टेस्ट साइट है। हाथ में समस्या देखने के लिए Google मानचित्र बटन पर क्लिक करें। http://simplicitdesignanddevelopment.com/Fannie%20E%20Zurb/foundation/contact_us.html#

प्रकट मॉडल स्क्रिप्ट:

<script type="text/javascript"> 
    $(document).ready(function() { 
    $('#myModal1').click(function() { 
    $('#myModal').reveal(); 
     }); 
      }); 
</script> 

मेरे गूगल मानचित्र स्क्रिप्ट:

<script type="text/javascript"> 
function initialize() { 
var mapOptions = { 
center: new google.maps.LatLng(39.739318, -89.266507), 
zoom: 5, 
mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
var map = new google.maps.Map(document.getElementById("map_canvas"), 
mapOptions); 
} 

</script> 

div जो गूगल मानचित्र रखती है:

<div id="myModal" class="reveal-modal large"> 
    <h2>How to get here</h2> 
    <div id="map_canvas" style="width:600px; height:300px;"></div> 
    <a class="close-reveal-modal">&#215;</a> 
</div> 

Answer 1

वर खो वास्तव में अपने स्रोत कोड के साथ समस्याओं के एक जोड़े थे की जरूरत है।

• initialize() समारोह बनाई गई है, लेकिन कभी नहीं कहा जाता
• $(document).ready jQuery के बाद हमें लोड
• map एक वैश्विक चर होना चाहिए (जैसे @Cristiano फॉन्टीज़ कहा) बुलाया जाना चाहिए, न कि var map
• (महत्वपूर्ण) click घटना कभी नहीं कहा जाता है। आप दो विधियों को गठबंधन करने की कोशिश कर रहे हैं Reveal from Zurb एक संवाद खोलने के लिए प्रदान करता है (जेएस के साथ एक, केवल HTML के साथ एक)। आपको केवल जेएस विधि का उपयोग करने की आवश्यकता है।
• आप गलत आईडी का उपयोग कर रहे हैं (#myModal1 एचटीएमएल में कभी भी नहीं स्थित है)।

और अब: Download the solution (कृपया हमें अगली बार डाउनलोड/जेएसएफआईडीएल प्रदान करें, इसलिए हमें इसे स्वयं बनाने की आवश्यकता नहीं है)।

आशा है कि इससे मदद मिलेगी!

Answer 2

बस इसे यहां

जोड़ने

<script type="text/javascript"> 
    $(document).ready(function() { 
    $('#myModal1').click(function() { 
    $('#myModal').reveal(); 
    google.maps.event.trigger(map, 'resize'); 
     }); 
      }); 
</script> 

लेकिन आप एक वैश्विक चर के रूप में मानचित्र डाल दिया है, तो यहां

<script type="text/javascript"> 
    function initialize() { 
    var mapOptions = { 
     center: new google.maps.LatLng(39.739318, -89.266507), 
     zoom: 5, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
--> map = new google.maps.Map(document.getElementById("map_canvas"), 
    mapOptions); 
} 

</script> 

Answer 3

अंतिम उत्तर के लिए कोई टिप्पणी छोड़ने के लिए नहीं मिला, लेकिन क्रिस्टियानो फ़ॉन्ट्स के लिए +1 मदद! इसने काम कर दिया। मेरे मामले में:

<script type="text/javascript">  

$('div.map-box').hide(); 
$('li.map').mouseover(function(){ 
    $('div.map-box').show(); 
    google.maps.event.trigger(map, 'resize'); 
}); 

</script> 

Answer 4

google.maps.event.addListenerOnce(map, 'tilesloaded', function() { 
       google.maps.event.addListenerOnce(map, 'tilesloaded', function() { 
        google.maps.event.trigger(map, 'resize'); 
       }); 
});