Google मानचित्र की स्थिति लोड पर गलत

Question

मुझे एक iframed Google मानचित्र के साथ समस्या हो रही है। असल में, स्थिति गलत है, लेकिन हमेशा नहीं। मुझे लगता है कि इस समस्या के साथ समस्या कुछ हो सकती है कि नक्शा एक छिपे हुए div में है, जिसे बाद में प्रदर्शित किया जाता है।

क्या कोई यह सत्यापित कर सकता है कि यह वास्तव में एक समस्या है, या इसका समाधान प्रस्तावित करता है? मेरे पास मानचित्र पर अधिक नियंत्रण नहीं है, क्योंकि यह कहीं और से निकला है।

मैंने iframe एक आईडी देने की कोशिश की है, जिसे मैं google.maps.event.trigger(map, "resize"); के साथ उस फ़ंक्शन पर लक्षित करता हूं जो मूल कंटेनर को प्रकट करता है, लेकिन इसका कोई फायदा नहीं हुआ।

<iframe width="450" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/?ie=UTF8&amp;t=m&amp;ll=56.084298,11.074219&amp;z=6&amp;output=embed"></iframe> 

आप देख सकते हैं, वहाँ इस बारे में कुछ नहीं विशेष:

संपादित
के रूप में अनुरोध किया है, यहाँ नक्शा है। यह डेनमार्क दिखाना है, लेकिन यह कुछ बार जर्मनी और पोलैंड को दिखाता है। मुझे यकीन है कि वे अच्छे स्थान हैं, लेकिन ग्राहक इसका बहुत कम उपयोग देखते हैं।

Answer 1

मैं भी इस समस्या की पुष्टि कर सकता हूं। मुझे नहीं लगता कि यह आपके छिपे हुए div से संबंधित है, क्योंकि मेरे पास निश्चित तत्वों के साथ भी समस्या है।

समस्या यह है कि जिस स्थान पर आप मानचित्र को केंद्र में रखना चाहते हैं, किसी कारण से आईफ्रेम के ऊपरी बाएं कोने में समाप्त होता है। मुझे लगता है कि ऐसा इसलिए है क्योंकि Google के पक्ष में नक्शा का आकार बदलना घटना आईफ्रेम के पूर्ण आकार को जानने से पहले बहुत जल्दी फायरिंग कर रही है।

इस अब तक यह मेरे लिए काम करता कोशिश करें,:

1. iframe src टैग निकालें।

2. एम्बेड कहीं आइफ्रेम नीचे जावास्क्रिप्ट कोड नीचे:

   <script type='text/javascript'> 
       jQuery("iframe#headerMap").attr("src", "http://maps.google.com/maps/ms?etc etc...."); 
   </script> 
   

क्योंकि यह iframe के बाद नक्शा लोड करता है। अगर मुझे भविष्य में अभी भी समस्याएं हैं तो मैं उपरोक्त कोड में थोड़ी देर देरी करने का प्रयास करूंगा, इसे दस्तावेज़ लोड के बाद चलाऊंगा।

Answer 2

"आकार बदलें" घटना मानचित्र वस्तु को एक तर्क के रूप में लेती है, आईडी नहीं। चूंकि आप iframe में maps.google.com का उपयोग कर रहे हैं, मुझे विश्वास नहीं है कि वास्तविक मानचित्र ऑब्जेक्ट तक पहुंच बनाना संभव है।

दुर्भाग्यवश, मुझे लगता है कि सबसे अच्छा जवाब Google मानचित्र v3 एपीआई के एक सरल कार्यान्वयन का उपयोग करने के लिए स्विच करना है, बजाय if.google.com पर maps.google.com एम्बेड करने के बजाय। यह आपको आवश्यकता होने पर उचित रूप से "आकार बदलना" ट्रिगर करने की अनुमति देगा, क्योंकि आपके पास मानचित्र ऑब्जेक्ट तक पहुंच होगी। http://code.google.com/apis/maps/documentation/javascript/tutorial.html

इस उदाहरण की तरह एक साधारण कार्यान्वयन सेट करें::

यहाँ प्रलेखन है http://code.google.com/apis/maps/documentation/javascript/examples/map-simple.html

फिर google.maps.event.trigger करने के लिए (नक्शा, "आकार परिवर्तन") आपके कॉल समाप्त किए जाने; जब आप छुपा कंटेनर दिखाते हैं।

Answer 3

पुष्टि कर सकता है कि मैंने 'tabbed' divs में दो मानचित्र प्रदर्शित करते समय इस समस्या का अनुभव किया है। अर्थात। एक div लोड छिपा हुआ है।

समस्या का सामना करने का सबसे आसान तरीका यह है कि समस्या का थोड़ा सा उपयोग करने और त्रुटि को कॉपी करने और गलत कोड ऑफसेट करने के लिए एम्बेड कोड को चिपकाने से पहले मानचित्र को ऑफसेट करना है। लेकिन मूल लिंक के रूप में बाहरी लिंक (बाहरी Google मानचित्र के नीचे का लिंक) छोड़ना याद रखें अन्यथा यह मानचित्र भी ऑफसेट हो जाएगा।

Answer 4

सरल उपाय:

1. आईडी = "नक्शा" के साथ एक div अंदर आइफ्रेम रखो।
2. div को छुपाएं नहीं, क्योंकि नक्शा गलत उत्पन्न होगा।

3. div पूर्ण, 10.000 पिक्सल बाईं ओर स्थित करें। इस मामले में नक्शा स्क्रीन पर नहीं होगा, लेकिन लोड हो जाएगा।

   jQuery ('# map')। Css ({"position": "absolute", "left": "- 10000px"});

4. आप नक्शे ऐड प्रदर्शित करने के लिए बटन क्लिक करते हैं:

   jQuery('#map').show(); jQuery('#map').css({"position":"static"}); 
   

5. div जोड़ने छिपाने के लिए:।

   jQuery ('# नक्शा') को छिपाने();

Answer 5

मैं div को देखने के बाद कुछ समय देरी के साथ लोड मैप का सुझाव देता हूं या नक्शा पकड़ने वाला नहीं है। मेरे लिए काम किया

$(document).ready(function() { 
     $('.togglebtn').click(function() { 

if(!$('#map_canvas').is(':visible')){ 
       setTimeout(function(){initialize()}, 500); 
       } 
    }); 
}); 


    //your function 
function initialize() { 


     var mapOptions = { 
      zoom: 3, 
      center : new google.map.LatLng(31.510474,80.352287), 
      center: new google.maps.LatLng(44.510474, 50.352287), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 
     var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 

     var contentSC_PAK = "SoftCircles Pakistan"; 
     ..... 
     ..... 

     and rest of your map code to initialize map 



     }); 

    } 

Answer 6

मैं div को देखने के बाद कुछ समय देरी के साथ लोड मैप का सुझाव देता हूं या नक्शा पकड़ने वाला नहीं है। कोशिश करो !

$(document).ready(function() { 
     $('.togglebtn').click(function() { 

if(!$('#map_canvas').is(':visible')){ 
       setTimeout(function(){initialize()}, 500); 
       } 
    }); 
}); 


    //your function 
function initialize() { 


     var mapOptions = { 
      zoom: 3, 
      center : new google.map.LatLng(31.510474,80.352287), 
      center: new google.maps.LatLng(44.510474, 50.352287), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 
     var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 

     var contentSC_PAK = "SoftCircles Pakistan"; 
     ..... 
     ..... 

     and rest of your map code to initialize map 



     }); 

    } 

Answer 7

यह एक मेरे लिए काम नहीं किया:

jQuery("iframe#headerMap").attr("src", "http://maps.google.com/maps/ms?etc etc...."); 

... इसलिए मैं इस समस्या को हल करने के लिए एक और रास्ता तलाश करनी है।

setTimeout(function() { 
    $("#contents") 
    .css({opacity: 0}).fadeIn() 
    .animate({opacity:1}, 1000, function() { 
    }); 
}, 2500); 

और मैं गूगल मानचित्र #contents में दिखाया जाना चाहते थे, और:

मेरे समस्या यह है कि मैं एक <div> कि display: none था 2,5 सेकंड इस तरह के बाद इस तरह से था, और दृश्य बन गया मुझे एक ही समस्या थी कि लाल मार्कर शीर्ष बाएं कोने पर था।

तो मैंने पृष्ठ में <div id="map"></div> जोड़ा।

तो मैं एक php map.php बुलाया फ़ाइल में आइफ्रेम सामान जोड़ा, और मैं इस jQuery रेखा से नीचे कहा:

setTimeout(function() { 
    $("#map").load('map.php'); 
}, 2500); 

तो यह map आईडी के साथ div में आइफ्रेम साथ map.php भरी हुई। यह पूरी तरह से काम किया।