Street View की सेवा

खास जानकारी

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

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

Street View की इमेज का एक सैंपल यहां दिखाया गया है.


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

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

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

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

जब उपयोगकर्ता पेगमैन मार्कर को किसी सड़क पर छोड़ता है, तो मैप अपडेट हो जाता है. इससे, चुनी गई जगह का Street View पैनोरमा दिखता है.

Street View पैनोरमा

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

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

Street View कंटेनर

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

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

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

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

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

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

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

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

TypeScript

async function init(): Promise<void> {
    // Request needed libraries.
    const [{ StreetViewPanorama }] = await Promise.all([
        google.maps.importLibrary('streetView'),
        google.maps.importLibrary('maps'),
    ]);

    // Get the gmp-map element and its innerMap.
    const mapElement = document.querySelector('gmp-map')!;
    const innerMap = mapElement.innerMap;

    // Get the center of the map.
    const position = mapElement.center as google.maps.LatLng;

    // Create a new StreetViewPanorama, set its position, and attach it to the map.
    const panorama = new StreetViewPanorama(document.getElementById('pano')!, {
        position,
        pov: {
            heading: 34,
            pitch: 10,
        },
    });

    /**
     * Set the StreetViewPanorama so it displays in the pano element
     * rather than taking over the map.
     * This creates a link between the map and the panorama so that
     * the map is updated when the StreetViewPanorama position changes,
     * and the StreetViewPanorama is updated when the map changes.
     */
    innerMap.setStreetView(panorama);
}

void init();

JavaScript

async function init() {
    // Request needed libraries.
    const [{ StreetViewPanorama }] = await Promise.all([
        google.maps.importLibrary('streetView'),
        google.maps.importLibrary('maps'),
    ]);

    // Get the gmp-map element and its innerMap.
    const mapElement = document.querySelector('gmp-map');
    const innerMap = mapElement.innerMap;

    // Get the center of the map.
    const position = mapElement.center;

    // Create a new StreetViewPanorama, set its position, and attach it to the map.
    const panorama = new StreetViewPanorama(document.getElementById('pano'), {
        position,
        pov: {
            heading: 34,
            pitch: 10,
        },
    });

    /**
     * Set the StreetViewPanorama so it displays in the pano element
     * rather than taking over the map.
     * This creates a link between the map and the panorama so that
     * the map is updated when the StreetViewPanorama position changes,
     * and the StreetViewPanorama is updated when the map changes.
     */
    innerMap.setStreetView(panorama);
}

void init();

सीएसएस

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

body {
    display: flex;
}

gmp-map,
#pano {
    flex: 1;
    height: 100%;
}

एचटीएमएल

<html>
    <head>
        <title>Street View split-map-panes</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.ts"></script>
        <script>
            // prettier-ignore
            (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
                key: "GOOGLE_MAPS_API_KEY",
            });
        </script>
    </head>
    <body>
        <gmp-map
            center="42.345573,-71.098326"
            zoom="14"
            map-id="DEMO_MAP_ID"></gmp-map>
        <div id="pano"></div>
    </body>
</html>
उदाहरण देखें

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

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

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

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

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

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

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

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

TypeScript

const ASSET_BASE_URL = new URL('https://maps-docs-team.web.app/samples/streetview-overlays/dist/');

let panorama: google.maps.StreetViewPanorama;
let innerMap: google.maps.Map;

async function init() {
    // Request needed libraries.
    const [{ Marker }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);

    // Set the location of Astor Place.
    const astorPlace = { lat: 40.729884, lng: -73.990988 };

    const mapElement = document.querySelector('gmp-map')!;

    innerMap = mapElement.innerMap;

    document
        .getElementById('streetview-toggle-button')!
        .addEventListener('click', toggleStreetView);

    const cafeIcon = document.createElement('img');
    cafeIcon.src = new URL('./cafe_icon.svg', ASSET_BASE_URL).href;

    const dollarIcon = document.createElement('img');
    dollarIcon.src = new URL('./bank_icon.svg', ASSET_BASE_URL).href;

    const busIcon = document.createElement('img');
    busIcon.src = new URL('./bus_icon.svg', ASSET_BASE_URL).href;

    // Set up the markers on the map
    new Marker({
        position: { lat: 40.730031, lng: -73.991428 },
        map: innerMap,
        title: 'Cafe',
        icon: cafeIcon.src,
    });

    new Marker({
        position: { lat: 40.729681, lng: -73.991138 },
        map: innerMap,
        title: 'Bank',
        icon: dollarIcon.src,
    });

    new Marker({
        position: { lat: 40.729559, lng: -73.990741 },
        map: innerMap,
        title: 'Bus Stop',
        icon: busIcon.src,
    });

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

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

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

void init();

JavaScript

const ASSET_BASE_URL = new URL('https://maps-docs-team.web.app/samples/streetview-overlays/dist/');

let panorama;
let innerMap;

async function init() {
    // Request needed libraries.
    const [{ Marker }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);

    // Set the location of Astor Place.
    const astorPlace = { lat: 40.729884, lng: -73.990988 };

    const mapElement = document.querySelector('gmp-map');

    innerMap = mapElement.innerMap;

    document
        .getElementById('streetview-toggle-button')
        .addEventListener('click', toggleStreetView);

    const cafeIcon = document.createElement('img');
    cafeIcon.src = new URL('./cafe_icon.svg', ASSET_BASE_URL).href;

    const dollarIcon = document.createElement('img');
    dollarIcon.src = new URL('./bank_icon.svg', ASSET_BASE_URL).href;

    const busIcon = document.createElement('img');
    busIcon.src = new URL('./bus_icon.svg', ASSET_BASE_URL).href;

    // Set up the markers on the map
    new Marker({
        position: { lat: 40.730031, lng: -73.991428 },
        map: innerMap,
        title: 'Cafe',
        icon: cafeIcon.src,
    });

    new Marker({
        position: { lat: 40.729681, lng: -73.991138 },
        map: innerMap,
        title: 'Bank',
        icon: dollarIcon.src,
    });

    new Marker({
        position: { lat: 40.729559, lng: -73.990741 },
        map: innerMap,
        title: 'Bus Stop',
        icon: busIcon.src,
    });

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

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

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

void init();
export {};

सीएसएस

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

#streetview-toggle-button {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 17px;
    border: none;
    background: white;
    cursor: pointer;
    border-radius: 2px;
    box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
    margin: 10px 0px 10px -2px;
    font-family: Roboto, Arial, sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: rgb(86, 86, 86);
}

#streetview-toggle-button:hover {
    background: #f4f4f4;
    color: #000;
}

एचटीएमएल

<html>
    <head>
        <title>Overlays Within Street View</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
                key: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <gmp-map map-id="DEMO_MAP_ID" center="40.729884, -73.990988" zoom="18">
            <input
                type="button"
                value="Toggle Street View"
                id="streetview-toggle-button"
                slot="control-block-start-inline-start" />
        </gmp-map>
    </body>
</html>
उदाहरण देखें

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

Street View इवेंट

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

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

    <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 script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initPano&v=weekly"
      defer
    ></script>
  </body>
</html>
उदाहरण देखें

Street View के कंट्रोल

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

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

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

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

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

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

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

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

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

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

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

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

Street View सेवा के जवाब

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

StreetViewPanoramaData ऑब्जेक्ट की खास जानकारी में, Street View पैनोरमा के बारे में मेटा-डेटा होता है. यह मेटा-डेटा इस फ़ॉर्मैट में होता है:

{
  "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 ऑब्जेक्ट नहीं है. इस डेटा का इस्तेमाल करके Street View ऑब्जेक्ट बनाने के लिए, आपको 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;

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>

    <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 script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
उदाहरण देखें

कस्टम Street View पैनोरमा उपलब्ध कराना

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

कस्टम पैनोरामा इमेज का सेट सेट अप करने के लिए, ये चरण पूरे करने होंगे:

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

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

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

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

शहर की सड़क का पैनोरामा व्यू

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

एक गोला, जिसकी सतह पर सड़क का पैनोरामा व्यू दिख रहा है

पैनोरामा को रेक्टिलीनियर कोऑर्डिनेट सिस्टम वाले गोले पर प्रोजेक्शन के तौर पर इस्तेमाल करने से, इमेज को रेक्टिलीनियर टाइल में बांटने और कैलकुलेट किए गए टाइल कोऑर्डिनेट के आधार पर इमेज दिखाने में मदद मिलती है.

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

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

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

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

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

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

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

शहर की सड़क का पैनोरामा व्यू, जिसे टाइल में बांटा गया है

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

कस्टम पैनोरामा के अनुरोधों को मैनेज करना

कस्टम पैनोरामा का इस्तेमाल करने के लिए, 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 सेवा को उस जगह के आस-पास की डिफ़ॉल्ट 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;

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>

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

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

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

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

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", // 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.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>

    <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 script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
उदाहरण देखें