Google मैप्स एपीआई वी 3: अजीब यूआई डिस्प्ले ग्लिच (स्क्रीनशॉट के साथ)

Question

Google मानचित्र यूआई घटकों के साथ इस अजीब गड़बड़ी के कारण किसी भी विचार के साथ कोई भी व्यक्ति, आपसे सुनने के लिए वास्तव में आभारी रहें!

नक्शे के साथ बनाई गई है:

 var options = { 
     zoom: <?php echo $this->zoom ?>, 
     center: new google.maps.LatLng(<?php echo $this->centre_lat ?>, <?php echo $this->centre_lon ?>), 
      mapTypeControl: false, 
      mapTypeId: google.maps.MapTypeId.ROADMAP     
     }; 

     var map = new google.maps.Map(document.getElementById('map_canvas'), options); 

और गड़बड़ भी कोई मार्कर के साथ एक ही है।

Answer 1

हम एक ही समस्या में भाग गए। सीएसएस डिजाइनर इस शैली का प्रयोग किया गया था:

:

style.css

img {max-width: 100%; } 

के बजाय नियंत्रण ज़ूम अक्षम करने के लिए, हम तो जैसे map_canvas तत्वों के लिए img शैली अधिभावी द्वारा समस्या तय style.css:

#map_canvas img { max-width: none; } 

नियंत्रण ज़ूम अब प्रदर्शित सही ढंग से है।

"आईएमजी अधिकतम-चौड़ाई: 100%" सेट करना एक तकनीक है जो उत्तरदायी/द्रव वेब साइट डिज़ाइन में नियोजित है ताकि ब्राउज़र फिर से आकार में आनुपातिक रूप से फिर से आकार में हो। स्पष्ट रूप से कुछ सीएसएस ग्रिड सिस्टम ने डिफ़ॉल्ट रूप से इस शैली को सेट करना शुरू कर दिया है। यहाँ द्रव छवियों के बारे में अधिक जानकारी: http://www.alistapart.com/articles/fluid-images/ सुनिश्चित नहीं हैं कि क्यों गूगल मानचित्र के साथ इस संघर्ष ...

Answer 2

ज़ूम नियंत्रण के साथ एक समस्या की तरह लग रहा है। अपने विकल्पों में zoomControl:false जोड़ने का प्रयास करें।

वास्तव में ऐसा लगता है कि सामान्य ज़ूम स्लाइडर पृष्ठ के बाईं ओर स्थित है (फ़ायरबग> तत्व का निरीक्षण करें)। एक सीएसएस संघर्ष हो सकता है?

Answer 3

खैर मैं इस के लिए ठीक हो गया है:

img {max-width: 100%; height: auto;} 

:

अपने सीएसएस पर आप की तरह कुछ जोड़ा

यह वैश्विक बनाने के लिए नहीं की कोशिश है और यह ठीक करना चाहिए आप

Answer 4

:) गूगल मैप्स एपीआई के नवीनतम संस्करण के साथ आप इस की जरूरत है:

<style> 
    .gm-style img { max-width: none; } 
    .gm-style label { width: auto; display: inline; } 
</style> 

Answer 5

अगर आप Dreamweaver द्रव ग्रिड सुविधा आपके डिफ़ॉल्ट की स्थापना का उपयोग कर रहे इस तरह दिखना चाहिए:

img, object, embed, video { 
    max-width: 100%; 
} 
/* IE 6 does not support max-width so default to width 100% */ 
.ie6 img { 
    width:100%; 
} 

इस प्रयास करें: के रूप में यह है

object, embed, video { 
    max-width: 100%; 
} 
#map_canvas img { max-width: none; } 
/* IE 6 does not support max-width so default to width 100% */ 
.ie6 img { 
    width:100%; 
} 

सिर्फ कोड के स्थान पर।

Answer 6

बूटस्ट्रैप (संस्करण 2.3.2 के रूप में) छवियों के साथ स्वीकार्य उत्तर में वैसे ही गड़बड़ करता है।

वास्तव में, मुझे संदेह है कि हैरोल्डो की वेबसाइट में उपयोग किया गया डिज़ाइन बूटस्ट्रैप का उपयोग करता है।

मैं बस इसे पोस्ट कर रहा हूं क्योंकि किसी और ने बूटस्ट्रैप का उल्लेख नहीं किया है, और कोई बूटस्ट्रैप-विशिष्ट समाधान की तलाश में हो सकता है।

Answer 7

मैं अपनी स्क्वायर स्पेस वेबसाइट पर इस समस्या में भाग गया। मुझे सीएसएस स्टाइल शीट तक पहुंच नहीं थी। चूंकि आप एक HTML दस्तावेज़ एम्बेड कर रहे हैं, इसलिए आप समस्या को ठीक करने के लिए इनलाइन सीएसएस का उपयोग कर सकते हैं। मैंने एक साइट व्यापक परिवर्तन करने के बजाय कंटेनर की शैली में संशोधन किया (जो मैं नहीं कर सका)। यहाँ मैं क्या किया है:

<style> 
    html, body, #map-canvas { 
    height: 600px; 
    width: 100%; 
    margin: 0px; 
    padding: 0px 
    } 
    #map-canvas img {max-width: none;} 
</style> 

Answer 8

यह मेरे लिए काम किया: "महत्वपूर्ण"

#map img { max-width: none !important; } (from Patrick's answer) 

विशेषता किसी अन्य शैली ओवरराइड करने के लिए यकीन है कि बनाता है, #map आईडी सौंपा जब आप नए घोषित है वस्तु Gmaps:

<script> 
    map = new GMaps({ 
      div: '#map',   <- your id 
      lat: *******, 
      lng: *******, 
      scrollwheel: false, 
      panControl: true, 
      .... 
      ... 
</script>