JQuery मोबाइल और Google मानचित्र सही ढंग से प्रस्तुत नहीं कर रहे हैं

मैं बस एक jquery मोबाइल पेज के भीतर एक Google मानचित्र प्रदर्शित करने की कोशिश कर रहा हूं। अगर मैं सीधे पेज लोड करता हूं तो यह काम करता है। हालांकि, अगर मैं किसी अन्य पृष्ठ से पृष्ठ पर नेविगेट करता हूं तो यह केवल एक नक्शा टाइल प्रस्तुत करता है। पहली नज़र में यह दिखाई देगा कि मेरा मुद्दा https://forum.jquery.com/topic/google-maps-inside-jquery-mobile JQuery मोबाइल और Google मानचित्र सही ढंग से प्रस्तुत नहीं कर रहे हैं

हालांकि, मैं पहले से ही 'पेजिनिट' ईवेंट के भीतर अपना प्रारंभिक प्रदर्शन कर रहा था और मेरे मानचित्र div की एक सेट चौड़ाई और ऊंचाई है।

मैंने http://code.google.com/p/jquery-ui-map/ देखा है, लेकिन यदि संभव हो तो मैं एक (अन्य) तृतीय पक्ष प्लगइन का उपयोग नहीं करूंगा। पहले से

<!DOCTYPE HTML> 
<html> 
<head> 
    <title>PhoneGap</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <script src="cordova-1.6.1.js"></script> 
    <link rel="stylesheet" href="jquery.mobile-1.1.0.min.css" /> 
    <script src="jquery-1.7.1.min.js"></script> 
    <script src="global.js"></script> 
    <script src="jquery.mobile-1.1.0.min.js"></script> 
</head> 
<body> 
    <div id="mapPage" data-role="page"> 
     <style type="text/css"> 
      html 
      { 
       height: 100%; 
      } 
      body 
      { 
       height: 100%; 
       margin: 0; 
       padding: 0; 
      } 
      #map_canvas 
      { 
       height: 100%; 
      } 
     </style> 
     <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=***API_KEY_REMOVED***&sensor=true"> 
     </script> 
     <script type="text/javascript"> 
      function initialize() { 
       var height = $(window).height() - 50; 
       var width = $(window).width(); 

       $("#map_canvas").height(height); 
       $("#map_canvas").width(width); 
       var myLatlng = new google.maps.LatLng(39.962799, -82.999802); 
       var myOptions = { 
        center: myLatlng, 
        zoom: 18, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }; 
       var map = new google.maps.Map(document.getElementById("map_canvas"), 
      myOptions); 
       //alert($(map.getDiv()).width()); 
       var marker = new google.maps.Marker({ 
        position: myLatlng, 
        map: map, 
        title: "" 
       }); 
       google.maps.event.trigger(map, 'resize') 
      } 

      $("#mapPage").live('pageinit', function() { 

       initialize(); 
      }); 

     </script> 
     <div data-role="header" id="menuHeader"> 
      <a href="MenuDialog.htm" class="menuLink" data-role="none" data-rel="dialog"> 
       <img class="headerIcon" style="height: 40px; border-right: 1px solid #333333; padding-right: 5px;" 
        id="MenuIcon" src="images/menuIcon.png" /></a> 
      <p> 
       Loc 
      </p> 
     </div> 
     <div data-role="content"> 
      <div id="map_canvas" style="margin-top: 50px;"> 
      </div> 
     </div> 
</body> 
<html>

धन्यवाद आप के लिए मदद:

यहाँ मेरा पेज लग रहा है की तरह है।

अद्यतन:

कुछ प्रयोग मैं अपने आकार घटना के लिए निम्न देरी जोड़ा बाद:

setTimeout(function() { 

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

यह समस्या ठीक करने के लिए लग रहा था। उम्मीद है कि यह किसी और की मदद करता है।

स्रोत

2012-05-07 Shawn

समय समाप्त समारोह वास्तव में बात यह है कि मैं जरूरत थी। चीयर्स –

यह शानदार काम करता है। जबकि मुझे लगता है कि यह काफी हैकी है, यहां बहुत सारे विकल्प नहीं हैं।टाइमआउट बहुत अच्छा काम करता है क्योंकि यह उचित आकार बदलने के लिए इसे कॉल करने से पहले मानचित्र को पहले प्रस्तुत करने की अनुमति देता है। यहां मेरा एकमात्र मुद्दा यह है कि हम कैसे सुनिश्चित कर सकते हैं कि 500 एमएस पर्याप्त है? एक कॉलबैक दृष्टिकोण बेहतर काम कर सकता है, जैसे नक्शे को "निष्क्रिय" ईवेंट को आग लगाना। निष्क्रिय मेरे लिए काम नहीं करता था और मुझे हुक करने के लिए एक और उचित घटना नहीं मिल सका। :( – Eric

setTimeout महान काम करता है। धन्यवाद –

आप <body> और <div id="map_canvas"> के बीच पदानुक्रम में <html> और <body> 100% आकार पर नहीं, बल्कि <div> रों है।

अपने सीएसएस में भी जोड़ने की कोशिश करें (content किसी को id की आवश्यकता होगी)।

आपको यह सुनिश्चित करने की भी आवश्यकता हो सकती है कि एपीआई <div> मानचित्र के आकार को resize ईवेंट को ट्रिगर करके सबकुछ तैयार हो। केवल एक ही टाइल दिखा रहा है एपीआई का एक क्लासिक लक्षण यह गलत हो रहा है (और आमतौर पर यह मानता है कि इसमें शून्य आकार है)।

स्रोत

2012-05-07 21:32:27

शरीर और नक्शा div के बीच एकमात्र div "सामग्री" div है, जिसे मैं वास्तव में 100% नहीं बनना चाहता हूं। मैं मानचित्र को शीर्षलेख के नीचे प्रदर्शित करना चाहता हूं। मैंने कहा, नक्शा सही तरीके से प्रदर्शित होता है जब मैं बिना किसी लिंक के पेज को लोड करता हूं, इसलिए मुझे नहीं लगता कि यह केवल एक शैली आधारित मुद्दा है ... – Shawn

बिंदु यह है कि आपने उस div को आकार बिल्कुल नहीं दिया है –

यह JQuery मोबाइल फ्रेमवर्क स्टाइल द्वारा संभाला जाता है। मैंने आगे बढ़कर अपने सुझाव को शैली को मैन्युअल रूप से ओवरराइड करके एक शॉट दिया और जैसा कि मुझे संदेह है, यह समस्या नहीं है। समस्या JQuery मोबाइल पेज के बीच बातचीत के साथ प्रतीत होती है लोडिंग विधि और Google मानचित्र API, लेकिन मुझे यह पता नहीं लगा सकता कि यह समस्या क्या है ... – Shawn

मैंने एक वेबसाइट पर पढ़ा है कि यदि आपको यह समस्या है तो यह है कि जब आप अपना Google मानचित्र प्रारंभ करते हैं तो डोम पूरी तरह से लोड नहीं होता है। आप अपने कोड में यह जोड़ना होगा:

$(document).bind("pageshow", function(event, data){ 
google.maps.event.trigger(map, 'resize'); 
});

यह मेरे लिए काम करता है। आपके द्वारा दिखाए जाने वाले प्रत्येक पृष्ठ पर आकार बदलने के लिए शायद क्रूर हो सकता है लेकिन ... यह काम करता है। एक आकार बदलने फायरिंग की

स्रोत

2012-07-03 09:58:33 Nogebour

यह सही उत्तर है: आकार बदलने के बजाए डी –

सही उत्तर, हम डोम लोड होने के बाद मानचित्र को आमंत्रित करेंगे। – satheeshwaran

इसके बजाय, मैं एक 'pagecreate' घटना में मेरे js लपेटकर ... इस तरह से इस हल:

$(document).on('pagecreate', '#map', function() { 
    var mapOptions = { 
     center: new google.maps.LatLng(40.773782,-73.974236), 
     zoom: 12, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

});

स्रोत

2013-08-13 08:55:47

अगर मैं कर सकता हूं तो मैं एक लाख बार वोट बटन दबा दूंगा, बहुत बहुत धन्यवाद !!! – satheeshwaran

मुझे लगता है कि सही दृष्टिकोण ईवेंट ट्रिगर करने के होगा जब आंशिक टाइल एक बार लोड किया जाता है। नीचे कोड स्निपेट आपको प्राप्त करने में आपकी सहायता करेगा।

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

स्रोत

2014-04-08 12:26:21 Noor

मुझे पता चला कि मेरे लिए मुद्दा यह था कि JQuery मोबाइल पृष्ठों को लोड करने के लिए अजाक्स का उपयोग करता है। मुझे यकीन है कि अगर यह सबसे अच्छा अभ्यास है नहीं कर रहा हूँ, लेकिन मैं बस सामान्य रूप से मेरी नक्शा पेज लोड करने के लिए यह मजबूर लंगर टैग में निम्न कोड डालकर:

data-ajax="false"

स्रोत

2014-06-16 16:18:52

JQuery मोबाइल और Google मानचित्र सही ढंग से प्रस्तुत नहीं कर रहे हैं

उत्तर

संबंधित मुद्दे