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

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

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 की सीएसएस क्लास या DOM एलिमेंट को रेफ़रंस करता है, तो सीएसएस से जुड़ी अन्य समस्याएं हो सकती हैं.

इन समस्याओं से बचने के लिए, हमारे पास कुछ सुझाव हैं.

खासियत

Google Maps की स्टाइल से पहले, आपके मैप पर एम्बेड की गई और लिंक की गई सीएसएस लागू होती है. अगर आपके सभी पेज स्टाइल, एम्बेड की गई या लिंक की गई सीएसएस में तय की गई हैं, तो स्पेसफ़िसिटी के नियमों का पालन करें. इससे यह पक्का किया जा सकेगा कि आपके मैप पर सही स्टाइल लागू की गई हैं.

सीएसएस के सामान्य एलिमेंट, जैसे कि img, button, और a को आपके पेज की स्टाइल से बदला जा सकता है. आम तौर पर, ऐसा तब होता है, जब max-width एलिमेंट के max-width एट्रिब्यूट को 100 प्रतिशत पर सेट किया जाता है.img इस वजह से, मैप के कॉम्पोनेंट छिप सकते हैं या उनकी बनावट बिगड़ सकती है. ऐसा खास तौर पर तब होता है, जब 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;
}