Google मैप्स जावास्क्रिप्ट एपीआई 3 मोबाइल में त्रुटियों को कैसे ठीक करें

साइट पर Google मैप्स से मैप्स लगाते समय मुझे एक गंभीर समस्या का सामना करना पड़ा, अर्थात्, पेज लोड करने के बाद मैप को पूरी तरह से प्रदर्शित / प्रदर्शित नहीं करना, मैंने देखा कि उनमें से कई हैं, लेकिन बहुत कम उत्तर हैं, और यदि आप आउटबैक में कहीं उत्तर की तलाश के प्रशंसक हैं मंचों के नीचे, मैं इन समस्याओं को आरंभीकरण कोड के साथ हल करने के लिए कई विकल्प दूंगा, इसलिए पॉपकॉर्न के साथ वापस बैठो और पढ़ना शुरू करो

//google maps Api $("#companyform_showonmap_page").click(function(){ var geocoder; var map; function initialize() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(-34.397, 150.644); var myOptions = { zoom: 17, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP, timeout: 6000, maximumAge: 50000, enableHighAccuracy:true } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } /* if ((company.getcompanygpslalo(gpslalo)!=0) && (company.getcompanygpslalo(gpslalo)!= null)){ map.setCenter(company.getcompanygpslalo(gpslalo)); // console.log(results[0].geometry.location.Ua);     // console.log(results[0].geometry.location.Va); var marker = new google.maps.Marker({ map: map, position: company.getcompanygpslalo(gpslalo) }); }else{*/ function codeAddress() { var address = document.getElementById("address").value; var gps = company.getgpslalo(); //          geocoder.geocode( { 'address': $("#companyform_gpscoords").val()}, function(results, status) { //        adress    JSON   console.log(company.getgpslalo(gps)); console.log(gps.la); console.log(gps.lo); if ((gps.la)>0 &&(gps.la)>0) { map.setCenter(new google.maps.LatLng((gps.la),(gps.lo))); pos = new google.maps.LatLng((gps.la),(gps.lo)); // console.log(results[0].geometry.location.Ua);      // console.log(results[0].geometry.location.Va); var marker = new google.maps.Marker({ map: map, position: pos }); } else { //             input' address if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); // console.log(results[0].geometry.location.Ua);      // console.log(results[0].geometry.location.Va); var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); } else { alert("      : " + status); } //company.getcompanycoordinats(results[0].geometry.location.Ua,results[0].geometry.location.Va);      } }); } function loadScript() { var script = document.createElement("script"); script.type = "text/javascript"; script.src = "http://maps.google.com/maps/api/js?sensor=true&callback;=initialize"; document.body.appendChild(script); } window.onload = loadScript; $.mobile.changePage("#companyform_showonmap_page"); window.onload = initialize(); window.onload = codeAddress(); }); 

पूरा रहस्य फंक्शन लोडस्क्रिप्ट () के साथ-साथ window.onload में है, जिसे ठीक $ .mobile.change के लिए रखा जाना है। new google.maps.LatLng - इस तरह लिखना न भूलें, क्योंकि Google यह नहीं समझता है कि आप उससे क्या चाहते हैं अन्यथा (जावास्क्रिप्ट Google एपीआई v3 के साथ काम करने के लिए बदलाव)। जैसा कि आपने देखा, मैंने 2 बार window.onload लिखा है, हालांकि फ़ंक्शन को 1 बार निष्पादित किया जाना चाहिए, लेकिन जब किसी कारण के लिए Google मैप्स के साथ काम कर रहा है, तो window.onload 2 बार मुझे बचाया, मुझे नहीं पता कि क्या हो रहा है, लेकिन यह काम करता है!

एक और बात, मैं नहीं जानता कि क्यों, लेकिन जब एक div के आकार का निर्धारण करते हैं, तो% सही ढंग से प्रदर्शित नहीं होता है, इस समस्या का समाधान बहुत तुच्छ और सरल है

 <div id="map_canvas" style="width: 100%; height: 500px; position:center;" ></div> 

जहां map_canvas कंटेनर है जिसमें हमारा नक्शा प्रदर्शित होता है।

अगली समस्या Google जियोलोकेशन से संबंधित है, वही समस्या, एक नक्शा खींचना, नीचे मैं एक समाधान के साथ एक पूर्ण उदाहरण देता हूं

  $( "#map-page" ).live( "pageshow", function() var defaultLatLng = new google.maps.LatLng(37.530073, 15.112151); if ( navigator.geolocation ) { function success(pos) { // Location found, show coordinates on map drawMap(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude)); } function fail() { drawMap(defaultLatLng); // Show default map } // Find users current position navigator.geolocation.getCurrentPosition(success, fail, {enableHighAccuracy:true, timeout: 6000, maximumAge: 50000 }); } else { drawMap(defaultLatLng); // No geolocation support } function drawMap(latlng) { var myOptions = { zoom: 17, center: latlng, zoomControl: true, scaleControl: true, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map( document.getElementById("map-canvas"), myOptions); // Add an overlay to the map of current lat/lng var marker = new google.maps.Marker({ position: latlng, map: map, title: "  !" }); } }); 

इन लाइनों में इस समस्या का समाधान

 {enableHighAccuracy:true, timeout: 6000, maximumAge: 50000 } 

और फिर, आप उस div की ऊँचाई सेट नहीं कर सकते जहाँ आपका नक्शा% में प्रदर्शित होगा।

ये सिफारिशें हैं जो टैबलेट / मोबाइल और स्थिर उपकरणों दोनों पर एक ही प्रदर्शन स्थापित करने में मदद करती हैं। हालांकि बंद है। जावास्क्रिप्ट गूगल एपीआई 3 प्रलेखन ने सभी उदाहरणों को% में आकार के साथ लिखा है, लेकिन वास्तव में यह एक सिरदर्द है।

एक और समस्या जिसका मुझे समाधान नहीं मिला वह है नियंत्रणों का प्रदर्शन, वे कुछ कार्डों पर गायब हो जाते हैं और सामान्य रूप से दूसरों पर प्रदर्शित होते हैं, पूरा अंतर पृष्ठों में है, कोड समान है, लेकिन मुझे अभी भी बग नहीं मिला है।

बॉस ने एक दिलचस्प समाधान सुझाया, अभ्यास में मदद की, नीचे दिए गए कोड

 // Jquery      ,      $.getDocHeight = function(){ return Math.max( $(document).height(), $(window).height(), /* For opera: */ document.documentElement.clientHeight ); }; //alert( $.getDocHeight() ); $(".googlemap").height($.getDocHeight()-10); //  googlemap      $(".googlemap").width("98%");//     googlemap`  

और एक आवश्यक वर्ग के साथ एक कार्ड ब्लॉक

 <div id="map_canvas" class="googlemap" style="position:center" ></div> 

मुझे उम्मीद है कि ये युक्तियां पाठकों को मोबाइल और पारंपरिक उपकरणों पर Google मानचित्र प्रदर्शित करने में आने वाली समस्याओं से जल्द निपटने में मदद करेंगी।