Google मानचित्र V3 केंद्रित नहीं है, मानचित्र का केवल हिस्सा दिखाता है

Question

मैं आईफोन के लिए एक जेक्यू टच-आधारित ऐप विकसित कर रहा हूं और इसका हिस्सा Google मानचित्र API (V3) का उपयोग करता है। मैं मानचित्र पर भौगोलिक स्थान निर्देशांक पास करने में सक्षम होना चाहता हूं और इसे मार्कर के साथ स्थान केंद्रित करना चाहता हूं। जो मैं अब प्राप्त कर रहा हूं वह उचित ज़ूम स्तर पर नक्शा है लेकिन वांछित केंद्र-बिंदु ऊपरी-राइटथैंड कोने में दिखाई देता है। यह नक्शा क्षेत्र के लगभग एक तिहाई को भी दिखा रहा है (बाकी ग्रे है) और जब आप पैन या ज़ूम करते हैं तो यह कुछ हद तक गलत तरीके से व्यवहार करता है। यहां कोड है:

var coords = { latitude : "35.510630", longitude : "-79.255374" }; 
var latlng = new google.maps.LatLng(coords.latitude, coords.longitude); 
var myOptions = { 
    zoom: 12, 
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
var map = new google.maps.Map($("#map_canvas").get(0), myOptions); 
var marker = new google.maps.Marker({ 
    position: latlng, 
    map: map, 
});  

बीटीडब्ल्यू: यह अन्य प्लेटफार्मों/ब्राउज़रों पर भी दिखता है और व्यवहार करता है।

विचार? Screen shot of iPhone emulator

Answer 1

सुनिश्चित करें कि आप की चौड़ाई/ऊंचाई निर्धारित किया है:

अग्रिम धन्यवाद,

मार्क

---

जोड़ा गया यह लिंक है जिसे वास्तव में दिखाता हूँ क्या हो रहा है है कैनवास बिल्कुल (यानी)

$("#map_canvas").width(window.innerWidth).height(window.innerHeight - $('.toolbar').height()); 

बेशक यह मानता है कि आपके पास jqtouch टूलबार ऊपर और चल रहा है ...

Answer 2

मुझे लगता है कि आप नक्शा प्रदर्शित करने के लिए AJAX का उपयोग कर रहे हैं, या नक्शा को किसी बिंदु पर छुपाया गया है और फिर इसे एक के आधार पर प्रदर्शित करें कार्रवाई?

इस मामले में Google मानचित्र कंटेनर के आकार को नहीं जानता है और यह आमतौर पर मानचित्र के केवल एक हिस्से को आकर्षित करेगा।

इसे ठीक करने के लिए, मानचित्र का आकार बदलें, फिर अपने lat/lng पर फिर से केंद्रित करें। कुछ इस तरह:

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

// Recenter the map now that it's been redrawn    
var reCenter = new google.maps.LatLng(yourLat, yourLng); 
map.setCenter(reCenter); 

Answer 3

Google Maps API 3 & jQTouch

पर अपना जवाब देखने के मूल रूप से, अपने #map_canvas div बार जब आप div उस में jqtouch से छिपा दिया गया है के रूप में नक्शे का निर्माण कर रहे हैं पर दिखाई नहीं देता है। एपीआई इससे निपट नहीं सकता है और आकार गलत हो सकता है।

बहुत आसान होगा अगर gmaps v3 ने कन्स्ट्रक्टर में स्पष्ट आकार सेट करने की अनुमति दी है (v2 किया था)।

वैसे भी, 'पृष्ठ एनीमेशन एंड' तक मानचित्र का निर्माण करने में देरी।

Answer 4

मानचित्र को सही ढंग से किराए पर लेने का समाधान पृष्ठ पर अपने मानचित्र-कोड को निष्पादित करना है JQTouch का एनीमेशन एंड-इवेंट। पृष्ठ #div भीतर

उदाहरण:

<div id="map_canvas" style="width:100%; height:100%; min-height:400px; background:#ccc;"></div> 
    <script type="text/javascript"> 

    $('#map').bind('pageAnimationEnd', function() { 

     var mapOptions = { 
      zoom: 13, 
      disableDefaultUI: true, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 

     if(navigator.geolocation) { 
      navigator.geolocation.getCurrentPosition(function(position) { 
        var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude) 

        var marker = new google.maps.Marker({ 
         map: map, 
         draggable: false, 
         position: pos 
        }); 

        map.setCenter(pos); 
       }, function() { 
        console.log('Device Environment Capable of Geolocation but not Available - Geolocation failed'); 
       } 
      ); 
     } else { 
      console.log('Device Environment Not Capable of Geolocation - Geolocation failed'); 
     } 
    }); 
    </script> 

हालांकि, मैं अपने आप मुसीबत मानचित्र फुलस्क्रीन-ऊंचाई बनाने के लिए होने लगता है। इस मामले में किसी भी मदद की सराहना की है। ध्यान दें कि फिक्स्ड फ़ूटर नेविगेशन के लिए DataZombies बार एक्सटेंशन का उपयोग कर रहा हूं।

Answer 5

AJAX के साथ सामग्री लोड करने और मानचित्र-कैनवास div को छिपाने और छिपाने के बाद दिशाओं के साथ मानचित्र को लोड करने में एक ही सटीक समस्या थी।

आपको ब्रेट डीवुडी कहते हैं कि आकार बदलने की घटना को ट्रिगर करना है, लेकिन मुझे पता चला कि मेरा वैश्विक चर गुंजाइश से बाहर हो गया है और मुझे उन्हें संदर्भित करना था, यानी Google मानचित्र चर, मेरे कार्यों को विंडो ऑब्जेक्ट पर स्पष्ट रूप से ।

if (status == google.maps.DirectionsStatus.OK) { 

    directionsDisplay.setDirections(response); 

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

} 

Answer 6

ब्रेट DEWOODY के समाधान काम किया, लेकिन जैसा कि मैंने मेरे लिए मोडल एकमात्र समाधान में नक्शा दिखाने रहा हूँ इस तरह setTimeout जोड़ने के लिए किया गया था::

setTimeout(function() { 
    google.maps.event.trigger(map, 'resize'); 
    var reCenter = new google.maps.LatLng(lat, lng); 
    map.setCenter(reCenter); 
}, 500); 

यहाँ क्या मैं अपने directionsService अंदर प्रतिक्रिया है

सेटटाइमआउट जोड़ने के बाद नक्शा प्रस्तुत करता है और केंद्र पूरी तरह से केन्द्रित करता है।