वेक्टर मैप की सुविधाएं

सैंपल देखें

Maps JavaScript API, मैप को लागू करने के दो अलग-अलग तरीके उपलब्ध कराता है: रास्टर और वेक्टर. रास्टर मैप, मैप को पिक्सल पर आधारित रास्टर इमेज टाइल के ग्रिड के तौर पर लोड करता है. ये टाइल, Google Maps Platform के सर्वर-साइड से जनरेट होती हैं. इसके बाद, इन्हें आपके वेब ऐप्लिकेशन पर दिखाया जाता है. वेक्टर मैप, वेक्टर पर आधारित टाइल से बना होता है. इन्हें लोड होने के समय, क्लाइंट-साइड पर WebGL का इस्तेमाल करके बनाया जाता है. WebGL एक वेब टेक्नोलॉजी है. इसकी मदद से, ब्राउज़र उपयोगकर्ता के डिवाइस पर जीपीयू को ऐक्सेस करके, 2D और 3D ग्राफ़िक रेंडर कर सकता है.

वेक्टर मैप, Google का वही मैप है जिसका इस्तेमाल आपके उपयोगकर्ता करते हैं. यह डिफ़ॉल्ट रास्टर टाइल मैप की तुलना में कई फ़ायदे देता है. इनमें सबसे अहम हैं, वेक्टर पर आधारित इमेज की शार्पनेस और ज़ूम करने के लेवल के करीब 3D बिल्डिंग जोड़ना. वेक्टर मैप में ये सुविधाएं काम करती हैं:

• प्रोग्राम के हिसाब से झुकाव और हेडिंग कंट्रोल
• कैमरे को कंट्रोल करने की बेहतर सुविधा
• बेहतर तरीके से ज़ूम करने के लिए, फ़्रैक्शनल ज़ूम

• 3D कॉन्टेंट और ऐनिमेशन

• div एलिमेंट और JavaScript का इस्तेमाल करके लोड किए गए मैप के लिए, रेंडरिंग का डिफ़ॉल्ट टाइप google.maps.RenderingType.RASTER होता है.

• gmp-map एलिमेंट का इस्तेमाल करके लोड किए गए मैप के लिए, रेंडरिंग का डिफ़ॉल्ट टाइप google.maps.RenderingType.VECTOR है. इसमें झुकाने और हेडिंग कंट्रोल की सुविधा चालू होती है.

वेक्टर मैप का इस्तेमाल शुरू करना

झुकाव और घुमाव

वेक्टर मैप पर, झुकाव और रोटेशन (हेडिंग) सेट किया जा सकता है. इसके लिए, मैप को शुरू करते समय heading और tilt प्रॉपर्टी शामिल करें. साथ ही, मैप पर setTilt और setHeading तरीके इस्तेमाल करें. यहां दिए गए उदाहरण में, मैप में कुछ बटन जोड़े गए हैं. ये बटन, प्रोग्राम के हिसाब से टिल्ट और हेडिंग को 20 डिग्री के इंक्रीमेंट में अडजस्ट करते हैं.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      center: {
        lat: 37.7893719,
        lng: -122.3942,
      },
      zoom: 16,
      heading: 320,
      tilt: 47.5,
      mapId: "90f87356969d889c",
    }
  );

  const buttons: [string, string, number, google.maps.ControlPosition][] = [
    ["Rotate Left", "rotate", 20, google.maps.ControlPosition.LEFT_CENTER],
    ["Rotate Right", "rotate", -20, google.maps.ControlPosition.RIGHT_CENTER],
    ["Tilt Down", "tilt", 20, google.maps.ControlPosition.TOP_CENTER],
    ["Tilt Up", "tilt", -20, google.maps.ControlPosition.BOTTOM_CENTER],
  ];

  buttons.forEach(([text, mode, amount, position]) => {
    const controlDiv = document.createElement("div");
    const controlUI = document.createElement("button");

    controlUI.classList.add("ui-button");
    controlUI.innerText = `${text}`;
    controlUI.addEventListener("click", () => {
      adjustMap(mode, amount);
    });
    controlDiv.appendChild(controlUI);
    map.controls[position].push(controlDiv);
  });

  const adjustMap = function (mode: string, amount: number) {
    switch (mode) {
      case "tilt":
        map.setTilt(map.getTilt()! + amount);
        break;
      case "rotate":
        map.setHeading(map.getHeading()! + amount);
        break;
      default:
        break;
    }
  };
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: {
      lat: 37.7893719,
      lng: -122.3942,
    },
    zoom: 16,
    heading: 320,
    tilt: 47.5,
    mapId: "90f87356969d889c",
  });
  const buttons = [
    ["Rotate Left", "rotate", 20, google.maps.ControlPosition.LEFT_CENTER],
    ["Rotate Right", "rotate", -20, google.maps.ControlPosition.RIGHT_CENTER],
    ["Tilt Down", "tilt", 20, google.maps.ControlPosition.TOP_CENTER],
    ["Tilt Up", "tilt", -20, google.maps.ControlPosition.BOTTOM_CENTER],
  ];

  buttons.forEach(([text, mode, amount, position]) => {
    const controlDiv = document.createElement("div");
    const controlUI = document.createElement("button");

    controlUI.classList.add("ui-button");
    controlUI.innerText = `${text}`;
    controlUI.addEventListener("click", () => {
      adjustMap(mode, amount);
    });
    controlDiv.appendChild(controlUI);
    map.controls[position].push(controlDiv);
  });

  const adjustMap = function (mode, amount) {
    switch (mode) {
      case "tilt":
        map.setTilt(map.getTilt() + amount);
        break;
      case "rotate":
        map.setHeading(map.getHeading() + amount);
        break;
      default:
        break;
    }
  };
}

window.initMap = initMap;
index.js

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.ui-button {
  background-color: #fff;
  border: 0;
  border-radius: 2px;
  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
  margin: 10px;
  padding: 0 0.5em;
  font: 400 18px Roboto, Arial, sans-serif;
  overflow: hidden;
  height: 40px;
  cursor: pointer;
}
.ui-button:hover {
  background: rgb(235, 235, 235);
}
style.css

<html>
  <head>
    <title>Tilt and Rotation</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

माउस और कीबोर्ड जेस्चर का इस्तेमाल करना

अगर झुकाव और घुमाव (हेडिंग) के लिए उपयोगकर्ता इंटरैक्शन चालू किए गए हैं (प्रोग्राम के हिसाब से या Google Cloud Console में), तो उपयोगकर्ता माउस और कीबोर्ड का इस्तेमाल करके, झुकाव और घुमाव को अडजस्ट कर सकते हैं:

• माउस का इस्तेमाल करके, Shift बटन को दबाकर रखें. इसके बाद, झुकाव को अडजस्ट करने के लिए माउस को ऊपर और नीचे की ओर खींचें और छोड़ें. साथ ही, हेडिंग को अडजस्ट करने के लिए माउस को दाईं और बाईं ओर खींचें और छोड़ें.
• कीबोर्ड का इस्तेमाल करके, Shift बटन को दबाकर रखें. इसके बाद, झुकाव को अडजस्ट करने के लिए, अप और डाउन ऐरो बटन का इस्तेमाल करें. साथ ही, हेडिंग को अडजस्ट करने के लिए, राइट और लेफ़्ट ऐरो बटन का इस्तेमाल करें.

प्रोग्राम के हिसाब से टिल्ट और हेडिंग को अडजस्ट करना

वेक्टर मैप पर झुकाव और हेडिंग को प्रोग्राम के हिसाब से अडजस्ट करने के लिए, setTilt() और setHeading() तरीकों का इस्तेमाल करें. हेडिंग वह दिशा है जिसमें कैमरा, उत्तर से शुरू होकर घड़ी की सुई की दिशा में डिग्री के हिसाब से घूमता है. इसलिए, map.setHeading(90) मैप को घुमाएगा, ताकि पूर्व दिशा ऊपर की ओर हो. झुकाव के कोण को ज़ेनिथ से मापा जाता है. इसलिए, map.setTilt(0) से सीधे नीचे की ओर देखा जाता है, जबकि map.setTilt(45) से तिरछा व्यू दिखता है.

• मैप के झुकाव का ऐंगल सेट करने के लिए, setTilt() को कॉल करें. झुकाव की मौजूदा वैल्यू पाने के लिए, getTilt() का इस्तेमाल करें.
• मैप की हेडिंग सेट करने के लिए, setHeading() को कॉल करें. मौजूदा हेडिंग वैल्यू पाने के लिए, getHeading() का इस्तेमाल करें.

झुकाव और हेडिंग को बनाए रखते हुए मैप के सेंटर को बदलने के लिए, map.setCenter() या map.panBy() का इस्तेमाल करें.

ध्यान दें कि इस्तेमाल किए जा सकने वाले ऐंगल की रेंज, ज़ूम करने के मौजूदा लेवल के हिसाब से अलग-अलग होती है. इस सीमा में न आने वाली वैल्यू, तय की गई सीमा में ही शामिल की जाती है.

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

अन्य तरीकों पर असर

मैप को झुकाने या घुमाने पर, Maps JavaScript API के अन्य तरीकों पर असर पड़ता है:

• map.getBounds() हमेशा सबसे छोटा बाउंडिंग बॉक्स दिखाता है, जिसमें दिखने वाला इलाका शामिल होता है. टिल्ट लागू होने पर, दिखाए गए बाउंड, मैप के व्यूपोर्ट के दिखने वाले इलाके से बड़े इलाके को दिखा सकते हैं.
• map.fitBounds(), बाउंड को फ़िट करने से पहले, टिल्ट और हेडिंग को शून्य पर रीसेट कर देगा.
• map.panToBounds(), बाउंड को पैन करने से पहले, टिल्ट और हेडिंग को शून्य पर रीसेट कर देगा.
• map.setTilt() में कोई भी वैल्यू डाली जा सकती है. हालांकि, मैप को ज़्यादा से ज़्यादा कितना झुकाया जा सकता है, यह मैप के मौजूदा ज़ूम करने के लेवल पर निर्भर करता है.
• map.setHeading() कोई भी वैल्यू स्वीकार करता है और उसे [0, 360] रेंज में फ़िट करने के लिए बदल देगा.

कैमरा कंट्रोल करना

कैमरे की प्रॉपर्टी के किसी भी कॉम्बिनेशन को एक साथ अपडेट करने के लिए, 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);

कैमरे की पोज़िशन

मैप व्यू एक वर्चुअल कैमरे की तरह काम करता है, जो किसी फ़्लैट सतह पर नीचे की ओर फ़ोकस करता है. कैमरे की पोज़िशन (और इसलिए मैप की रेंडरिंग) को इन प्रॉपर्टी से तय किया जाता है: target (अक्षांश/देशांतर की लोकेशन), bearing, tilt, और zoom.

टारगेट (जगह)

कैमरे का टारगेट, मैप के सेंटर की जगह होती है. इसे अक्षांश और देशांतर निर्देशांक के तौर पर दिखाया जाता है.

बेयरिंग (ओरिएंटेशन)

कैमरे की बेयरिंग से, कंपास की दिशा का पता चलता है. इसे ट्रू नॉर्थ से डिग्री में मापा जाता है. यह मैप के सबसे ऊपरी हिस्से के हिसाब से होता है. अगर मैप के बीच से ऊपर तक एक लाइन मान लें, तो उस लाइन का ऐंगल ही कैमरा की हेडिंग होता है. ये दिशा, ट्रू नॉर्थ से डिग्री में मापी जाती है.

बेयरिंग का मान 0 होने का मतलब है कि मैप का सबसे ऊपरी हिस्सा, ट्रू नॉर्थ दिशा की ओर है. बेयरिंग वैल्यू 90 का मतलब है कि मैप का सबसे ऊपरी हिस्सा, पूर्व की ओर (कंपास पर 90 डिग्री पर) है. वैल्यू 180 का मतलब है कि मैप का सबसे ऊपरी हिस्सा दक्षिण की ओर है.

Maps API की मदद से, मैप की दिशा बदली जा सकती है. उदाहरण के लिए, कार चलाने वाला कोई व्यक्ति अक्सर सड़क के मैप को अपनी यात्रा की दिशा के हिसाब से घुमाता है. वहीं, मैप और कंपास का इस्तेमाल करने वाले हाइकर, मैप को इस तरह से घुमाते हैं कि वर्टिकल लाइन उत्तर की ओर इशारा करे.

झुकाव (व्यूइंग ऐंगल)

झुकाव से, मैप के बीच की पोज़िशन के ठीक ऊपर मौजूद चाप पर कैमरे की पोज़िशन तय होती है. इसे नीचे की ओर (कैमरे के ठीक नीचे की दिशा) से डिग्री में मापा जाता है. वैल्यू 0 का मतलब है कि कैमरा सीधे नीचे की ओर है. 0 से ज़्यादा की वैल्यू, उस कैमरे के लिए होती है जिसे तय किए गए डिग्री के हिसाब से हॉरिज़ॉन की ओर झुकाया गया है. व्यूइंग ऐंगल बदलने पर, मैप पर्सपेक्टिव में दिखता है. इसमें दूर के ऑब्जेक्ट छोटे और आस-पास के ऑब्जेक्ट बड़े दिखते हैं. यहां दिए गए उदाहरणों में इसे दिखाया गया है.

नीचे दी गईं इमेज में, व्यूइंग ऐंगल 0 डिग्री है. पहली इमेज में इसका डायग्राम दिखाया गया है. इसमें 1 कैमरे की पोज़िशन है और 2 मैप की मौजूदा पोज़िशन है. इन सभी नतीजों के साथ मैप नीचे दिखाया गया है.

नीचे दी गईं इमेज में, व्यूइंग ऐंगल 45 डिग्री है. ध्यान दें कि कैमरा, सीधे ऊपर (0 डिग्री) और ज़मीन (90 डिग्री) के बीच बने चाप पर आधी दूरी तय करते हुए, पोज़िशन 3 तक पहुंचता है. कैमरा अब भी मैप के सेंटर पॉइंट पर है, लेकिन अब पोज़िशन 4 पर मौजूद लाइन से दिखाई गई जगह दिख रही है.

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

ज़ूम लेवल

कैमरे के ज़ूम लेवल से, मैप का स्केल तय होता है. ज़्यादा ज़ूम करने पर, स्क्रीन पर ज़्यादा जानकारी दिखती है. वहीं, कम ज़ूम करने पर, स्क्रीन पर दुनिया का ज़्यादा हिस्सा दिखता है.

यह ज़रूरी नहीं है कि ज़ूम करने का लेवल कोई पूर्णांक हो. मैप पर ज़ूम करने के लेवल की रेंज, कई बातों पर निर्भर करती है. जैसे, टारगेट, मैप का टाइप, और स्क्रीन का साइज़. रेंज से बाहर की किसी भी संख्या को अगली सबसे नज़दीकी मान्य वैल्यू में बदल दिया जाएगा. यह वैल्यू, ज़ूम करने का कम से कम लेवल या ज़ूम करने का ज़्यादा से ज़्यादा लेवल हो सकती है. यहां दी गई सूची में, ज़ूम करने के हर लेवल पर दिखने वाली जानकारी का अनुमानित लेवल दिखाया गया है:

• 1: वर्ल्ड
• 5: भूखंड/महाद्वीप
• 10: शहर
• 15: सड़कें
• 20: बिल्डिंग

फ़्रैक्शनल ज़ूम

वेक्टर मैप में फ़्रैक्शनल ज़ूम की सुविधा काम करती है. इससे आपको पूर्णांकों के बजाय, फ़्रैक्शनल वैल्यू का इस्तेमाल करके ज़ूम करने की सुविधा मिलती है. रास्टर और वेक्टर मैप, दोनों में फ़्रैक्शनल ज़ूम की सुविधा काम करती है. हालांकि, वेक्टर मैप के लिए फ़्रैक्शनल ज़ूम की सुविधा डिफ़ॉल्ट रूप से चालू होती है और रास्टर मैप के लिए डिफ़ॉल्ट रूप से बंद होती है. फ़्रैक्शनल ज़ूम को चालू और बंद करने के लिए, 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});

फ़्रैक्शनल ज़ूम चालू है या नहीं, इसका पता लगाने के लिए लिसनर सेट किया जा सकता है. यह तब सबसे ज़्यादा काम आता है, जब आपने 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');
  }
});