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

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 इंटरैक्टिव कॉन्टेंट को लोड होने से रोक सकता है. ऐसा तब तक होता है, जब तक एलिमेंट या कंटेनर व्यूपोर्ट के पास नहीं पहुंच जाता. इन इंटरनल ऑप्टिमाइज़ेशन में किसी भी समय, बिना सूचना के बदलाव किया जा सकता है. इन्हें परफ़ॉर्मेंस को बेहतर बनाने के लिए डिज़ाइन किया गया है. इसलिए, इनका इस्तेमाल बिलिंग को मैनेज करने के लिए नहीं किया जाना चाहिए. जब तक कोई एलिमेंट नहीं दिखता, तब तक बिलिंग न हो, यह पक्का करने के लिए, अपने ऐप्लिकेशन कोड में उसे बनाने की प्रोसेस को रोकें.

सीएसएस के लिए सबसे सही तरीके

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

क्लास के नाम

Maps JavaScript 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;
}