Street View सेवा

संग्रह की मदद से व्यवस्थित रहें अपनी प्राथमिकताओं के आधार पर, कॉन्टेंट को सेव करें और कैटगरी में बांटें.

खास जानकारी

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

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

'स्ट्रीट व्यू' की एक इमेज नीचे दिखाई गई है.


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

Street View मैप इस्तेमाल

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

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

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

स्ट्रीट व्यू पैनोरामा

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

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

Street View कंटेनर

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

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

'स्ट्रीट व्यू' की जगहें और व्यू-पॉइंट (पीओवी)

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

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

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

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;

सीएसएस

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

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

एचटीएमएल

<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
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initialize&v=weekly"
      defer
    ></script>
  </body>
</html>
उदाहरण देखें

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

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

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

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

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

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


उदाहरण देखें

Street View में ओवरले

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

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

इसके अलावा, डिफ़ॉल्ट StreetViewPanorama के साथ मैप बनाते समय, मैप पर बनाए गए मार्कर को मैप और# डिफ़ॉल्ट 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;

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;

सीएसएस

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

एचटीएमएल

<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
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
उदाहरण देखें

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

Street View इवेंट

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

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

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;

सीएसएस

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

एचटीएमएल

<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
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initPano&v=weekly"
      defer
    ></script>
  </body>
</html>
उदाहरण देखें

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

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

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

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

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

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;

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;

सीएसएस

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

एचटीएमएल

<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
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initPano&v=weekly"
      defer
    ></script>
  </body>
</html>
उदाहरण देखें

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

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

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

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

'स्ट्रीट व्यू' सेवा का इस्तेमाल नहीं किया जा सकता, क्योंकि Google Maps API को किसी बाहरी सर्वर को कॉल करना होता है. इसी वजह से, आपको अनुरोध पूरा करने पर, कॉलबैक मैथड को पास करना होगा. कॉलबैक का यह तरीका, नतीजों को प्रोसेस करता है.

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

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

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

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

Street View सेवा से जुड़े जवाब

getPanorama() फ़ंक्शन को Street View सेवा से नतीजे वापस पाने के लिए, कॉलबैक फ़ंक्शन की ज़रूरत होती है. यह कॉलबैक फ़ंक्शन, 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 से पता चलता है कि स्ट्रीट व्यू के अनुरोध को प्रोसेस नहीं किया जा सका. हालांकि, इसकी सही वजह पता नहीं है.

यह कोड एक 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;

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;

सीएसएस

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

एचटीएमएल

<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
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
उदाहरण देखें

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

कस्टम Street View पैनोरामा देना

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

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

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

नीचे दिए गए सेक्शन में इस प्रोसेस के बारे में बताया गया है.

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

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

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

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

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

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

जब 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ज़ूम लेवल टाइल होती हैं. (उदाहरण के लिए, ज़ूम लेवल 2 पर, पूरे पैनोरामा में 16 टाइलें होती हैं.) ध्यान दें: 'स्ट्रीट व्यू' टाइल में दिए गए ज़ूम लेवल, 'स्ट्रीट व्यू' कंट्रोल का इस्तेमाल करके दिए गए ज़ूम लेवल से सीधे तौर पर मेल नहीं खाते; इसके बजाय, 'स्ट्रीट व्यू' कंट्रोल ज़ूम लेवल से व्यू का फ़ील्ड (FoV) चुना गया है, जहां से सही टाइल चुनी गई हैं.

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

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

अपनी पसंद के मुताबिक पैनोरामा का इस्तेमाल करने के लिए, 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 को सीधे सेट न करें. ऐसा करने से, 'स्ट्रीट व्यू' सेवा को जगह की डिफ़ॉल्ट इमेज का अनुरोध करने के लिए कहा जाएगा. इसके बजाय, इस जगह को कस्टम 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;

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;

सीएसएस

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

एचटीएमएल

<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
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initPano&v=weekly"
      defer
    ></script>
  </body>
</html>
उदाहरण देखें

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

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

नीचे दिए गए उदाहरण में, इमेज में एक और तीर जोड़ा गया है. यह डिफ़ॉल्ट 'स्ट्रीट व्यू' नेविगेशन ऐरो के अलावा है जो 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;

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;

सीएसएस

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

#street-view {
  height: 100%;
}

एचटीएमएल

<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
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
उदाहरण देखें

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