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

Question 1

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

यहाँ छवि विवरण दर्ज करें

मानचित्र के साथ बनाया गया है:

        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);

और गड़बड़ समान है, यहां तक कि बिना मार्कर के भी।

Question 2

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

style.css

img {max-width: 100%; }

ज़ूम नियंत्रण को अक्षम करने के बजाय, हमने इस तरह से map_canvas तत्वों के लिए img शैली को ओवरराइड करके समस्या को ठीक किया:

style.css:

#map_canvas img { max-width: none; }

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

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

Question 3

Google नक्शे के नवीनतम संस्करण के साथ आपको इसकी आवश्यकता है:

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

Question 4

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

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

Question 5

वैसे मुझे इसके लिए फिक्स मिला:

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

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

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

Question 6

यह मेरे लिए काम किया:

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

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

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

Question 7

यदि आप 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%;
}

जैसे है वैसे ही कोड बदलें।

Question 8

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

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

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

Question 9

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

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