css - Google मानचित्र एपीआई v3 टूल्स: दृश्य विकृतियां?




google-maps-api-3 css-position (2)

मैंने अभी देखा है कि gMap व्यू टूल्स प्रदर्शित कर रहे हैं ... बल्कि असामान्य रूप से। उनके क्षेत्रों को अभी भी ठीक तरह से परिभाषित किया जा रहा है- मैं उनके साथ ठीक से बातचीत कर सकता हूं, यह सिर्फ उनकी उपस्थिति है जो गड़बड़ लगती है।

मैंने किसी भी सीएसएस को मानचित्र के टुकड़ों में लागू नहीं किया है, और मैप कंटेनर पर लागू एकमात्र सीएसएस width:100%; height:100%; z-index:0; width:100%; height:100%; z-index:0; (जो मैं आमतौर पर करता हूं)।

मेरे पास उस पृष्ठ पर अन्य तत्व हैं जिनके पास position:absolute; और position:fixed; और कुछ उच्च z-index एस (500 और 1000)। क्या यह संभव है कि वे मानचित्र के औजारों के दृश्य विकृति का कारण बन रहे हों?

मैं क्रोम, क्रोम कैनरी, एफएफएक्स, सफारी, और ओपेरा (मैक ओएसएक्स पर) के नवीनतम संस्करणों में एक ही अजीब दृश्य विरूपण देखता हूं।

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

यहां सटीक HTML है (मैंने अन्य तत्वों और सीएसएस को तोड़ दिया और अजीबता अभी भी होती है):

<html style="width:100%;height:100%;">
    <head>
        <link rel="stylesheet" href="shared/bootstrap/css/foundation.min.css">
        <link rel="stylesheet" href="shared/bootstrap/css/v2.2.2.min.css">
        <script
            type="text/javascript"
            src="http://maps.googleapis.com/maps/api/js?key=...">
        </script>
        <script type="text/javascript">
            function ginit() {
                var vancouver = new google.maps.LatLng(49.285415,-123.114982);
                var mapOptions = {
                    center: vancouver,
                    zoom: 15,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(
                    document.getElementById("map"),
                    mapOptions
                );
                var infowindow = new google.maps.InfoWindow(),
                    marker;
            }//ginit()
        </script>
    </head>
    <body onload="ginit();" style="width:100%;height:100%;">
        <div id="map" style="width:100%;height:100%;"></div>
    </body>
</html>

संपादित करें : ऐसा लगता है कि यह मुद्दा फाउंडेशन और बूटस्ट्रैप के संयोजन से आ रहा है: किसी को भी हटाने से समस्या ठीक हो जाती है। इसके अलावा इससे कोई फर्क नहीं पड़ता कि पृष्ठ संदर्भ वर्गों पर libs से कोई तत्व नहीं है, यह विकृति का कारण बनता है।

मैंने इसे एक पहेली में डालने की कोशिश की, लेकिन मुझे लोड करने के लिए jsfiddle.net नहीं मिला।


Google मानचित्र कैनवस के लिए बूटस्ट्रैप और फाउंडेशन सेट { img max-width:100% } । इससे नक्शा नियंत्रण विकृत दिखाई देने का कारण बनता है। सीएसएस को max-width:none; बदलें max-width:none; । [ source ]

चेतावनी : स्पष्ट रूप से img { max-width: 100% … } छवियों के लिए अभिन्न अंग है उत्तरदायी लेआउट के लिए स्वत: आकार बदलता है, इसलिए सावधानी के साथ उपयोग करें। [ source ]


फाउंडेशन 5 न केवल जीएमएपी तोड़ता है, यह MapQuest भी तोड़ता है। सौभाग्य से दोनों गोमाप एंड क्वेस्ट में कक्षाएं हैं जो हमें केवल मानचित्र प्रदर्शन के लिए F5 व्यवहार को अधिभारित करने की अनुमति देती हैं।

.google-map {
  height: 400px;  // no default height
  color: #191970; // default color for both text and background is white !!!
}

.quest-map {
  height:400px; 
  color: #191970;
}

// Fix Foundation bug with MapQuest
.mqa-display {
  img {max-width: none;}
  label { width: auto; display: inline; }
}

// Fix Foundation bug with GoogleMap
.gm-style {
  img { max-width: none; }
  label { width: auto; display: inline; }
}




appearance