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 एलिमेंट का इस्तेमाल करें
एलिमेंट. इसमें आम तौर पर, डिफ़ॉल्ट ब्राउज़र के व्यवहार को बदलना शामिल है
border-box के लिए content-box.
इस तरह के सीएसएस को रीसेट करने की वजह से, Maps JavaScript API के साथ सीएसएस में टकराव हो सकता है क्योंकि एपीआई, उपयोगकर्ता एजेंट की स्टाइलशीट में बदलाव करने की सुविधा नहीं देता. अन्य जानकारी सीएसएस को लेकर विवाद हो सकता है. ऐसा तब हो सकता है, जब फ़्रेमवर्क या कॉम्पोनेंट में सीएसएस क्लास या Maps JavaScript API के DOM एलिमेंट.
ऐसे विवादों से बचने के लिए, हमारे पास कई सुझाव हैं.
खासियत
एम्बेड और लिंक किए गए सीएसएस को, आपके मैप पर Google Maps की स्टाइल से पहले लागू किया जाता है. अगर आपने आपकी सभी पेज स्टाइल एम्बेड या लिंक की गई सीएसएस में परिभाषित की गई हैं. इसके लिए, खास जानकारी के लिए नियम ताकि यह पक्का किया जा सके कि आपके मैप पर सही स्टाइल लागू किए गए हैं.
img, button, और a जैसे सामान्य सीएसएस एलिमेंट को
आपके पेज की स्टाइल. सबसे सामान्य स्थितियों में से एक है, जब max-width
img एलिमेंट का एट्रिब्यूट 100 प्रतिशत पर सेट किया गया है. इसकी वजह से प्रॉडक्ट खराब हो सकता है
या छिपे हुए मैप कॉम्पोनेंट शामिल करने चाहिए, खास तौर पर तब, जब इनका इस्तेमाल किया जा रहा हो
InfoWindow.
इस समस्या को ठीक करने के लिए, अपने मैप के लिए img एलिमेंट को अपडेट करें, ताकि
max-width एट्रिब्यूट को none पर सेट किया गया है. उदाहरण के लिए:
#map img
{
max-width : none;
}
क्लास के नाम
JavaScript मैप के क्लास के नामों और इंटरनल डीओएम एलिमेंट का रेफ़रंस न दें एपीआई. यह सुविधा उपलब्ध नहीं है और इससे आपकी वेबसाइट में नुकसान पहुंचाने वाले बदलाव हो सकते हैं सूचना ��हीं भेजी जाएगी. इसके बजाय, हमारा सुझाव है कि आप अपनी सीएसएस क्लास इस तरह बनाएं: कंटेनर का इस्तेमाल करें.
अगर कोई सीएसएस फ़्रेमवर्क या 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;
}