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