Google मानचित्र ज़ूम नियंत्रण गड़बड़ है

Question

मैं कुछ मार्करों के साथ मानचित्र दिखाने के लिए Google मैप्स एपीआई (v.3) का उपयोग करता हूं। मैंने हाल ही में देखा कि मानचित्र को ज़ूम करने के लिए उपयोग किया जाने वाला नियंत्रण गड़बड़ है (यह हमेशा ऐसा नहीं था)। मुझे नहीं पता कि इसका कारण क्या है।

अपडेट करें

इस पोस्ट में मूल रूप से एक पेज का लिंक था जहां आप इस मुद्दे को देख सकते थे, लेकिन लिंक अब टूट गया है, इसलिए मैंने इसे हटा दिया है।

Comments

यह समस्या बूटस्ट्रैप यूएफ के साथ नहीं होती है आप मैप डिव आईडी के रूप में map_canvas का उपयोग करते हैं।

— बेन

Answer 1

आपके सीएसएस ने इसे गड़बड़ कर दिया। max-width: 100%;पंक्ति 814 में निकालें और ज़ूम नियंत्रण फिर से ठीक लगेगा। ऐसे बग से बचने के लिए अपने CSS में अधिक विशिष्ट चयनकर्ताओं का उपयोग करें।

Comments

यह भी सच है यदि आप ट्विटर के बूटस्ट्रैप का उपयोग कर रहे हैं, तो उनके पास एक img {अधिकतम-चौड़ाई: 100%} है जो इसे गड़बड़ कर देता है। यह 2.0.2 शाखा में तय किया जाना चाहिए

— केन

कई सीएसएस रीसेट फ़ाइलों को भी img {max-width:100%;}सेट किया है।

— १०:१२ पर avesse

बहुत बढ़िया! मुझे भी इससे समस्या हो रही थी, और मैं हाल ही में बूटस्ट्रैप सीएसएस में चला गया। मोटो ++++

— केविन मैनसेल

Jquery मोबाइल के साथ भी यही मुद्दा था। .ui-mobile img {max-width: 100%;}उनकी सीएसएस में वे हैं जिन्हें हटाया जाना था।

— जेरेमी

ठीक करने के लिए, बूटस्ट्रैप पर अपने मैप्स को दिवा क्लास के गूगल-मैप्स दें

— Samy Massoud

Answer 2

#myMap_canvas img {
    max-width: none;
}

यह मेरे लिए तय है, लेकिन मैं @Ben द्वारा प्रश्न पर टिप्पणी को इंगित करना चाहता था, "यह समस्या बूटस्ट्रैप के साथ नहीं होती है यदि आप मैप div आईडी के रूप में map_canvas का उपयोग करते हैं"। वह सही है। मैं बूटस्ट्रैप का उपयोग नहीं कर रहा हूं, लेकिन डिव आईडी बदलने के बाद समस्या शुरू हो गई है।

इसे वापस map_canvas पर सेट करना इसे अधिकतम-चौड़ाई परिवर्तन के बिना निर्धारित किया गया है।

<div id="map_canvas"></div>

Answer 3

यदि आप बूटस्ट्रैप का उपयोग कर रहे हैं, तो बस इसे "Google-मैप्स" श्रेणी दें। इसने मेरे लिए काम किया।

एक विकल्प के रूप में आप एक तरह के अंतिम उपाय के रूप में google map div के लिए सब कुछ रीसेट कर सकते हैं:

HTML:

<div class="mappins-map"><div> 

सीएसएस:

.mappins-map img { 
    max-width: none !important; 
    height: auto !important; 
    background: none !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

Answer 4

बस @ Max-Favilli जवाब साझा करें:

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

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

@ Max-Favilli को धन्यवाद

https://stackoverflow.com/a/19339767/3070027

Answer 5

यदि आप एक ट्विटर बूटस्ट्रैप उपयोगकर्ता हैं, तो आपको इस लाइन को अपने CSS में जोड़ना चाहिए:

.gmnoprint img { max-width: none; } 

Answer 6

मुझे यह समस्या और भी थी

.google-maps img {
    max-width: none;
}

काम नहीं किया। मैंने आखिरकार इस्तेमाल किया

.google-maps img {
    max-width: none !important;
}

और यह एक आकर्षण की तरह काम करता था।

Comments

यदि आपका चयनकर्ता अधिक विशिष्ट है तो यह आवश्यक नहीं है।

— वूडूकोड

Answer 7

यदि आप Yahoo के शुद्ध CSS का उपयोग कर रहे हैं, तो अपने div को बूटस्ट्रैप की तरह "google-map" वर्ग दें, और इस नियम को अपने CSS में रखें:

.google-maps img {
    max-width: none;
    max-height: none;
}

जहां तक ​​मैं बता सकता हूं, शुद्ध सीएसएस का इस मुद्दे को अपने दम पर ठीक करने का कोई तरीका नहीं है।

Answer 8

उन विकल्पों को आप लोगों ने मेरी वेबसाइट के लिए काम नहीं किया।

मैं बूटस्ट्रैप V3 का उपयोग करता हूं और कार्यक्षमता पर ध्यान केंद्रित करता हूं। मुख्य कारण यह था कि मैंने अपने नक्शे को एक अलग आईडी दी थी, फिर पीएसएल फ़ाइल पीले स्ट्रीटव्यू के साथ जूम बार प्रदर्शित करने के लिए इस्तेमाल की गई थी

मैंने Map_canvas का नाम बदलकर Mapholder कर दिया और फिर इसने मेरे लिए काम किया! संकेत के लिए वैसे भी धन्यवाद कि मैं सीएसएस फ़ाइलों में देखना चाहिए!

Answer 9

मैंने उपरोक्त सभी समाधानों की कोशिश की, और अन्य मंचों से अन्य कोई फायदा नहीं हुआ। यह वास्तव में कष्टप्रद था क्योंकि मेरे पास एक और गैर-वर्डप्रेस साइट है जहां कोड पूरी तरह से काम करता था। (मैं एक Wordpress पेज में Google मानचित्र प्रदर्शित करने की कोशिश कर रहा था, लेकिन ज़ूम और स्ट्रीटव्यू नियंत्रण विकृत थे)।

मैंने जो समाधान किया वह एक नई html फ़ाइल बनाने के लिए था (नोटपैड में सभी कोड कॉपी करें और इसे xyz.html नाम दें, "सभी फाइलें" टाइप करें)। फिर इसे वेबसाइट पर अपलोड / एफ़टीपी करें, और एक नया वर्डप्रेस पेज सेटअप करें और एक एम्बेड फ़ंक्शन का उपयोग करें। पृष्ठ को संपादित करते समय पाठ संपादक (दृश्य संपादक नहीं) पर जाएं और कॉपी / टाइप करें:

http: // पृष्ठ URL चौड़ाई = "900" ऊंचाई = "950">

यदि आप आयाम बदलते हैं, तो ऊपर दिए गए दोनों तर्कों में इसे बदलना याद रखें, या आपको अजीब परिणाम मिले।

वहाँ हम जाते हैं - कुछ अन्य उत्तरों की तरह चतुर नहीं हो सकता है, लेकिन यह मेरे लिए काम करता है! यहाँ साक्ष्य: http://a-bc.co.uk/latitude-longitude-finder/