Places UI Kit: यह इस्तेमाल के लिए तैयार लाइब्रेरी है. इससे डेवलपर को अपनी ज़रूरत के मुताबिक बदलाव करने और कंट्रोल करने की सुविधा मिलती है. इसे आज़माएं और यूआई किट के इस्तेमाल से जुड़ा अपना अनुभव शेयर करें.

Google आपकी पसंदीदा भाषा में कॉन्टेंट का अनुवाद करने के लिए, एआई टेक्नोलॉजी का इस्तेमाल करता है. एआई से मिले अनुवादों में गलतियां हो सकती हैं.

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

प्लैटफ़ॉर्म चुनें: Android iOS JavaScript

सैंपल देखें

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 डिग्री के अंतर से, झुकाव और दिशा को अडजस्ट करते हैं.

TypeScript

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

JavaScript

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

CSS

/* 
 * 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

<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.

टारगेट (लोकेशन)

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

अक्षांश -85 और 85 डिग्री के बीच होना चाहिए. इस रेंज से ऊपर या नीचे की वैल्यू, इस रेंज में मौजूद सबसे नज़दीकी वैल्यू में शामिल की जाएगी. उदाहरण के लिए, अक्षांश को 100 पर सेट करने से वैल्यू 85 पर सेट हो जाएगी. देशांतर की वैल्यू -180 और 180 डिग्री के बीच होनी चाहिए. इस रेंज से ऊपर या नीचे की वैल्यू को अडजस्ट करके (-180, 180) रेंज में ला दिया जाता है. उदाहरण के लिए, 480, 840, और 1200, सभी को अडजस्ट करके 120 डिग्री पर लाया जाता है.

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

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

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

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

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

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

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

मैप का स्क्रीनशॉट, जिसमें कैमरे को 0 डिग्री के व्यूइंग ऐंगल पर रखा गया है. इसका ज़ूम लेवल 18 है. — कैमरे के डिफ़ॉल्ट व्यूइंग ऐंगल के साथ दिखाया गया मैप.

इस डायग्राम में, कैमरे की डिफ़ॉल्ट पोज़िशन दिखाई गई है. यह मैप की पोज़िशन के ठीक ऊपर, 0 डिग्री के ऐंगल पर है. — कैमरे का डिफ़ॉल्ट व्यूइंग ऐंगल.

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

मैप का स्क्रीनशॉट, जिसमें कैमरे को 45 डिग्री के व्यूइंग ऐंगल पर रखा गया है. साथ ही, ज़ूम करने का लेवल 18 पर सेट है. — 45 डिग्री के व्यूइंग ऐंगल के साथ दिखाया गया मैप.

इस डायग्राम में, कैमरे का व्यूइंग ऐंगल 45 डिग्री पर सेट किया गया है. हालांकि, ज़ूम करने का लेवल अब भी 18 पर सेट है. — कैमरे का 45 डिग्री वाला व्यूइंग ऐंगल.

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

ज़ूम लेवल

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

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

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

यहां दी गईं इमेज में, ज़ूम करने के अलग-अलग लेवल दिखाए गए हैं:

ज़ूम लेवल 5 पर मैप का स्क्रीनशॉट — ज़ूम लेवल 5 पर एक मैप.

ज़ूम लेवल 15 पर मैप का स्क्रीनशॉट — ज़ूम लेवल 15 पर एक मैप.

ज़ूम लेवल 20 पर मैप का स्क्रीनशॉट — ज़ूम लेवल 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');
  }
});