सबसे अच्छे तरीके

JS के इस्तेमाल के सबसे सही तरीके

Maps JavaScript API सिर्फ़ स्टैंडर्ड ECMAScript और W3C DOM एनवायरमेंट के साथ काम करता है. इसका मतलब है कि ब्राउज़र से मिले पहले से मौजूद क्लास और ऑब्जेक्ट के व्यवहार में बदलाव करने या उसे बदलने पर, हो सकता है कि Maps JavaScript API काम न करे. कभी-कभी अन्य लाइब्रेरी ब्राउज़र के व्यवहार को बदलकर Maps JavaScript API से विरोध कर सकती हैं, ताकि वह अब स्टैंडर्ड ECMAScript एनवायरमेंट न रहे. Maps JavaScript API इन लाइब्रेरी के साथ काम नहीं करता.

ऐसी लाइब्रेरी जिन्हें Maps JavaScript API के साथ काम करने के लिए जाना जाता है:

  • प्रोटोटाइप: 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;
}