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

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