JavaScript के लिए सबसे सही तरीके
Maps JavaScript API, सिर्फ़ स्टैंडर्ड ECMAScript और W3C DOM एनवायरमेंट के साथ काम करता है. इसका मतलब है कि ब्राउज़र की ओर से उपलब्ध कराई गई, इन-बिल्ट क्लास और ऑब्जेक्ट के व्यवहार में बदलाव करने या उन्हें ओवरराइड करने से, Maps JavaScript API काम नहीं करेगा. कभी-कभी, अन्य लाइब्रेरी, ब्राउज़र के व्यवहार में बदलाव करके Maps JavaScript API के साथ टकराव पैदा कर सकती हैं. ऐसा होने पर, ब्राउज़र स्टैंडर्ड ECMAScript एनवायरमेंट नहीं रह जाता. Maps JavaScript API, उन लाइब्रेरी के साथ काम नहीं करता.
ऐसी लाइब्रेरी जो Maps JavaScript API के साथ काम नहीं करती हैं:
- Prototype: यह लाइब्रेरी, नॉन-स्टैंडर्ड तरीके से
Array.from()औरElement.prototype.remove()को ओवरराइड करती है. - MooTools (पुराने वर्शन): यह लाइब्रेरी, नॉन-स्टैंडर्ड तरीके से
Array.from()को ओवरराइड करती है. - DateJS (पुराने वर्शन): यह लाइब्रेरी, नॉन-स्टैंडर्ड तरीके से
Date.now()को ओवरराइड करती है.
कभी-कभी, काम न करने वाली लाइब्रेरी में बदलाव करके, नॉन-स्टैंडर्ड ओवरराइड को हटाया जा सकता है.
सीएसएस के लिए सबसे सही तरीके
Maps JavaScript API की मदद से, मैप जोड़ने या उसे पसंद के मुताबिक बनाने पर, आपके वेबपेज पर लागू की गई कुछ स्टाइल, मैप की स्टाइल को ओवरराइड कर सकती हैं. इससे सीएसएस में टकराव हो सकता है. स्टाइलिंग के लिए, सीएसएस फ़्रेमवर्क या JavaScript कॉम्पोनेंट का इस्तेमाल करने पर, मैप की स्टाइल के साथ सीएसएस के और भी टकराव हो सकते हैं.
सीएसएस फ़्रेमवर्क और JavaScript स्टाइलिंग कॉम्पोनेंट, ब्राउज़र के बीच रेंडरिंग के अंतर को मैनेज करने के लिए, अक्सर सीएसएस रीसेट या नॉर्मलाइज़र का इस्तेमाल करते हैं. फ़्रेमवर्क, वेबपेज एलिमेंट के मार्जिन और बॉर्डर को स्केल करने के लिए, अक्सर box-sizing एलिमेंट का इस्तेमाल करते हैं. आम तौर पर, इसमें ब्राउज़र के डिफ़ॉल्ट व्यवहार को content-box से बदलकर border-box किया जाता है.
इस तरह के सीएसएस रीसेट की वजह से, Maps JavaScript API के साथ सीएसएस में टकराव हो सकता है. इसकी वजह यह है कि एपीआई, उपयोगकर्ता एजेंट स्टाइलशीट में किए गए बदलावों के साथ काम नहीं करता. अगर फ़्रेमवर्क या कॉम्पोनेंट, Maps JavaScript API की सीएसएस क्लास या डीओएम एलिमेंट को रेफ़र करता है, तो सीएसएस के और भी टकराव हो सकते हैं.
इन टकरावों से बचने के लिए, हमारे पास कुछ सुझाव हैं.
खासियत
आपके मैप पर, Google Maps की स्टाइल से पहले, एम्बेड की गई और लिंक की गई सीएसएस लागू की जाती है. अगर आपके पेज की सभी स्टाइल, एम्बेड की गई या लिंक की गई सीएसएस में तय की गई हैं, तो पक्का करें कि आपके मैप पर सही स्टाइल लागू हों. इसके लिए, खासियत के नियमों का पालन करें.
img, button, और a जैसे सामान्य सीएसएस एलिमेंट को आपके पेज की
स्टाइल से ओवरराइट किया जा सकता है. सबसे आम स्थितियों में से एक यह है कि img एलिमेंट के max-width एट्रिब्यूट को 100 प्रतिशत पर सेट किया जाता है. इससे मैप के कॉम्पोनेंट, खराब दिख सकते हैं या छिप सकते हैं. ऐसा तब हो सकता है, जब
InfoWindow का इस्तेमाल किया जा रहा हो.
इस समस्या को ठीक करने के लिए, अपने मैप के img एलिमेंट को अपडेट किया जा सकता है. इससे max-width एट्रिब्यूट को none पर सेट किया जा सकेगा. उदाहरण के लिए:
#map img
{
max-width : none;
}
क्लास के नाम
JavaScript Maps API के क्लास के नामों और इंटरनल डीओएम एलिमेंट को रेफ़र न करें. यह सुविधा उपलब्ध नहीं है. साथ ही, इसकी वजह से आपकी वेबसाइट में बिना सूचना दिए, बड़े बदलाव हो सकते हैं. इसके बजाय, हमारा सुझाव है कि अपने मैप के लिए कंटेनर के तौर पर, अपनी सीएसएस क्लास बनाएं.
अगर कोई सीएसएस फ़्रेमवर्क या JavaScript कॉम्पोनेंट, इस तरह के रेफ़रंस का इस्तेमाल करता है, तो बॉक्स-साइज़िंग ओवरराइड करने का हमारा सुझाव, एक समाधान के तौर पर काम आ सकता है.
सीएसएस बॉक्स-साइज़िंग ओवरराइड करना
सीएसएस बॉक्स-साइज़िंग ओवरराइड करने की सुविधा, मैप की स्टाइलिंग से जुड़े टकरावों को ठीक करने का एक तरीका है. यह सुविधा तब ज़्यादा काम की हो सकती है, जब सीएसएस फ़्रेमवर्क या JavaScript स्टाइलिंग कॉम्पोनेंट का इस्तेमाल किया जा रहा हो. उदाहरण के लिए, अगर box-sizing को border-box पर सेट किया गया है, तो यह तरीका अपनाएं:
box-sizingओवरराइड करें. इससे<html>एलिमेंट कोborder-boxपर सेट किया जा सकेगा.- अपने मैप के अलावा, सभी एलिमेंट के लिए
box-sizing: inheritका इस्तेमाल करें. - कस्टम मैप कंटेनर बनाएं. इससे
box-sizingएलिमेंट कोinitialपर रीसेट किया जा सकेगा.
सीएसएस का उदाहरण:
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
.container-map {
box-sizing: initial;
}