Maps JavaScript API, मैप को लागू करने के दो अलग-अलग तरीके उपलब्ध कराता है: रेस्टर और वेक्टर. रेस्टर मैप डिफ़ॉल्ट रूप से लोड होता है. यह मैप, पिक्सल पर आधारित रेस्टर इमेज टाइल के ग्रिड के तौर पर लोड होता है. इन्हें Google Maps Platform के सर्वर साइड से जनरेट किया जाता है. इसके बाद, इन्हें आपके वेब ऐप्लिकेशन पर दिखाया जाता है. वेक्टर मैप, वेक्टर पर आधारित टाइल से बना होता है. इन्हें क्लाइंट-साइड पर लोड होने के समय, WebGL का इस्तेमाल करके बनाया जाता है. यह एक वेब टेक्नोलॉजी है, जो ब्राउज़र को उपयोगकर्ता के डिवाइस पर GPU को ऐक्सेस करने की अनुमति देती है, ताकि 2D और 3D ग्राफ़िक रेंडर किए जा सकें.
वेक्टर मैप, वही Google मैप है जिसका इस्तेमाल आपके उपयोगकर्ता करते हैं. यह डिफ़ॉल्ट रेस्टर टाइल मैप की तुलना में कई फ़ायदे देता है. इनमें, वेक्टर पर आधारित इमेज की बेहतर क्वालिटी और ज़ूम लेवल को कम करके 3D इमारतों को जोड़ना शामिल है. वेक्टर मैप में कुछ नई सुविधाएं भी काम करती हैं. जैसे, WebGL ओवरले व्यू की मदद से 3D कॉन्टेंट जोड़ने की सुविधा, प्रोग्राम के हिसाब से झुकाव और दिशा कंट्रोल करने की सुविधा, बेहतर कैमरा कंट्रोल, और आसानी से ज़ूम करने के लिए फ़्रैक्शनल ज़ूम की सुविधा.
वेक्टर मैप का इस्तेमाल शुरू करना
कैमरे को कंट्रोल करना
कैमरे की सभी प्रॉपर्टी को एक साथ अपडेट करने के लिए, map.moveCamera() फ़ंक्शन का इस्तेमाल करें. map.moveCamera() एक पैरामीटर स्वीकार करता है, जिसमें अपडेट की जाने वाली सभी कैमरा प्रॉपर्टी होती हैं. यहां दिए गए उदाहरण में, एक साथ center, zoom, heading, और tilt सेट करने के लिए, map.moveCamera() को कॉल करने का तरीका बताया गया है:
map.moveCamera({
center: new google.maps.LatLng(37.7893719, -122.3942),
zoom: 16,
heading: 320,
tilt: 47.5
});
कैमरा प्रॉपर्टी को ऐनिमेट करने के लिए, ऐनिमेशन लूप के साथ map.moveCamera() को कॉल करें, जैसा कि यहां दिखाया गया है:
const degreesPerSecond = 3;
function animateCamera(time) {
// Update the heading, leave everything else as-is.
map.moveCamera({
heading: (time / 1000) * degreesPerSecond
});
requestAnimationFrame(animateCamera);
}
// Start the animation.
requestAnimationFrame(animateCamera);
फ़्रैक्शनल ज़ूम
वेक्टर मैप में, फ़्रैक्शनल ज़ूम की सुविधा काम करती है. इसकी मदद से, पूर्णांक के बजाय फ़्रैक्शनल वैल्यू का इस्तेमाल करके ज़ूम किया जा सकता है. रेस्टर और वेक्टर, दोनों मैप में फ़्रैक्शनल ज़ूम की सुविधा काम करती है. हालांकि, वेक्टर मैप के लिए फ़्रैक्शनल ज़ूम डिफ़ॉल्ट रूप से चालू होता है और रेस्टर मैप के लिए डिफ़ॉल्ट रूप से बंद होता है. फ़्रैक्शनल ज़ूम को चालू और बंद करने के लिए, isFractionalZoomEnabled मैप विकल्प का इस्तेमाल करें.
यहां दिए गए उदाहरण में, मैप को शुरू करते समय ज़ूम करने की सुविधा चालू करने का तरीका बताया गया है:
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8,
isFractionalZoomEnabled: true
});
isFractionalZoomEnabled मैप विकल्प को यहां दिखाए गए तरीके से सेट करके, फ़्रैक्शनल ज़ूम को चालू और बंद भी किया जा सकता है:
// Using map.set
map.set('isFractionalZoomEnabled', true);
// Using map.setOptions
map.setOptions({isFractionalZoomEnabled: true});
फ़्रैक्शनल ज़ूम की सुविधा चालू है या नहीं, यह पता लगाने के लिए किसी listener को सेट किया जा सकता है. यह तब सबसे ज़्यादा मददगार होता है, जब आपने isFractionalZoomEnabled को true या false पर साफ़ तौर पर सेट न किया हो. यहां दिए गए उदाहरण में, यह देखा जा रहा है कि फ़्रैक्शनल ज़ूम की सुविधा चालू है या नहीं:
map.addListener('isfractionalzoomenabled_changed', () => {
const isFractionalZoomEnabled = map.get('isFractionalZoomEnabled');
if (isFractionalZoomEnabled === false) {
console.log('not using fractional zoom');
} else if (isFractionalZoomEnabled === true) {
console.log('using fractional zoom');
} else {
console.log('map not done initializing yet');
}
});