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

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

Maps JavaScript API सिर्फ़ स्टैंडर्ड ECMAScript और W3C DOM के साथ काम करता है. इसका मतलब है कि ब्राउज़र की ओर से दी गई, पहले से मौजूद क्लास और ऑब्जेक्ट के व्यवहार में बदलाव करने या उन्हें बदलने से, Maps JavaScript API काम नहीं कर सकता. कभी-कभी, अन्य लाइब्रेरी ब्राउज़र के व्यवहार में बदलाव करके, Maps JavaScript एपीआई के साथ संघर्ष कर सकती हैं. इससे, ब्राउज़र अब स्टैंडर्ड 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 कॉम्पोनेंट इस तरह के रेफ़रंस का इस्तेमाल करता है, तो बॉक्स साइज़ को बदलने का सुझाव, समस्या को हल करने में मदद कर सकता है.

सीएसएस box-sizing की वैल्यू बदलना

सीएसएस बॉक्स-साइज़ बदलने की सुविधा, मैप की स्टाइल से जुड़ी समस्याओं को हल करने में मदद करती है. यह खास तौर पर तब फ़ायदेमंद हो सकता है, जब सीएसएस फ़्रेमवर्क या 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;
}