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

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() को गैर-मानक तरीकों से बदलता है.
  • MooTool (पुराने वर्शन के लिए): यह 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;
}