परतें

लेयर, मैप पर मौजूद ऐसे ऑब्जेक्ट होते हैं जिनमें एक या एक से ज़्यादा आइटम होते हैं. हालांकि, इनका इस्तेमाल एक यूनिट के तौर पर किया जाता है. आम तौर पर, लेयर उन ऑब्जेक्ट के कलेक्शन को दिखाती हैं जिन्हें मैप पर सबसे ऊपर जोड़ा जाता है, ताकि एक सामान्य असोसिएशन तय किया जा सके. Maps JavaScript API, लेयर में मौजूद ऑब्जेक्ट के प्रज़ेंटेशन को मैनेज करता है. इसके लिए, वह लेयर में मौजूद आइटम को एक ऑब्जेक्ट (आम तौर पर टाइल ओवरले) में रेंडर करता है और मैप के व्यूपोर्ट में बदलाव होने पर उन्हें दिखाता है. लेयर, मैप की प्रज़ेंटेशन लेयर में भी बदलाव कर सकती हैं. इसके लिए, वे लेयर के हिसाब से बुनियादी टाइल में थोड़ा बदलाव करती हैं. ध्यान दें कि डिज़ाइन के हिसाब से, ज़्यादातर लेयर को उनके अलग-अलग ऑब्जेक्ट के ज़रिए ऐक्सेस नहीं किया जा सकता. हालांकि, उन्हें सिर्फ़ यूनिट के तौर पर मैनेज किया जा सकता है.

लेयर के बारे में खास जानकारी

Maps JavaScript API में कई तरह की लेयर होती हैं:

• Google Maps डेटा लेयर, मनमुताबिक भौगोलिक डेटा के लिए कंटेनर उपलब्ध कराती है. डेटा लेयर का इस्तेमाल, अपने कस्टम डेटा को सेव करने या Google मैप पर GeoJSON डेटा दिखाने के लिए किया जा सकता है.
• हीटमैप लेयर, हीटमैप विज़ुअलाइज़ेशन का इस्तेमाल करके भौगोलिक डेटा को रेंडर करती है.
• केएमएल लेयर, केएमएल और GeoRSS एलिमेंट को Maps JavaScript API टाइल ओवरले में रेंडर करती है.
• ट्रैफ़िक लेयर, मैप पर ट्रैफ़िक की स्थिति दिखाती है.
• बस, मेट्रो वगैरह की लेयर, मैप पर आपके शहर के सार्वजनिक परिवहन नेटवर्क को दिखाती है.
• साइकल चलाने की सुविधा वाली लेयर ऑब्जेक्ट, साइकल के रास्तों और/या साइकल के लिए खास ओवरले की लेयर को एक सामान्य लेयर में रेंडर करता है. यात्रा के साइकल मोड के लिए निर्देशों का अनुरोध करने पर, यह लेयर डिफ़ॉल्ट रूप से DirectionsRenderer में दिखती है.

परत जोड़ें

मैप में लेयर जोड़ने के लिए, आपको सिर्फ़ setMap() को कॉल करना होगा. साथ ही, उस मैप ऑब्जेक्ट को पास करना होगा जिस पर लेयर दिखानी है. इसी तरह, किसी लेयर को छिपाने के लिए, setMap() को कॉल करें और null पास करें.

नीचे दिया गया स्निपेट, मैप को यूनाइटेड किंगडम के लंदन पर सेंटर करता है और बस, मेट्रो वगैरह की जानकारी देने वाली लेयर जोड़ता है.

var mapOptions = {
  zoom: 13,
  center: new google.maps.LatLng(51.5,-0.11)
}

var map = new google.maps.Map(document.getElementById("map"), mapOptions);

var transitLayer = new google.maps.TransitLayer();
transitLayer.setMap(map);