Street View सेवा

खास जानकारी

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

Maps JavaScript API रेफ़रंस भी देखें: रेंडर करना, सेवा)

Google Street View की मदद से, कवरेज वाली सभी जगहों पर दिखने वाली सड़कों से, हर जगह को 360 डिग्री में देखा जा सकता है. Street View का एपीआई कवरेज, Google Maps ऐप्लिकेशन (https://maps.google.com/) के लिए लागू नीति के जैसा ही है. Street View के लिए फ़िलहाल जिन शहरों का इस्तेमाल किया जा सकता है उनकी सूची Google Maps की वेबसाइट पर उपलब्ध है.

ध्यान दें: Street View की तस्वीरें, दो स्रोतों से आती हैं: Google (सार्वजनिक तौर पर उपलब्ध डेवलपर की ओर से कंट्रोल की गई इमेज) और सार्वजनिक (यूजीसी) या सार्वजनिक यूज़र जनरेटेड कॉन्टेंट. ध्यान दें, Street View की तस्वीरों के एक स्रोत को दूसरे स्रोत के साथ इस्तेमाल करने का कोई तरीका नहीं है. स्ट्रीट व्यू की तस्वीरों के संग्रह की निजता नीति के बारे में ज़्यादा जानें.

सड़क दृश्य का एक नमूना नीचे दिखाया गया है.

Maps JavaScript API, Google Maps के स्ट्रीट व्यू में इस्तेमाल की गई तस्वीरों के संग्रह को पाने और उसमें हेर-फेर करने के लिए, Street View की सेवा देता है. यह Street View सेवा, ब्राउज़र में नेटिव तौर पर काम करती है.

स्ट्रीट व्यू मैप का इस्तेमाल

हालांकि, 'स्ट्रीट व्यू' का इस्तेमाल स्टैंडअलोन DOM एलिमेंट में किया जा सकता है, लेकिन मैप पर जगह की जानकारी देते समय यह सबसे फ़ायदेमंद होता है. डिफ़ॉल्ट रूप से, मैप पर स्ट्रीट व्यू की सुविधा चालू होती है और स्ट्रीट व्यू पेगमैन का कंट्रोल, नेविगेशन (ज़ूम और पैन) कंट्रोल में दिखता है. इस कंट्रोल को मैप के MapOptions में छिपाया जा सकता है. इसके लिए, streetViewControl को false पर सेट करें. Map की streetViewControlOptions.position की प्रॉपर्टी को नई ControlPosition पर सेट करके भी, Street View के कंट्रोल की डिफ़ॉल्ट जगह को बदला जा सकता है.

Street View पेगमैन कंट्रोल से, आप मैप में ही Street View के पैनोरामा देख सकते हैं. जब उपयोगकर्ता पेगमैन को क्लिक करके रखता है, तो Street View की सुविधा वाली सड़कों के आस-पास नीले रंग की आउटलाइन दिखाने के लिए, मैप अपडेट हो जाता है. इसमें, Google Maps ऐप्लिकेशन पर लोगों को एक जैसा अनुभव मिलता है.

जब उपयोगकर्ता किसी सड़क पर पेगमैन मार्कर को छोड़ देता है, तो मैप बताई गई जगह का 'स्ट्रीट व्यू' पैनोरामा दिखाने के लिए अपडेट हो जाता है.

Street View पैनोरामा

ध्यान दें: सिर्फ़ StreetViewPanorama ऑब्जेक्ट से जनरेट किए गए Street View पैनोरामा की बिलिंग की जाती है. Street View पेगमैन कंट्रोल और StreetViewService पर आधारित, Street View के बिल्ट-इन अनुभव का बिल नहीं बनाया जाता. ज़्यादा जानकारी के लिए, कीमत की जानकारी देखें.

Street View इमेज में StreetViewPanorama ऑब्जेक्ट का इस्तेमाल किया जा सकता है. इस ऑब्जेक्ट से, Street View "व्यूअर" को एपीआई इंटरफ़ेस मिलता है. हर मैप में डिफ़ॉल्ट 'स्ट्रीट व्यू' पैनोरामा होता है. इसे आप मैप के getStreetView() तरीके से कॉल करके फिर से पा सकते हैं. जब आप मैप पर स्ट्रीट व्यू कंट्रोल को streetViewControl पर true विकल्प सेट करके मैप में जोड़ते हैं, तो पेगमैन कंट्रोल को इस डिफ़ॉल्ट Street View पैनोरामा से अपने-आप जोड़ दिया जाता है.

आप अपनी StreetViewPanorama ऑब्जेक्ट भी बना सकते हैं और मैप को डिफ़ॉल्ट रूप से इस्तेमाल करने के लिए सेट कर सकते हैं. ऐसा करने के लिए, मैप की streetView प्रॉपर्टी को उस खास ऑब्जेक्ट पर सेट करें. अगर आप डिफ़ॉल्ट व्यवहार को बदलना चाहते हैं, तो आप डिफ़ॉल्ट पैनोरामा को बदल सकते हैं, जैसे कि मैप और पैनोरामा के बीच ओवरले का अपने-आप शेयर करना. (नीचे स्ट्रीट व्यू में ओवरले देखें.)

Street View कंटेनर

इसके बजाय, हो सकता है कि आप StreetViewPanorama किसी अलग DOM एलिमेंट में दिखाना चाहें, जो कि अक्सर <div> एलिमेंट होता है. बस StreetViewPanorama के कंस्ट्रक्टर में DOM एलिमेंट पास करें. इमेज को ज़्यादा से ज़्यादा दिखाने के लिए, हमारा सुझाव है कि आप कम से कम 200 पिक्सल x 200 पिक्सल का साइज़ दें.

ध्यान दें: Street View की सुविधा को मैप के साथ इस्तेमाल करने के लिए, डिज़ाइन किया गया है. हालांकि, इसका इस्तेमाल करना ज़रूरी नहीं है. Street View ऑब्जेक्ट का इस्तेमाल, मैप के बिना किया जा सकता है.

Street View की जगहें और पॉइंट ऑफ़ व्यू (POV)

StreetViewPanorama कंस्ट्रक्टर, आपको StreetViewOptions पैरामीटर का इस्तेमाल करके, 'स्ट्रीट व्यू' की जगह और पॉइंट को सेट करने की सुविधा भी देता है. आप निर्माण के बाद ऑब्जेक्ट की जगह और POV बदलने के लिए, उस पर setPosition() और setPov() कॉल कर सकते हैं.

'स्ट्रीट व्यू' जगह, किसी इमेज के लिए कैमरे के फ़ोकस की जगह तय करती है, लेकिन उस इमेज के लिए कैमरे का ओरिएंटेशन नहीं तय करती. इस मकसद के लिए StreetViewPov ऑब्जेक्ट दो प्रॉपर्टी के बारे में बताता है:

• heading (डिफ़ॉल्ट 0) सही उत्तर की तुलना में डिग्री में कैमरा स्थान के चारों ओर घुमाव कोण को परिभाषित करता है. शीर्षकों को घड़ी की दिशा में मापा जाता है (पूर्व में 90 डिग्री सही है).
• pitch (डिफ़ॉल्ट 0) कैमरे की शुरुआती डिफ़ॉल्ट पिच से ऐंगल वैरियंस की "ऊपर" या "नीचे" की जानकारी देता है, जो अक्सर सपाट होता है (हमेशा नहीं) सपाट होता है. (उदाहरण के लिए, पहाड़ी पर ली गई इमेज से डिफ़ॉल्ट पिच दिख सकता है. इस पिच को हॉरिज़ॉन्टल नहीं होना चाहिए.) पिच कोणों को इस तरह से मापा जाता है कि वे सकारात्मक वैल्यू (ऊपर से 90 डिग्री ऊपर और सीधी प्लेलिस्ट के लिए खुलते हों) और नीचे की तरफ़ (नीचे की ओर -90 डिग्री और सीधी पिच तक नापसंद) तक माप किए जाते हैं.

StreetViewPov ऑब्जेक्ट का इस्तेमाल, अक्सर 'स्ट्रीट व्यू' कैमरे का व्यू तय करने के लिए किया जाता है. आपके पास फ़ोटोग्राफ़र के व्यू-पॉइंट को देखने का विकल्प भी होता है. यह आम तौर पर, StreetViewPanorama.getPhotographerPov() तरीका इस्तेमाल करके कार या ट्राइक के सामने रखा जाता है.

नीचे दिया गया कोड फ़ेनवे पार्क के शुरुआती व्यू को दिखाता है. पेगमैन को चुनने और उसे मैप पर किसी समर्थित स्थान पर खींचने से सड़क दृश्य पैनोरामा बदल जाएगा:

TypeScript

function initialize() {
  const fenway = { lat: 42.345573, lng: -71.098326 };
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      center: fenway,
      zoom: 14,
    }
  );
  const panorama = new google.maps.StreetViewPanorama(
    document.getElementById("pano") as HTMLElement,
    {
      position: fenway,
      pov: {
        heading: 34,
        pitch: 10,
      },
    }
  );

  map.setStreetView(panorama);
}

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

ध्यान दें: TypeScript और Google Maps का इस्तेमाल करने के बारे में गाइड पढ़ें.

JavaScript

function initialize() {
  const fenway = { lat: 42.345573, lng: -71.098326 };
  const map = new google.maps.Map(document.getElementById("map"), {
    center: fenway,
    zoom: 14,
  });
  const panorama = new google.maps.StreetViewPanorama(
    document.getElementById("pano"),
    {
      position: fenway,
      pov: {
        heading: 34,
        pitch: 10,
      },
    }
  );

  map.setStreetView(panorama);
}

window.initialize = initialize;
index.js

ध्यान दें: JavaScript को TypeScript स्निपेट से कंपाइल किया जाता है.

सीएसएस

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map,
#pano {
  float: left;
  height: 100%;
  width: 50%;
}
style.css

एचटीएमएल

<html>
  <head>
    <title>Street View split-map-panes</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

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

    <!-- 
      The `defer` attribute causes the callback 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=initialize&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

उदाहरण देखें

सैंपल आज़माएं

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

मोबाइल डिवाइस पर मोशन ट्रैकिंग

डिवाइस के ओरिएंटेशन के इवेंट के साथ काम करने वाले डिवाइसों पर, एपीआई उपयोगकर्ताओं को डिवाइस की जगह के हिसाब से स्ट्रीट व्यू व्यू बदलने की सुविधा देता है. उपयोगकर्ता अपने डिवाइसों को एक जगह से दूसरी जगह ले जाकर उन्हें देख सकते हैं. इसे मोशन ट्रैकिंग या डिवाइस रोटेशन ट्रैकिंग कहा जाता है.

ऐप्लिकेशन डेवलपर के तौर पर, आप डिफ़ॉल्ट व्यवहार को इस तरह बदल सकते हैं:

• मोशन ट्रैकिंग की सुविधा चालू या बंद करें. डिफ़ॉल्ट रूप से, मोशन ट्रैकिंग उन सभी डिवाइसों पर चालू होती है जिन पर यह सुविधा काम करती है. यहां दिया गया उदाहरण मोशन ट्रैकिंग को बंद कर देता है, लेकिन मोशन ट्रैकिंग कंट्रोल को नहीं दिखाता. (ध्यान दें कि उपयोगकर्ता कंट्रोल पर टैप करके मोशन ट्रैकिंग की सुविधा चालू कर सकता है.)

  var panorama = new google.maps.StreetViewPanorama(
      document.getElementById('pano'), {
        position: {lat: 37.869260, lng: -122.254811},
        pov: {heading: 165, pitch: 0},
        motionTracking: false
      });
  

• मोशन ट्रैकिंग कंट्रोल को छिपाएं या दिखाएं. डिफ़ॉल्ट रूप से, यह कंट्रोल उन डिवाइसों पर दिखता है जिन पर मोशन ट्रैकिंग की सुविधा काम करती है. मोशन ट्रैकिंग को चालू या बंद करने के लिए, उपयोगकर्ता कंट्रोल पर टैप कर सकते हैं. ध्यान दें कि अगर डिवाइस मोशन ट्रैकिंग के साथ काम नहीं करता है, तो कंट्रोल कभी नहीं दिखेगा. भले ही, motionTrackingControl की वैल्यू कुछ भी हो.

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

  var panorama = new google.maps.StreetViewPanorama(
      document.getElementById('pano'), {
        position: {lat: 37.869260, lng: -122.254811},
        pov: {heading: 165, pitch: 0},
        motionTracking: false,
        motionTrackingControl: false
      });
  

• मोशन ट्रैकिंग कंट्रोल की डिफ़ॉल्ट जगह बदलें. डिफ़ॉल्ट रूप से, कंट्रोल पैनोरामा के नीचे दाईं ओर दिखता है (रैंक RIGHT_BOTTOM). यह सैंपल, कंट्रोल की जगह सबसे नीचे बाईं ओर सेट करता है:

  var panorama = new google.maps.StreetViewPanorama(
      document.getElementById('pano'), {
        position: {lat: 37.869260, lng: -122.254811},
        pov: {heading: 165, pitch: 0},
        motionTrackingControlOptions: {
          position: google.maps.ControlPosition.LEFT_BOTTOM
        }
      });
  

मोशन ट्रैकिंग को काम करते हुए देखने के लिए, किसी मोबाइल डिवाइस (या डिवाइस ओरिएंटेशन इवेंट के साथ काम करने वाले किसी भी डिवाइस) पर यह नमूना देखें:

उदाहरण देखें

सड़क दृश्य में ओवरले

डिफ़ॉल्ट StreetViewPanorama ऑब्जेक्ट, मैप के नेटिव डिसप्ले ओवरले के साथ काम करता है. आम तौर पर, ओवरले "स्ट्रीट लेवल" पर दिखते हैं. ये LatLng पोज़िशन पर होते हैं. (उदाहरण के लिए, Street View के पैनोरामा में लोकेशन के हॉरिज़ॉन्टल प्लेन में ऐंकर अपनी पूंछ दिखाते हैं.)

वर्तमान में, सड़क दृश्य पैनोरामा पर समर्थित ओवरले प्रकार Markers, InfoWindow और OverlayViews को सीमित किया जाता है. मैप पर दिखाए जाने वाले ओवरले, पैनोरामा को Map ऑब्जेक्ट के विकल्प के तौर पर देखकर और setMap() को पास करके StreetViewPanorama को मैप के बजाय आर्ग्युमेंट के तौर पर दिखाकर 'स्ट्रीट व्यू' पैनोरामा में दिखाए जा सकते हैं. जानकारी वाली विंडो किसी मैप के बजाय StreetViewPanorama() पास करके, open() को कॉल करके स्ट्रीट व्यू पैनोरामा में खोली जा सकती है.

इसके अलावा, डिफ़ॉल्ट StreetViewPanorama से मैप बनाते समय, मैप पर बनाए गए सभी मार्कर, मैप से जुड़े Street View पैनोरामा के साथ अपने-आप शेयर हो जाते हैं. हालांकि, इसके लिए मैप पर पैनोरामा दिखाना ज़रूरी है. डिफ़ॉल्ट Street View पैनोरामा फिर से पाने के लिए, Map ऑब्जेक्ट पर getStreetView() को कॉल करें. ध्यान दें कि अगर आप मैप की streetView प्रॉपर्टी को अपनी पसंद के कंस्ट्रक्शन के StreetViewPanorama पर साफ़ तौर पर सेट करते हैं, तो आप डिफ़ॉल्ट पैनोरामा को बदल देंगे.

नीचे दिए गए उदाहरण में, एस्टर प्लेस, न्यूयॉर्क शहर के आस-पास की अलग-अलग जगहों को दिखाने वाले मार्कर दिखाए गए हैं. StreetViewPanorama में शेयर किए गए मार्कर दिखाने के लिए, डिसप्ले को 'स्ट्रीट व्यू' पर टॉगल करें.

TypeScript

let panorama: google.maps.StreetViewPanorama;

function initMap(): void {
  const astorPlace = { lat: 40.729884, lng: -73.990988 };

  // Set up the map
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      center: astorPlace,
      zoom: 18,
      streetViewControl: false,
    }
  );

  document
    .getElementById("toggle")!
    .addEventListener("click", toggleStreetView);

  // Set up the markers on the map
  const cafeMarker = new google.maps.Marker({
    position: { lat: 40.730031, lng: -73.991428 },
    map,
    icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00",
    title: "Cafe",
  });

  const bankMarker = new google.maps.Marker({
    position: { lat: 40.729681, lng: -73.991138 },
    map,
    icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=dollar|FFFF00",
    title: "Bank",
  });

  const busMarker = new google.maps.Marker({
    position: { lat: 40.729559, lng: -73.990741 },
    map,
    icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=bus|FFFF00",
    title: "Bus Stop",
  });

  // We get the map's default panorama and set up some defaults.
  // Note that we don't yet set it visible.
  panorama = map.getStreetView()!; // TODO fix type
  panorama.setPosition(astorPlace);
  panorama.setPov(
    /** @type {google.maps.StreetViewPov} */ {
      heading: 265,
      pitch: 0,
    }
  );
}

function toggleStreetView(): void {
  const toggle = panorama.getVisible();

  if (toggle == false) {
    panorama.setVisible(true);
  } else {
    panorama.setVisible(false);
  }
}

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

ध्यान दें: TypeScript और Google Maps का इस्तेमाल करने के बारे में गाइड पढ़ें.

JavaScript

let panorama;

function initMap() {
  const astorPlace = { lat: 40.729884, lng: -73.990988 };
  // Set up the map
  const map = new google.maps.Map(document.getElementById("map"), {
    center: astorPlace,
    zoom: 18,
    streetViewControl: false,
  });

  document.getElementById("toggle").addEventListener("click", toggleStreetView);

  // Set up the markers on the map
  const cafeMarker = new google.maps.Marker({
    position: { lat: 40.730031, lng: -73.991428 },
    map,
    icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00",
    title: "Cafe",
  });
  const bankMarker = new google.maps.Marker({
    position: { lat: 40.729681, lng: -73.991138 },
    map,
    icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=dollar|FFFF00",
    title: "Bank",
  });
  const busMarker = new google.maps.Marker({
    position: { lat: 40.729559, lng: -73.990741 },
    map,
    icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=bus|FFFF00",
    title: "Bus Stop",
  });

  // We get the map's default panorama and set up some defaults.
  // Note that we don't yet set it visible.
  panorama = map.getStreetView(); // TODO fix type
  panorama.setPosition(astorPlace);
  panorama.setPov(
    /** @type {google.maps.StreetViewPov} */ {
      heading: 265,
      pitch: 0,
    }
  );
}

function toggleStreetView() {
  const toggle = panorama.getVisible();

  if (toggle == false) {
    panorama.setVisible(true);
  } else {
    panorama.setVisible(false);
  }
}

window.initMap = initMap;
index.js

ध्यान दें: JavaScript को TypeScript स्निपेट से कंपाइल किया जाता है.

सीएसएस

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

#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: "Roboto", "sans-serif";
  line-height: 30px;
  padding-left: 10px;
}

#floating-panel {
  margin-left: -100px;
}
style.css

एचटीएमएल

<html>
  <head>
    <title>Overlays Within Street View</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="floating-panel">
      <input type="button" value="Toggle Street View" id="toggle" />
    </div>
    <div id="map"></div>

    <!-- 
      The `defer` attribute causes the callback 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

उदाहरण देखें

सैंपल आज़माएं

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

Street View इवेंट

स्ट्रीट व्यू के बीच नेविगेट करते समय या उसके ओरिएंटेशन में हेर-फेर करते समय, कई इवेंट पर नज़र रखी जा सकती है. इन इवेंट से, StreetViewPanorama की स्थिति में होने वाले बदलावों के बारे में पता चलता है:

• जब भी अलग-अलग पैनो आईडी में बदलाव होता है, तो pano_changed सक्रिय हो जाता है. यह इवेंट इस बात की गारंटी नहीं देता कि पैनोरामा में शामिल कोई भी डेटा (जैसे कि लिंक) इस इवेंट के ट्रिगर होने तक बदल गया होता है; यह इवेंट सिर्फ़ यह बताता है कि पैनोरामा आईडी बदल गया है. ध्यान दें कि पैनोरामा आईडी (जिसका इस्तेमाल आप इस पैनोरामा को देखने के लिए कर सकते हैं) सिर्फ़ मौजूदा ब्राउज़र सेशन में ही स्थिर रहता है.
• पैनोरामा की जगह (LatLng) बदलने पर, position_changed सक्रिय होता है. पैनोरामा घुमाने से यह इवेंट ट्रिगर नहीं होगा. ध्यान दें कि आप पैनोरो आईडी की जगह बदले बिना, पैनोरामा की जगह बदल सकते हैं, क्योंकि एपीआई अपने आप पैनारोमा की स्थिति के साथ सबसे नज़दीकी पैनो आईडी जोड़ देता है.
• जब भी 'स्ट्रीट व्यू' की StreetViewPov बदलती है, तो pov_changed सक्रिय हो जाता है. ध्यान दें कि इस इवेंट के चालू रहने और पैनो आईडी में बदलाव होने पर, यह सक्रिय हो सकता है.
• जब भी 'स्ट्रीट व्यू' के लिंक में बदलाव होता है, तो links_changed सक्रिय हो जाता है. ध्यान दें कि pano_changed से मिले पैनो आईडी में बदलाव होने के बाद, यह इवेंट एसिंक्रोनस रूप से चालू हो सकता है.
• जब भी 'स्ट्रीट व्यू' के दिखने की सेटिंग बदलती है, तब visible_changed सक्रिय होता है. ध्यान दें कि pano_changed से मिले पैनो आईडी में बदलाव होने के बाद, यह इवेंट एसिंक्रोनस रूप से चालू हो सकता है.

इस कोड में बताया गया है कि StreetViewPanorama के बारे में डेटा इकट्ठा करने के लिए, इन इवेंट को कैसे मैनेज किया जा सकता है:

TypeScript

function initPano() {
  const panorama = new google.maps.StreetViewPanorama(
    document.getElementById("pano") as HTMLElement,
    {
      position: { lat: 37.869, lng: -122.255 },
      pov: {
        heading: 270,
        pitch: 0,
      },
      visible: true,
    }
  );

  panorama.addListener("pano_changed", () => {
    const panoCell = document.getElementById("pano-cell") as HTMLElement;

    panoCell.innerHTML = panorama.getPano();
  });

  panorama.addListener("links_changed", () => {
    const linksTable = document.getElementById("links_table") as HTMLElement;

    while (linksTable.hasChildNodes()) {
      linksTable.removeChild(linksTable.lastChild as ChildNode);
    }

    const links = panorama.getLinks();

    for (const i in links) {
      const row = document.createElement("tr");

      linksTable.appendChild(row);

      const labelCell = document.createElement("td");

      labelCell.innerHTML = "<b>Link: " + i + "</b>";

      const valueCell = document.createElement("td");

      valueCell.innerHTML = links[i].description as string;
      linksTable.appendChild(labelCell);
      linksTable.appendChild(valueCell);
    }
  });

  panorama.addListener("position_changed", () => {
    const positionCell = document.getElementById(
      "position-cell"
    ) as HTMLElement;

    (positionCell.firstChild as HTMLElement).nodeValue =
      panorama.getPosition() + "";
  });

  panorama.addListener("pov_changed", () => {
    const headingCell = document.getElementById("heading-cell") as HTMLElement;
    const pitchCell = document.getElementById("pitch-cell") as HTMLElement;

    (headingCell.firstChild as HTMLElement).nodeValue =
      panorama.getPov().heading + "";
    (pitchCell.firstChild as HTMLElement).nodeValue =
      panorama.getPov().pitch + "";
  });
}

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

ध्यान दें: TypeScript और Google Maps का इस्तेमाल करने के बारे में गाइड पढ़ें.

JavaScript

function initPano() {
  const panorama = new google.maps.StreetViewPanorama(
    document.getElementById("pano"),
    {
      position: { lat: 37.869, lng: -122.255 },
      pov: {
        heading: 270,
        pitch: 0,
      },
      visible: true,
    }
  );

  panorama.addListener("pano_changed", () => {
    const panoCell = document.getElementById("pano-cell");

    panoCell.innerHTML = panorama.getPano();
  });
  panorama.addListener("links_changed", () => {
    const linksTable = document.getElementById("links_table");

    while (linksTable.hasChildNodes()) {
      linksTable.removeChild(linksTable.lastChild);
    }

    const links = panorama.getLinks();

    for (const i in links) {
      const row = document.createElement("tr");

      linksTable.appendChild(row);

      const labelCell = document.createElement("td");

      labelCell.innerHTML = "<b>Link: " + i + "</b>";

      const valueCell = document.createElement("td");

      valueCell.innerHTML = links[i].description;
      linksTable.appendChild(labelCell);
      linksTable.appendChild(valueCell);
    }
  });
  panorama.addListener("position_changed", () => {
    const positionCell = document.getElementById("position-cell");

    positionCell.firstChild.nodeValue = panorama.getPosition() + "";
  });
  panorama.addListener("pov_changed", () => {
    const headingCell = document.getElementById("heading-cell");
    const pitchCell = document.getElementById("pitch-cell");

    headingCell.firstChild.nodeValue = panorama.getPov().heading + "";
    pitchCell.firstChild.nodeValue = panorama.getPov().pitch + "";
  });
}

window.initPano = initPano;
index.js

ध्यान दें: JavaScript को TypeScript स्निपेट से कंपाइल किया जाता है.

सीएसएस

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

#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: "Roboto", "sans-serif";
  line-height: 30px;
  padding-left: 10px;
}

#pano {
  width: 50%;
  height: 100%;
  float: left;
}

#floating-panel {
  width: 45%;
  height: 100%;
  float: right;
  text-align: left;
  overflow: auto;
  position: static;
  border: 0px solid #999;
}
style.css

एचटीएमएल

<html>
  <head>
    <title>Street View Events</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="pano"></div>
    <div id="floating-panel">
      <table>
        <tr>
          <td><b>Position</b></td>
          <td id="position-cell">&nbsp;</td>
        </tr>
        <tr>
          <td><b>POV Heading</b></td>
          <td id="heading-cell">270</td>
        </tr>
        <tr>
          <td><b>POV Pitch</b></td>
          <td id="pitch-cell">0.0</td>
        </tr>
        <tr>
          <td><b>Pano ID</b></td>
          <td id="pano-cell">&nbsp;</td>
        </tr>
        <table id="links_table"></table>
      </table>
    </div>

    <!-- 
      The `defer` attribute causes the callback 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=initPano&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

उदाहरण देखें

सैंपल आज़माएं

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

स्ट्रीट व्यू कंट्रोल

StreetViewPanorama को दिखाने पर, पैनोरामा में डिफ़ॉल्ट रूप से कई तरह के कंट्रोल दिखते हैं. StreetViewPanoramaOptions में सही फ़ील्ड सेट करके, इन कंट्रोल को चालू या बंद किया जा सकता है. इसके लिए, true या false का इस्तेमाल करें:

• panControl से पैनोरामा को घुमाने की सुविधा मिलती है. यह कंट्रोल डिफ़ॉल्ट रूप से, स्टैंडर्ड इंटिग्रेट किए गए कंपास और पैन कंट्रोल के तौर पर दिखता है. कंट्रोल की जगह बदलने के लिए, panControlOptions फ़ील्ड में PanControlOptions दें.
• zoomControl से इमेज में ज़ूम इन करने का तरीका मिलता है. यह कंट्रोल पैनोरामा के नीचे दाईं ओर डिफ़ॉल्ट रूप से दिखता है. आप zoomControlOptions फ़ील्ड में ZoomControlOptions देकर कंट्रोल के दिखने का तरीका बदल सकते हैं.
• addressControl मिलती-जुलती जगह का पता बताने वाला टेक्स्ट वाला ओवरले देता है. साथ ही, Google Maps पर जगह को खोलने का लिंक भी देता है. आप addressControlOptions फ़ील्ड में StreetViewAddressControlOptions देकर कंट्रोल के दिखने का तरीका बदल सकते हैं.
• fullscreenControl से आपको Street View को फ़ुलस्क्रीन मोड में खोलने का विकल्प मिलता है. आप fullscreenControlOptions फ़ील्ड में FullscreenControlOptions देकर कंट्रोल के दिखने का तरीका बदल सकते हैं.
• motionTrackingControl मोबाइल डिवाइस पर मोशन ट्रैकिंग की सुविधा चालू या बंद करने का विकल्प देता है. यह कंट्रोल सिर्फ़ उन डिवाइसों पर दिखता है जिन पर डिवाइस ओरिएंटेशन इवेंट काम करते हैं. डिफ़ॉल्ट रूप से, कंट्रोल पैनोरामा के नीचे दाईं ओर दिखता है. MotionTrackingControlOptions देकर कंट्रोल की पोज़िशन में बदलाव किया जा सकता है. ज़्यादा जानकारी के लिए, मोशन ट्रैकिंग सेक्शन को देखें.
• linksControl, इमेज के साथ-साथ पैनोरामा इमेज भी दिखाता है.
• बंद करने के कंट्रोल की मदद से उपयोगकर्ता, स्ट्रीट व्यू व्यूअर को बंद कर सकते हैं. enableCloseButton को true या false पर सेट करके, 'बंद करें' कंट्रोल को चालू या बंद किया जा सकता है.

नीचे दिया गया उदाहरण, 'स्ट्रीट व्यू' में दिखाए गए कंट्रोल में बदलाव करता है और व्यू के लिंक को हटा देता है:

TypeScript

function initPano() {
  // Note: constructed panorama objects have visible: true
  // set by default.
  const panorama = new google.maps.StreetViewPanorama(
    document.getElementById("map") as HTMLElement,
    {
      position: { lat: 42.345573, lng: -71.098326 },
      addressControlOptions: {
        position: google.maps.ControlPosition.BOTTOM_CENTER,
      },
      linksControl: false,
      panControl: false,
      enableCloseButton: false,
    }
  );
}

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

ध्यान दें: TypeScript और Google Maps का इस्तेमाल करने के बारे में गाइड पढ़ें.

JavaScript

function initPano() {
  // Note: constructed panorama objects have visible: true
  // set by default.
  const panorama = new google.maps.StreetViewPanorama(
    document.getElementById("map"),
    {
      position: { lat: 42.345573, lng: -71.098326 },
      addressControlOptions: {
        position: google.maps.ControlPosition.BOTTOM_CENTER,
      },
      linksControl: false,
      panControl: false,
      enableCloseButton: false,
    }
  );
}

window.initPano = initPano;
index.js

ध्यान दें: JavaScript को TypeScript स्निपेट से कंपाइल किया जाता है.

सीएसएस

/* 
 * 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;
}
style.css

एचटीएमएल

<html>
  <head>
    <title>Street View Controls</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <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 callback 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=initPano&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

उदाहरण देखें

सैंपल आज़माएं

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

Street View डेटा को सीधे ऐक्सेस करना

ऐसा हो सकता है कि आप मैप/पैनोरामा में सीधे तौर पर फेरबदल किए बिना, Street View के लिए डेटा की उपलब्धता को प्रोग्राम के तौर पर तय करना चाहें या किसी खास पैनोरामा के बारे में जानकारी दिखाना चाहें. आप StreetViewService ऑब्जेक्ट का इस्तेमाल करके ऐसा कर सकते हैं, जो Google की Street View सेवा में सेव किए गए डेटा का इंटरफ़ेस देता है.

Street View सेवा के अनुरोध

Street View सेवा को ऐक्सेस नहीं किया जा सकता, क्योंकि Google Maps API को किसी बाहरी सर्वर पर कॉल करना होगा. इसलिए, अनुरोध पूरा होने पर आपको कॉलबैक तरीका पास करना होगा. कॉलबैक का यह तरीका, नतीजे को प्रोसेस करता है.

आप StreetViewPanoRequest या StreetViewLocationRequest का इस्तेमाल करके, StreetViewService को अनुरोध भेज सकते हैं.

StreetViewPanoRequest का इस्तेमाल करने के अनुरोध से, पैनोरामा का डेटा मिलता है. इस आईडी से, पैनोरामा की खास पहचान होती है. ध्यान दें कि ये रेफ़रंस आईडी सिर्फ़ उस पैनोरामा के तस्वीरों के संग्रह के लिए स्थायी होते हैं.

StreetViewLocationRequest के इस्तेमाल से, नीचे दिए गए पैरामीटर का इस्तेमाल करके, किसी खास जगह पर पैनोरामा डेटा खोजने का अनुरोध:

• पैनोरामा खोजने के लिए location, जगह (अक्षांश और देशांतर) बताता है.
• preference एक प्राथमिकता सेट करता है जिसके लिए पैनोरामा, दायरे में दिया जाना चाहिए: वह जगह जो दी गई जगह के सबसे नज़दीक हो या खास दायरे में सबसे अच्छा हो.
• radius मीटर में, एक खास दायरा सेट करता है. इसमें, दिए गए अक्षांश और देशांतर के हिसाब से पैनोरामा खोजा जाता है. न दिए जाने पर, यह डिफ़ॉल्ट रूप से 50 पर सेट हो जाता है.
• source खोजने के लिए पैनोरामा का स्रोत बताता है. मान्य वैल्यू ये हैं:
  • default, 'स्ट्रीट व्यू' के लिए डिफ़ॉल्ट सोर्स का इस्तेमाल करता है; खोज सिर्फ़ खास सोर्स तक सीमित नहीं होती हैं.
  • outdoor, सिर्फ़ आउटडोर कलेक्शन तक की खोज को सीमित करता है. ध्यान दें, हो सकता है कि किसी खास जगह के लिए बाहरी पैनोरामा उपलब्ध न हों.

Street View सेवा से जुड़े रिस्पॉन्स

Street View सेवा से नतीजा वापस पाने के लिए, फ़ंक्शन getPanorama() को कॉलबैक फ़ंक्शन की ज़रूरत होती है. यह कॉलबैक फ़ंक्शन, StreetViewPanoramaData ऑब्जेक्ट में पैनोरामा डेटा का एक सेट और अनुरोध की स्थिति को बताने वाला StreetViewStatus कोड दिखाता है.

StreetViewPanoramaData ऑब्जेक्ट की खास बातों में, इस फ़ॉर्म के 'स्ट्रीट व्यू' पैनोरामा के बारे में मेटा-डेटा शामिल है:

{
  "location": {
    "latLng": LatLng,
    "description": string,
    "pano": string
  },
  "copyright": string,
  "links": [{
      "heading": number,
      "description": string,
      "pano": string,
      "roadColor": string,
      "roadOpacity": number
    }],
  "tiles": {
    "worldSize": Size,
    "tileSize": Size,
    "centerHeading": number
  }
}

ध्यान दें कि यह डेटा ऑब्जेक्ट, StreetViewPanorama ऑब्जेक्ट नहीं है. इस डेटा का इस्तेमाल करके 'स्ट्रीट व्यू' ऑब्जेक्ट बनाने के लिए, आपको एक StreetViewPanorama बनाना होगा और setPano() को कॉल करना होगा, साथ ही उसे रिटर्न किए गए location.pano फ़ील्ड में बताए गए आईडी को पास करना होगा.

status कोड इनमें से कोई एक वैल्यू दिखा सकता है:

• OK बताता है कि सेवा को मिलता-जुलता पैनोरामा मिला है.
• ZERO_RESULTS बताता है कि सेवा को पास किए गए मानदंड के साथ मिलता-जुलता पैनोरामा नहीं मिला.
• UNKNOWN_ERROR से पता चलता है कि Street View के अनुरोध को प्रोसेस नहीं किया जा सका. हालांकि, इसकी सही वजह की जानकारी नहीं है.

यह कोड एक StreetViewService बनाता है, जो मैप पर उपयोगकर्ता के क्लिक का जवाब देता है. इसके लिए, मार्कर बनाए जाते हैं. इन मार्कर पर क्लिक करने पर, उस जगह का StreetViewPanorama दिखाया जाता है. इस कोड में, सेवा का इस्तेमाल करने वाले StreetViewPanoramaData के कॉन्टेंट का इस्तेमाल किया जाता है.

TypeScript

/*
 * Click the map to set a new location for the Street View camera.
 */

let map: google.maps.Map;

let panorama: google.maps.StreetViewPanorama;

function initMap(): void {
  const berkeley = { lat: 37.869085, lng: -122.254775 };
  const sv = new google.maps.StreetViewService();

  panorama = new google.maps.StreetViewPanorama(
    document.getElementById("pano") as HTMLElement
  );

  // Set up the map.
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    center: berkeley,
    zoom: 16,
    streetViewControl: false,
  });

  // Set the initial Street View camera to the center of the map
  sv.getPanorama({ location: berkeley, radius: 50 }).then(processSVData);

  // Look for a nearby Street View panorama when the map is clicked.
  // getPanorama will return the nearest pano when the given
  // radius is 50 meters or less.
  map.addListener("click", (event) => {
    sv.getPanorama({ location: event.latLng, radius: 50 })
      .then(processSVData)
      .catch((e) =>
        console.error("Street View data not found for this location.")
      );
  });
}

function processSVData({ data }: google.maps.StreetViewResponse) {
  const location = data.location!;

  const marker = new google.maps.Marker({
    position: location.latLng,
    map,
    title: location.description,
  });

  panorama.setPano(location.pano as string);
  panorama.setPov({
    heading: 270,
    pitch: 0,
  });
  panorama.setVisible(true);

  marker.addListener("click", () => {
    const markerPanoID = location.pano;

    // Set the Pano to use the passed panoID.
    panorama.setPano(markerPanoID as string);
    panorama.setPov({
      heading: 270,
      pitch: 0,
    });
    panorama.setVisible(true);
  });
}

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

ध्यान दें: TypeScript और Google Maps का इस्तेमाल करने के बारे में गाइड पढ़ें.

JavaScript

/*
 * Click the map to set a new location for the Street View camera.
 */
let map;
let panorama;

function initMap() {
  const berkeley = { lat: 37.869085, lng: -122.254775 };
  const sv = new google.maps.StreetViewService();

  panorama = new google.maps.StreetViewPanorama(
    document.getElementById("pano")
  );
  // Set up the map.
  map = new google.maps.Map(document.getElementById("map"), {
    center: berkeley,
    zoom: 16,
    streetViewControl: false,
  });
  // Set the initial Street View camera to the center of the map
  sv.getPanorama({ location: berkeley, radius: 50 }).then(processSVData);
  // Look for a nearby Street View panorama when the map is clicked.
  // getPanorama will return the nearest pano when the given
  // radius is 50 meters or less.
  map.addListener("click", (event) => {
    sv.getPanorama({ location: event.latLng, radius: 50 })
      .then(processSVData)
      .catch((e) =>
        console.error("Street View data not found for this location.")
      );
  });
}

function processSVData({ data }) {
  const location = data.location;
  const marker = new google.maps.Marker({
    position: location.latLng,
    map,
    title: location.description,
  });

  panorama.setPano(location.pano);
  panorama.setPov({
    heading: 270,
    pitch: 0,
  });
  panorama.setVisible(true);
  marker.addListener("click", () => {
    const markerPanoID = location.pano;

    // Set the Pano to use the passed panoID.
    panorama.setPano(markerPanoID);
    panorama.setPov({
      heading: 270,
      pitch: 0,
    });
    panorama.setVisible(true);
  });
}

window.initMap = initMap;
index.js

ध्यान दें: JavaScript को TypeScript स्निपेट से कंपाइल किया जाता है.

सीएसएस

/* 
 * 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;
}
style.css

एचटीएमएल

<html>
  <head>
    <title>Directly Accessing Street View Data</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map" style="width: 45%; height: 100%; float: left"></div>
    <div id="pano" style="width: 45%; height: 100%; float: left"></div>

    <!-- 
      The `defer` attribute causes the callback 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

उदाहरण देखें

सैंपल आज़माएं

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

कस्टम स्ट्रीट व्यू पैनोरामा दिखाना

Maps JavaScript एपीआई, StreetViewPanorama ऑब्जेक्ट में कस्टम पैनोरामा दिखाने की सुविधा देता है. पसंद के मुताबिक बनाए गए पैनोरामा की मदद से, इमारतों के अंदरूनी हिस्से को दिखाया जा सकता है. साथ ही, इन जगहों से खूबसूरत नज़ारे देखे जा सकते हैं या अपनी कल्पना से कुछ भी दिखाया जा सकता है. आप इन कस्टम पैनोरामा को Google के वर्तमान सड़क दृश्य पैनोरामा से भी लिंक कर सकते हैं.

कस्टम पैनोरामा इमेजरी का सेट सेट अप करने के लिए, यह तरीका अपनाएं:

• हर कस्टम पैनोरामा के लिए एक बेस पैनोरामा इमेज बनाएं. यह बेस इमेज सबसे ज़्यादा रिज़ॉल्यूशन वाली इमेज की होनी चाहिए. इस इमेज के साथ आप तस्वीरें दिखा सकते हैं.
• (ज़रूरी नहीं, लेकिन इस्तेमाल करने का सुझाव दिया जाता है) बुनियादी इमेज से अलग ज़ूम लेवल पर पैनोरामा टाइल का सेट बनाएं.
• अपने कस्टम पैनोरामा के बीच लिंक बनाएं.
• (ज़रूरी नहीं) Google की मौजूदा 'स्ट्रीट व्यू' की तस्वीरों में "एंट्री" पैनोरामा तय करें. साथ ही, पसंद के मुताबिक सेट से स्टैंडर्ड सेट तक के लिंक पसंद के मुताबिक बनाएं.
• StreetViewPanoramaData ऑब्जेक्ट में, हर पैनोरामा इमेज के लिए मेटाडेटा तय करें.
• ऐसा तरीका लागू करें जो कस्टम पैनोरामा डेटा और इमेज तय करता है. साथ ही, उस तरीके को StreetViewPanorama ऑब्जेक्ट में अपने कस्टम हैंडलर के रूप में तय करें.

इस सेक्शन में इन प्रक्रियाओं के बारे में बताया गया है.

पसंद के मुताबिक पैनोरामा बनाना

हर Street View पैनोरामा में, एक ही जगह से 360 डिग्री वाला पूरा व्यू मिलता है. StreetViewPanorama ऑब्जेक्ट, इक्वेक्टैंग्यूलर (प्लेट कैरी) प्रोजेक्शन की इमेज का इस्तेमाल करता है. इस तरह के प्रोजेक्शन में 360 डिग्री का हॉरिज़ॉन्टल व्यू (पूरा रैप-अराउंड) और 180 डिग्री वर्टिकल व्यू (सीधे ऊपर से नीचे) शामिल होता है. ये फ़ील्ड, 2:1 के आसपेक्ट रेशियो (चौड़ाई-ऊंचाई का अनुपात) में इमेज होते हैं. चारों ओर का एक रैप-अराउंड पैनोरामा नीचे दिखाया गया है.

पैनोरामा इमेज आम तौर पर एक ही जगह से कई फ़ोटो लेने और पैनोरामा सॉफ़्टवेयर का इस्तेमाल करके उन्हें एक साथ स्टिच करके ली जाती हैं. (ज़्यादा जानकारी के लिए, Wikipedia की फ़ोटो स्टिचिंग ऐप्लिकेशन की तुलना देखें.) ऐसी इमेज में एक "कैमरा" स्थान होना चाहिए, जिससे हर पैनोरामा इमेज ली गई हो. इसके बाद बनने वाला 360 डिग्री का पैनोरामा, गोल घेरे में मौजूद प्रोजेक्शन के बारे में बताता है. इसके लिए, इमेज को गोल आकार में दो डाइमेंशन वाली सतह पर रैप किया जाता है.

इमेज को आयताकार सिस्टम के साथ गोल आकार वाले हिस्से में दिखाने के लिए, इमेज को आयताकार टाइल में बांटने और हिसाब-किताब किए गए टाइल के आधार पर इमेज दिखाने का फ़ायदा होता है.

कस्टम पैनोरामा टाइल बनाना

स्ट्रीट व्यू में ज़ूम कंट्रोल का इस्तेमाल करके, इमेज के अलग-अलग लेवल की जानकारी भी दी जाती है. इससे, डिफ़ॉल्ट व्यू से ज़ूम इन और ज़ूम आउट किया जा सकता है. आम तौर पर, किसी भी पैनोरामा इमेज के लिए Street View, पांच लेवल का ज़ूम रिज़ॉल्यूशन देता है. अगर आपको सभी ज़ूम लेवल दिखाने के लिए, एक पैनोरामा इमेज का इस्तेमाल करना है, तो यह ज़रूरी है कि वह इमेज बहुत बड़ी हो और आपके ऐप्लिकेशन को काफ़ी धीमा कर दे. इसके अलावा, ज़्यादा ज़ूम लेवल पर ऐसी इमेज बहुत खराब हो सकती है, जिसकी वजह से आपको खराब पिक्सललेट वाली इमेज मिलेगी. हालांकि, अच्छी बात यह है कि हम Google के अलग-अलग ज़ूम लेवल पर Google की मैप टाइल को दिखाने के लिए, इसी तरह के डिज़ाइन पैटर्न का इस्तेमाल कर सकते हैं. इससे आप हर ज़ूम लेवल पर पैनोरामा के लिए सही इमेज दिखा सकते हैं.

जब StreetViewPanorama पहली बार लोड होता है, तो डिफ़ॉल्ट रूप से वह ऐसी इमेज दिखाता है जिसमें ज़ूम लेवल 1 पर पैनोरामा की क्षैतिज चौड़ाई 25% (90 डिग्री) होती है. यह व्यू आम तौर पर, देखे जाने वाले सामान्य फ़ील्ड से मेल खाता है. इस डिफ़ॉल्ट व्यू से "आउट" करने पर, मोटे तौर पर बड़ा आर्क मिलता है. हालांकि, ज़ूम इन करने से व्यू के फ़ील्ड को छोटा आर्क तक सीमित किया जाता है. StreetViewPanorama अपने-आप चुने गए ज़ूम लेवल के लिए, व्यू के सही फ़ील्ड का हिसाब लगाता है. इसके बाद, उस रिज़ॉल्यूशन के लिए सबसे सही तस्वीरों का चुनाव करता है. इसके लिए, एक ऐसा टाइल सेट चुना जाता है जो व्यू के हॉरिज़ॉन्टल फ़ील्ड के डाइमेंशन से मिलता-जुलता हो. 'स्ट्रीट व्यू' ज़ूम लेवल के लिए व्यू मैप के ये फ़ील्ड:

स्ट्रीट व्यू ज़ूम लेवल	फ़ील्ड ऑफ़ व्यू (डिग्री)
0	180
1 (डिफ़ॉल्ट)	90
2	45
3	22.5
4	11.25 साल

ध्यान दें कि Street View में दिखाई गई इमेज का साइज़, पूरी तरह से Street View कंटेनर की स्क्रीन के साइज़ (चौड़ाई) पर निर्भर करता है. अगर आप ज़्यादा बड़ा कंटेनर देते हैं, तो भी सेवा किसी भी ज़ूम लेवल के लिए उसी फ़ील्ड को देखेगी. हालांकि, यह उस रिज़ॉल्यूशन के लिए ज़्यादा सही टाइल चुन सकती है.

हालांकि, हर पैनोरामा में इक्विरेक्टैंग्यूलर प्रोजेक्शन होता है, इसलिए पैनोरामा टाइलें बनाना आसान होता है. 2:1 के आसपेक्ट रेशियो (चौड़ाई-ऊंचाई का अनुपात) वाली इमेज, प्रोजेक्शन में उपलब्ध होती है. इसलिए, 2:1 के अनुपात वाली टाइल इस्तेमाल में आसान होती हैं. हालांकि, स्क्वेयर टाइल से, स्क्वेयर मैप पर बेहतर परफ़ॉर्मेंस मिल सकती है, क्योंकि फ़ील्ड का व्यू स्क्वेयर होगा.

2:1 टाइल के लिए, पूरे पैनोरामा को घेरने वाली एक इमेज, ज़ूम लेवल 0 पर पूरे पैनोरामा "दुनिया" (बेस इमेज) को दिखाती है. इसमें हर ज़ूम लेवल होता है, जिसमें 4 ^zoomLevel टाइल होती हैं. (उदाहरण, ज़ूम लेवल 2 पर, पूरे पैनोरामा में 16 टाइल हैं.) ध्यान दें: 'स्ट्रीट व्यू' टाइल में मौजूद ज़ूम लेवल, स्ट्रीट व्यू कंट्रोल का इस्तेमाल करके दिए गए ज़ूम लेवल से सीधे तौर पर मेल नहीं खाते. इसके बजाय, 'स्ट्रीट व्यू' कंट्रोल के ज़ूम लेवल से फ़ील्ड का व्यू (एफ़ओवी) चुना जाता है. यहां से सही टाइल चुनी जाती हैं.

आम तौर पर, आप अपनी इमेज टाइल को नाम देना चाहेंगे, ताकि उन्हें प्रोग्राम के हिसाब से चुना जा सके. इस तरह के नाम रखने के तरीके की जानकारी, पसंद के मुताबिक बनाए गए पैनोरामा अनुरोधों को मैनेज करना में दी गई है.

कस्टम पैनोरामा अनुरोधों को प्रबंधित करना

पसंद के मुताबिक पैनोरामा का इस्तेमाल करने के लिए, StreetViewPanorama.registerPanoProvider() को कॉल करें. इसमें, पैनोरामा की सुविधा देने वाली अपनी पसंद की विधि का नाम बताएं. पैनोरामा कंपनी तरीके से StreetViewPanoramaData ऑब्जेक्ट दिखना चाहिए और इसमें यह हस्ताक्षर होना चाहिए:

Function(pano):StreetViewPanoramaData

StreetViewPanoramaData इस फ़ॉर्म का ऑब्जेक्ट है:

{
  copyright: string,
  location: {
    description: string,
    latLng: google.maps.LatLng,
    pano: string
  },
  tiles: {
    tileSize: google.maps.Size,
    worldSize: google.maps.Size,
    heading: number,
    getTileUrl: Function
  },
  links: [
    description: string,
    heading: number,
    pano: string,
    roadColor: string,
    roadOpacity: number
  ]
}

कस्टम पैनोरामा को इस तरह दिखाएं:

• StreetViewPanoramaOptions.pano प्रॉपर्टी को पसंद के मुताबिक सेट करें.
• पसंद के मुताबिक पैनोरामा प्रोवाइडर उपलब्ध कराने के लिए, StreetViewPanorama.registerPanoProvider() को कॉल करें.
• तय की गई pano वैल्यू को मैनेज करने के लिए, कस्टम पैनोरामा प्रोवाइडर फ़ंक्शन लागू करें.
• StreetViewPanoramaData ऑब्जेक्ट बनाएं.
• StreetViewTileData.getTileUrl प्रॉपर्टी को, पसंद के मुताबिक बनाई गई टाइल कंपनी के फ़ंक्शन के नाम पर सेट करें. उदाहरण के लिए, getCustomPanoramaTileUrl.
• कस्टम टाइल प्रोवाइडर का फ़ंक्शन लागू करें, जैसा कि नीचे दिए गए नमूनों में दिखाया गया है.
• StreetViewPanoramaData ऑब्जेक्ट दिखाएं.

नोट: जब आप कस्टम पैनोरामा दिखाना चाहते हैं, तो StreetViewPanorama पर सीधे position सेट न करें, क्योंकि यह ऐसी स्थिति है कि स्ट्रीट व्यू सेवा को उस जगह के पास की डिफ़ॉल्ट Street View तस्वीरों का अनुरोध करने के लिए कहा जाएगा. इसके बजाय, StreetViewPanoramaData पोज़िशन के location.latLng फ़ील्ड में यह पोज़िशन सेट करें.

नीचे दिए गए उदाहरण में, Google सिडनी ऑफ़िस का कस्टम पैनोरामा दिखाया गया है. ध्यान दें कि इस उदाहरण में मैप या डिफ़ॉल्ट Street View तस्वीरों का इस्तेमाल नहीं किया गया है:

TypeScript

function initPano() {
  // Set up Street View and initially set it visible. Register the
  // custom panorama provider function. Set the StreetView to display
  // the custom panorama 'reception' which we check for below.
  const panorama = new google.maps.StreetViewPanorama(
    document.getElementById("map") as HTMLElement,
    { pano: "reception", visible: true }
  );

  panorama.registerPanoProvider(getCustomPanorama);
}

// Return a pano image given the panoID.
function getCustomPanoramaTileUrl(
  pano: string,
  zoom: number,
  tileX: number,
  tileY: number
): string {
  return (
    "https://developers.google.com/maps/documentation/javascript/examples/full/images/" +
    "panoReception1024-" +
    zoom +
    "-" +
    tileX +
    "-" +
    tileY +
    ".jpg"
  );
}

// Construct the appropriate StreetViewPanoramaData given
// the passed pano IDs.
function getCustomPanorama(pano: string): google.maps.StreetViewPanoramaData {
  if (pano === "reception") {
    return {
      location: {
        pano: "reception",
        description: "Google Sydney - Reception",
      },
      links: [],
      // The text for the copyright control.
      copyright: "Imagery (c) 2010 Google",
      // The definition of the tiles for this panorama.
      tiles: {
        tileSize: new google.maps.Size(1024, 512),
        worldSize: new google.maps.Size(2048, 1024),
        // The heading in degrees at the origin of the panorama
        // tile set.
        centerHeading: 105,
        getTileUrl: getCustomPanoramaTileUrl,
      },
    };
  }
  // @ts-ignore TODO fix typings
  return null;
}

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

ध्यान दें: TypeScript और Google Maps का इस्तेमाल करने के बारे में गाइड पढ़ें.

JavaScript

function initPano() {
  // Set up Street View and initially set it visible. Register the
  // custom panorama provider function. Set the StreetView to display
  // the custom panorama 'reception' which we check for below.
  const panorama = new google.maps.StreetViewPanorama(
    document.getElementById("map"),
    { pano: "reception", visible: true }
  );

  panorama.registerPanoProvider(getCustomPanorama);
}

// Return a pano image given the panoID.
function getCustomPanoramaTileUrl(pano, zoom, tileX, tileY) {
  return (
    "https://developers.google.com/maps/documentation/javascript/examples/full/images/" +
    "panoReception1024-" +
    zoom +
    "-" +
    tileX +
    "-" +
    tileY +
    ".jpg"
  );
}

// Construct the appropriate StreetViewPanoramaData given
// the passed pano IDs.
function getCustomPanorama(pano) {
  if (pano === "reception") {
    return {
      location: {
        pano: "reception",
        description: "Google Sydney - Reception",
      },
      links: [],
      // The text for the copyright control.
      copyright: "Imagery (c) 2010 Google",
      // The definition of the tiles for this panorama.
      tiles: {
        tileSize: new google.maps.Size(1024, 512),
        worldSize: new google.maps.Size(2048, 1024),
        // The heading in degrees at the origin of the panorama
        // tile set.
        centerHeading: 105,
        getTileUrl: getCustomPanoramaTileUrl,
      },
    };
  }
  // @ts-ignore TODO fix typings
  return null;
}

window.initPano = initPano;
index.js

ध्यान दें: JavaScript को TypeScript स्निपेट से कंपाइल किया जाता है.

सीएसएस

/* 
 * 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;
}
style.css

एचटीएमएल

<html>
  <head>
    <title>Custom Street View Panoramas</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <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 callback 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=initPano&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

उदाहरण देखें

सैंपल आज़माएं

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

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

इस उदाहरण में, डिफ़ॉल्ट Street View नेविगेशन ऐरो के साथ-साथ, इमेज में एक और ऐरो जोड़ा गया है. यह ऐरो, Google सिडनी को दिखाता है और कस्टम इमेज से लिंक करता है:

TypeScript

let panorama: google.maps.StreetViewPanorama;

// StreetViewPanoramaData of a panorama just outside the Google Sydney office.
let outsideGoogle: google.maps.StreetViewPanoramaData;

// StreetViewPanoramaData for a custom panorama: the Google Sydney reception.
function getReceptionPanoramaData(): google.maps.StreetViewPanoramaData {
  return {
    location: {
      pano: "reception", // The ID for this custom panorama.
      description: "Google Sydney - Reception",
      latLng: new google.maps.LatLng(-33.86684, 151.19583),
    },
    links: [
      {
        heading: 195,
        description: "Exit",
        pano: (outsideGoogle.location as google.maps.StreetViewLocation).pano,
      },
    ],
    copyright: "Imagery (c) 2010 Google",
    tiles: {
      tileSize: new google.maps.Size(1024, 512),
      worldSize: new google.maps.Size(2048, 1024),
      centerHeading: 105,
      getTileUrl: function (
        pano: string,
        zoom: number,
        tileX: number,
        tileY: number
      ): string {
        return (
          "https://developers.google.com/maps/documentation/javascript/examples/full/images/" +
          "panoReception1024-" +
          zoom +
          "-" +
          tileX +
          "-" +
          tileY +
          ".jpg"
        );
      },
    },
  };
}

function initPanorama() {
  panorama = new google.maps.StreetViewPanorama(
    document.getElementById("street-view") as HTMLElement,
    { pano: (outsideGoogle.location as google.maps.StreetViewLocation).pano }
  );
  // Register a provider for the custom panorama.
  panorama.registerPanoProvider(
    (pano: string): google.maps.StreetViewPanoramaData => {
      if (pano === "reception") {
        return getReceptionPanoramaData();
      }
      // @ts-ignore TODO fix typings
      return null;
    }
  );

  // Add a link to our custom panorama from outside the Google Sydney office.
  panorama.addListener("links_changed", () => {
    if (
      panorama.getPano() ===
      (outsideGoogle.location as google.maps.StreetViewLocation).pano
    ) {
      panorama.getLinks().push({
        description: "Google Sydney",
        heading: 25,
        pano: "reception",
      });
    }
  });
}

function initMap(): void {
  // Use the Street View service to find a pano ID on Pirrama Rd, outside the
  // Google office.
  new google.maps.StreetViewService()
    .getPanorama({ location: { lat: -33.867386, lng: 151.195767 } })
    .then(({ data }: google.maps.StreetViewResponse) => {
      outsideGoogle = data;
      initPanorama();
    });
}

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

ध्यान दें: TypeScript और Google Maps का इस्तेमाल करने के बारे में गाइड पढ़ें.

JavaScript

let panorama;
// StreetViewPanoramaData of a panorama just outside the Google Sydney office.
let outsideGoogle;

// StreetViewPanoramaData for a custom panorama: the Google Sydney reception.
function getReceptionPanoramaData() {
  return {
    location: {
      pano: "reception",
      description: "Google Sydney - Reception",
      latLng: new google.maps.LatLng(-33.86684, 151.19583),
    },
    links: [
      {
        heading: 195,
        description: "Exit",
        pano: outsideGoogle.location.pano,
      },
    ],
    copyright: "Imagery (c) 2010 Google",
    tiles: {
      tileSize: new google.maps.Size(1024, 512),
      worldSize: new google.maps.Size(2048, 1024),
      centerHeading: 105,
      getTileUrl: function (pano, zoom, tileX, tileY) {
        return (
          "https://developers.google.com/maps/documentation/javascript/examples/full/images/" +
          "panoReception1024-" +
          zoom +
          "-" +
          tileX +
          "-" +
          tileY +
          ".jpg"
        );
      },
    },
  };
}

function initPanorama() {
  panorama = new google.maps.StreetViewPanorama(
    document.getElementById("street-view"),
    { pano: outsideGoogle.location.pano }
  );
  // Register a provider for the custom panorama.
  panorama.registerPanoProvider((pano) => {
    if (pano === "reception") {
      return getReceptionPanoramaData();
    }
    // @ts-ignore TODO fix typings
    return null;
  });
  // Add a link to our custom panorama from outside the Google Sydney office.
  panorama.addListener("links_changed", () => {
    if (panorama.getPano() === outsideGoogle.location.pano) {
      panorama.getLinks().push({
        description: "Google Sydney",
        heading: 25,
        pano: "reception",
      });
    }
  });
}

function initMap() {
  // Use the Street View service to find a pano ID on Pirrama Rd, outside the
  // Google office.
  new google.maps.StreetViewService()
    .getPanorama({ location: { lat: -33.867386, lng: 151.195767 } })
    .then(({ data }) => {
      outsideGoogle = data;
      initPanorama();
    });
}

window.initMap = initMap;
index.js

ध्यान दें: JavaScript को TypeScript स्निपेट से कंपाइल किया जाता है.

सीएसएस

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#street-view {
  height: 100%;
}
style.css

एचटीएमएल

<html>
  <head>
    <title>Custom Street View Panorama Tiles</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

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

    <!-- 
      The `defer` attribute causes the callback 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

उदाहरण देखें

सैंपल आज़माएं

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell