রাস্তার দৃশ্য পরিষেবা

সংক্ষিপ্ত বিবরণ

প্ল্যাটফর্ম নির্বাচন করুন: অ্যান্ড্রয়েড আইওএস জাভাস্ক্রিপ্ট

এছাড়াও Maps JavaScript API রেফারেন্স দেখুন: Rendering , Service )

গুগল স্ট্রিট ভিউ তার কভারেজ এলাকার নির্দিষ্ট রাস্তা থেকে ৩৬০ ডিগ্রি প্যানোরামিক ভিউ প্রদান করে। স্ট্রিট ভিউয়ের API কভারেজ গুগল ম্যাপ অ্যাপ্লিকেশনের ( https://maps.google.com/ ) মতোই। স্ট্রিট ভিউয়ের জন্য বর্তমানে সমর্থিত শহরগুলির তালিকা গুগল ম্যাপস ওয়েবসাইটে পাওয়া যাবে।

দ্রষ্টব্য: রাস্তার দৃশ্যের ছবি দুটি উৎস থেকে আসে : Google (ডেভেলপার-নিয়ন্ত্রিত নয় এমন ছবি), এবং জনসাধারণ (UGC, অথবা সর্বজনীন ব্যবহারকারী-উত্পাদিত সামগ্রী)। মনে রাখবেন যে রাস্তার দৃশ্যের ছবিগুলির একটি উৎসের উপর অন্য উৎস ব্যবহার করার কোনও উপায় নেই। আমাদের রাস্তার দৃশ্যের ছবি গোপনীয়তা নীতি সম্পর্কে আরও জানুন।

রাস্তার দৃশ্যের একটি নমুনা চিত্র নিচে দেখানো হল।

Google Maps Street View-এ ব্যবহৃত চিত্রাবলী সংগ্রহ এবং পরিচালনা করার জন্য Maps JavaScript API একটি Street View পরিষেবা প্রদান করে। এই Street View পরিষেবাটি ব্রাউজারের মধ্যেই স্থানীয়ভাবে সমর্থিত।

রাস্তার দৃশ্য মানচিত্রের ব্যবহার

যদিও স্ট্রিট ভিউ একটি স্বতন্ত্র DOM উপাদানের মধ্যে ব্যবহার করা যেতে পারে, তবে মানচিত্রে কোনও অবস্থান নির্দেশ করার সময় এটি সবচেয়ে কার্যকর। ডিফল্টরূপে, মানচিত্রে স্ট্রিট ভিউ সক্ষম থাকে এবং নেভিগেশন (জুম এবং প্যান) নিয়ন্ত্রণের মধ্যে একটি স্ট্রিট ভিউ পেগম্যান নিয়ন্ত্রণ একত্রিত প্রদর্শিত হয়। আপনি streetViewControl কে false এ সেট করে মানচিত্রের MapOptions এর মধ্যে এই নিয়ন্ত্রণটি লুকিয়ে রাখতে পারেন। আপনি Map streetViewControlOptions.position সম্পত্তিটিকে একটি নতুন ControlPosition এ সেট করে স্ট্রিট ভিউ নিয়ন্ত্রণের ডিফল্ট অবস্থানও পরিবর্তন করতে পারেন।

স্ট্রিট ভিউ পেগম্যান নিয়ন্ত্রণ আপনাকে সরাসরি ম্যাপের মধ্যে স্ট্রিট ভিউ প্যানোরামা দেখতে দেয়। ব্যবহারকারী যখন পেগম্যানে ক্লিক করে ধরে রাখেন, তখন ম্যাপটি স্ট্রিট ভিউ-সক্ষম রাস্তাগুলির চারপাশে নীল রূপরেখা দেখানোর জন্য আপডেট হয়, যা ব্যবহারকারীকে Google Maps অ্যাপের মতো অভিজ্ঞতা প্রদান করে।

যখন ব্যবহারকারী পেগম্যান মার্কারটি কোনও রাস্তায় ফেলে দেন, তখন মানচিত্রটি আপডেট হয়ে নির্দেশিত অবস্থানের একটি স্ট্রিট ভিউ প্যানোরামা প্রদর্শন করে।

রাস্তার দৃশ্যের প্যানোরামা

দ্রষ্টব্য: শুধুমাত্র StreetViewPanorama অবজেক্ট দিয়ে তৈরি স্ট্রিট ভিউ প্যানোরামাগুলি বিল করা হয়। স্ট্রিট ভিউ পেগম্যান নিয়ন্ত্রণ এবং StreetViewService এর উপর ভিত্তি করে অন্তর্নির্মিত স্ট্রিট ভিউ অভিজ্ঞতা বিল করা হয় না। আরও তথ্যের জন্য, মূল্য নির্ধারণ দেখুন।

StreetViewPanorama অবজেক্ট ব্যবহারের মাধ্যমে StreetViewPanorama ছবিগুলি সমর্থিত, যা StreetView "viewer"-কে একটি API ইন্টারফেস প্রদান করে। প্রতিটি মানচিত্রে একটি ডিফল্ট StreetView প্যানোরামা থাকে, যা আপনি মানচিত্রের getStreetView() পদ্ধতিতে কল করে পুনরুদ্ধার করতে পারেন। যখন আপনি streetViewControl বিকল্পটি true তে সেট করে মানচিত্রে একটি StreetView নিয়ন্ত্রণ যোগ করেন, তখন আপনি স্বয়ংক্রিয়ভাবে Pegman নিয়ন্ত্রণটিকে এই ডিফল্ট StreetView প্যানোরামার সাথে সংযুক্ত করেন।

আপনি আপনার নিজস্ব StreetViewPanorama অবজেক্ট তৈরি করতে পারেন এবং ম্যাপের streetView প্রপার্টিটিকে স্পষ্টভাবে সেই তৈরি অবজেক্টের সাথে সেট করে ডিফল্টের পরিবর্তে ম্যাপটিকে সেটি ব্যবহার করার জন্য সেট করতে পারেন। আপনি যদি ডিফল্ট আচরণ পরিবর্তন করতে চান, যেমন মানচিত্র এবং প্যানোরামার মধ্যে ওভারলেগুলির স্বয়ংক্রিয় ভাগাভাগি, তাহলে আপনি ডিফল্ট প্যানোরামা ওভাররাইড করতে চাইতে পারেন। (নীচে রাস্তার দৃশ্যের মধ্যে ওভারলে দেখুন।)

রাস্তার দৃশ্যের কন্টেইনার

আপনি বরং একটি পৃথক DOM উপাদানের মধ্যে একটি StreetViewPanorama প্রদর্শন করতে চাইতে পারেন, প্রায়শই একটি <div> উপাদান। কেবল StreetViewPanorama এর কনস্ট্রাক্টরের মধ্যে DOM উপাদানটি পাস করুন। চিত্রগুলির সর্বোত্তম প্রদর্শনের জন্য, আমরা সর্বনিম্ন ২০০ পিক্সেল বাই ২০০ পিক্সেল আকারের সুপারিশ করি।

দ্রষ্টব্য: যদিও রাস্তার দৃশ্যের কার্যকারিতা মানচিত্রের সাথে ব্যবহারের জন্য ডিজাইন করা হয়েছে, তবে এই ব্যবহারের প্রয়োজন নেই। আপনি মানচিত্র ছাড়াই একটি স্বতন্ত্র রাস্তার দৃশ্যের বস্তু ব্যবহার করতে পারেন।

রাস্তার দৃশ্যের অবস্থান এবং দর্শনের স্থান (POV)

StreetViewPanorama কনস্ট্রাক্টর আপনাকে StreetViewOptions প্যারামিটার ব্যবহার করে Street View অবস্থান এবং দৃষ্টিকোণ সেট করার অনুমতি দেয়। নির্মাণের পরে আপনি বস্তুর অবস্থান এবং POV পরিবর্তন করতে setPosition() এবং setPov() কল করতে পারেন।

স্ট্রিট ভিউ লোকেশন কোনও ছবির জন্য ক্যামেরার ফোকাসের অবস্থান নির্ধারণ করে, কিন্তু এটি সেই ছবির জন্য ক্যামেরার ওরিয়েন্টেশন নির্ধারণ করে না। এই উদ্দেশ্যে, StreetViewPov অবজেক্ট দুটি বৈশিষ্ট্য সংজ্ঞায়িত করে:

• heading (ডিফল্ট 0 ) ক্যামেরার অবস্থানের চারপাশে ঘূর্ণন কোণকে প্রকৃত উত্তর থেকে ডিগ্রীতে নির্ধারণ করে। শিরোনামগুলি ঘড়ির কাঁটার দিকে পরিমাপ করা হয় (90 ডিগ্রি প্রকৃত পূর্ব)।
• pitch (ডিফল্ট 0 ) ক্যামেরার প্রাথমিক ডিফল্ট পিচ থেকে "উপরে" বা "নিচে" কোণের প্রকরণকে সংজ্ঞায়িত করে, যা প্রায়শই (কিন্তু সর্বদা নয়) সমতল অনুভূমিক হয়। (উদাহরণস্বরূপ, একটি পাহাড়ের উপর তোলা একটি ছবিতে সম্ভবত একটি ডিফল্ট পিচ প্রদর্শিত হবে যা অনুভূমিক নয়।) পিচ কোণগুলি ধনাত্মক মানগুলি উপরে (+90 ডিগ্রি সোজা উপরে এবং ডিফল্ট পিচের সাথে অরথোগোনাল) এবং নেতিবাচক মানগুলি নীচে (-90 ডিগ্রি সোজা নীচে এবং ডিফল্ট পিচের সাথে অরথোগোনাল) দিয়ে পরিমাপ করা হয়।

StreetViewPov অবজেক্টটি প্রায়শই Street View ক্যামেরার দৃষ্টিকোণ নির্ধারণ করতে ব্যবহৃত হয়। আপনি StreetViewPanorama.getPhotographerPov() পদ্ধতি ব্যবহার করে ফটোগ্রাফারের দৃষ্টিকোণও নির্ধারণ করতে পারেন — সাধারণত গাড়ি বা ট্রাইসাইকেলটি কোন দিকে মুখ করে ছিল।

নিচের কোডটি বোস্টনের একটি মানচিত্র প্রদর্শন করে যেখানে ফেনওয়ে পার্কের প্রাথমিক দৃশ্য দেখা যায়। পেগম্যান নির্বাচন করে মানচিত্রে একটি সমর্থিত স্থানে টেনে আনলে রাস্তার দৃশ্যের প্যানোরামা পরিবর্তন হবে:

টাইপস্ক্রিপ্ট

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

  map.setStreetView(panorama);
}

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

দ্রষ্টব্য: টাইপস্ক্রিপ্ট এবং গুগল ম্যাপ ব্যবহারের নির্দেশিকাটি পড়ুন।

জাভাস্ক্রিপ্ট

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

  map.setStreetView(panorama);
}

window.initialize = initialize;
index.js

দ্রষ্টব্য: জাভাস্ক্রিপ্টটি টাইপস্ক্রিপ্ট স্নিপেট থেকে সংকলিত।

সিএসএস

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

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

এইচটিএমএল

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

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

উদাহরণ দেখুন

নমুনা চেষ্টা করুন

JSFiddle.net গুগল ক্লাউড শেল

মোবাইল ডিভাইসে গতি ট্র্যাকিং

যেসব ডিভাইস ডিভাইস ওরিয়েন্টেশন ইভেন্ট সমর্থন করে, সেখানে API ব্যবহারকারীদের ডিভাইসের গতিবিধির উপর ভিত্তি করে রাস্তার দৃশ্যের দৃষ্টিকোণ পরিবর্তন করার ক্ষমতা প্রদান করে। ব্যবহারকারীরা তাদের ডিভাইসগুলি সরানোর মাধ্যমে চারপাশে দেখতে পারেন। একে মোশন ট্র্যাকিং বা ডিভাইস রোটেশন ট্র্যাকিং বলা হয়।

অ্যাপ ডেভেলপার হিসেবে, আপনি নিম্নরূপ ডিফল্ট আচরণ পরিবর্তন করতে পারেন:

• মোশন ট্র্যাকিং কার্যকারিতা সক্ষম বা অক্ষম করুন। ডিফল্টরূপে, মোশন ট্র্যাকিং এটি সমর্থন করে এমন যেকোনো ডিভাইসে সক্ষম থাকে। নিম্নলিখিত নমুনাটি মোশন ট্র্যাকিং অক্ষম করে, কিন্তু মোশন ট্র্যাকিং নিয়ন্ত্রণ দৃশ্যমান রাখে। (মনে রাখবেন যে ব্যবহারকারী নিয়ন্ত্রণটি ট্যাপ করে মোশন ট্র্যাকিং চালু করতে পারেন।)

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

• মোশন ট্র্যাকিং নিয়ন্ত্রণ লুকান বা দেখান। ডিফল্টরূপে, মোশন ট্র্যাকিং সমর্থন করে এমন ডিভাইসগুলিতে নিয়ন্ত্রণটি প্রদর্শিত হয়। ব্যবহারকারী মোশন ট্র্যাকিং চালু বা বন্ধ করতে নিয়ন্ত্রণটি ট্যাপ করতে পারেন। মনে রাখবেন যে ডিভাইসটি মোশন ট্র্যাকিং সমর্থন না করলে নিয়ন্ত্রণটি কখনই প্রদর্শিত হবে না, motionTrackingControl এর মান নির্বিশেষে।

  নিম্নলিখিত নমুনাটি গতি ট্র্যাকিং এবং গতি ট্র্যাকিং নিয়ন্ত্রণ উভয়ই অক্ষম করে। এই ক্ষেত্রে, ব্যবহারকারী গতি ট্র্যাকিং চালু করতে পারবেন না:

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

• মোশন ট্র্যাকিং কন্ট্রোলের ডিফল্ট অবস্থান পরিবর্তন করুন। ডিফল্টরূপে, কন্ট্রোলটি প্যানোরামার নীচের ডানদিকে (অবস্থান RIGHT_BOTTOM ) প্রদর্শিত হয়। নিম্নলিখিত নমুনাটি কন্ট্রোলের অবস্থানটি বাম নীচে সেট করে:

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

মোশন ট্র্যাকিং কীভাবে কার্যকরীভাবে করা হচ্ছে তা দেখতে, মোবাইল ডিভাইসে (অথবা ডিভাইস ওরিয়েন্টেশন ইভেন্ট সমর্থন করে এমন যেকোনো ডিভাইসে) নিম্নলিখিত নমুনাটি দেখুন:

উদাহরণ দেখুন

রাস্তার দৃশ্যের মধ্যে ওভারলেগুলি

ডিফল্ট StreetViewPanorama অবজেক্ট ম্যাপ ওভারলে -এর নেটিভ ডিসপ্লে সমর্থন করে। ওভারলেগুলি সাধারণত "রাস্তার স্তরে" LatLng অবস্থানে নোঙর করা হয়। (উদাহরণস্বরূপ, রাস্তার দৃশ্য প্যানোরমার মধ্যে অবস্থানের অনুভূমিক সমতলে নোঙর করা মার্কারগুলি তাদের লেজ সহ প্রদর্শিত হবে।)

বর্তমানে, স্ট্রিট ভিউ প্যানোরামাগুলিতে যে ধরণের ওভারলে সমর্থিত তা Marker , InfoWindow এবং কাস্টম OverlayView -এর মধ্যে সীমাবদ্ধ। আপনি যে ওভারলেগুলি ম্যাপে প্রদর্শন করেন সেগুলি স্ট্রিট ভিউ প্যানোরামাতে Map অবজেক্টের বিকল্প হিসেবে প্যানোরামা বিবেচনা করে, setMap() কল করে এবং ম্যাপের পরিবর্তে StreetViewPanorama কে আর্গুমেন্ট হিসেবে পাস করে প্রদর্শিত হতে পারে। একইভাবে, স্ট্রিট ভিউ প্যানোরামার মধ্যে ইনফো উইন্ডোগুলি খোলা যেতে পারে open() কল করে, ম্যাপের পরিবর্তে StreetViewPanorama() পাস করে।

অতিরিক্তভাবে, একটি ডিফল্ট StreetViewPanorama দিয়ে একটি মানচিত্র তৈরি করার সময়, একটি মানচিত্রে তৈরি করা যেকোনো মার্কার স্বয়ংক্রিয়ভাবে মানচিত্রের সংশ্লিষ্ট স্ট্রিট ভিউ প্যানোরামার সাথে শেয়ার করা হয়, যদি প্যানোরামা দৃশ্যমান হয়। ডিফল্ট স্ট্রিট ভিউ প্যানোরামা পুনরুদ্ধার করতে, Map অবজেক্টে getStreetView() কল করুন। মনে রাখবেন যে আপনি যদি স্পষ্টভাবে মানচিত্রের streetView বৈশিষ্ট্যটি আপনার নিজস্ব নির্মাণের একটি StreetViewPanorama তে সেট করেন, তাহলে আপনি ডিফল্ট প্যানোরামাটিকে ওভাররাইড করবেন।

নিচের উদাহরণে নিউ ইয়র্ক সিটির অ্যাস্টর প্লেসের আশেপাশের বিভিন্ন স্থান নির্দেশ করে এমন মার্কার দেখানো হয়েছে। StreetViewPanorama এর মধ্যে প্রদর্শিত শেয়ার করা মার্কারগুলি দেখানোর জন্য ডিসপ্লেটিকে Street View এ টগল করুন।

টাইপস্ক্রিপ্ট

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

async function initMap() {
    // Request needed libraries.
    const { Map } = (await google.maps.importLibrary(
        'maps'
    )) as google.maps.MapsLibrary;

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

    const mapElement = document.querySelector(
        'gmp-map'
    ) as google.maps.MapElement;

    innerMap = mapElement.innerMap;

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

    const cafeIcon = document.createElement('img');
    cafeIcon.src = new URL('./public/cafe_icon.svg', import.meta.url).href;

    const dollarIcon = document.createElement('img');
    dollarIcon.src = new URL('./public/bank_icon.svg', import.meta.url).href;

    const busIcon = document.createElement('img');
    busIcon.src = new URL('./public/bus_icon.svg', import.meta.url).href;

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

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

    const busMarker = new google.maps.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(
        /** @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);
    }
}

initMap();
index.ts

দ্রষ্টব্য: টাইপস্ক্রিপ্ট এবং গুগল ম্যাপ ব্যবহারের নির্দেশিকাটি পড়ুন।

জাভাস্ক্রিপ্ট

let panorama;
let innerMap;
async function initMap() {
    // Request needed libraries.
    const { Map } = (await 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('./public/cafe_icon.svg', import.meta.url).href;
    const dollarIcon = document.createElement('img');
    dollarIcon.src = new URL('./public/bank_icon.svg', import.meta.url).href;
    const busIcon = document.createElement('img');
    busIcon.src = new URL('./public/bus_icon.svg', import.meta.url).href;
    // Set up the markers on the map
    const cafeMarker = new google.maps.Marker({
        position: { lat: 40.730031, lng: -73.991428 },
        map: innerMap,
        title: 'Cafe',
        icon: cafeIcon.src,
    });
    const bankMarker = new google.maps.Marker({
        position: { lat: 40.729681, lng: -73.991138 },
        map: innerMap,
        title: 'Bank',
        icon: dollarIcon.src,
    });
    const busMarker = new google.maps.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(
    /** @type {google.maps.StreetViewPov} */ {
        heading: 265,
        pitch: 0,
    });
}
function toggleStreetView() {
    const toggle = panorama.getVisible();
    if (toggle == false) {
        panorama.setVisible(true);
    }
    else {
        panorama.setVisible(false);
    }
}
initMap();
export {};
index.js

সিএসএস

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

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

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

এইচটিএমএল

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

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <!-- prettier-ignore -->
        <script>(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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</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>
index.html

উদাহরণ দেখুন

নমুনা চেষ্টা করুন

জেএসফিডল.নেট

রাস্তার দৃশ্য ইভেন্ট

স্ট্রিট ভিউয়ের মধ্যে নেভিগেট করার সময় অথবা এর ওরিয়েন্টেশন পরিবর্তন করার সময়, আপনি StreetViewPanorama এর অবস্থার পরিবর্তন নির্দেশ করে এমন বেশ কয়েকটি ইভেন্ট পর্যবেক্ষণ করতে চাইতে পারেন:

• যখনই কোনও প্যানো আইডি পরিবর্তন হয় তখনই pano_changed চালু হয়। এই ইভেন্টটি গ্যারান্টি দেয় না যে এই ইভেন্টটি ট্রিগার হওয়ার সময় প্যানোরামার মধ্যে থাকা কোনও সম্পর্কিত ডেটা (যেমন লিঙ্কগুলি) পরিবর্তিত হয়েছে; এই ইভেন্টটি কেবল ইঙ্গিত দেয় যে একটি প্যানো আইডি পরিবর্তিত হয়েছে। মনে রাখবেন যে প্যানো আইডি (যা আপনি এই প্যানোরামাটি উল্লেখ করতে ব্যবহার করতে পারেন) কেবলমাত্র বর্তমান ব্রাউজার সেশনের মধ্যেই স্থিতিশীল।
• যখনই প্যানোরামার অন্তর্নিহিত ( LatLng ) অবস্থান পরিবর্তন হয় তখন position_changed হয়। একটি প্যানোরামা ঘোরানোর ফলে এই ইভেন্টটি ট্রিগার হবে না। মনে রাখবেন যে আপনি সংশ্লিষ্ট প্যানো আইডি পরিবর্তন না করেই একটি প্যানোরামার অন্তর্নিহিত অবস্থান পরিবর্তন করতে পারেন, কারণ API স্বয়ংক্রিয়ভাবে নিকটতম প্যানো আইডিটিকে প্যানোরামার অবস্থানের সাথে সংযুক্ত করবে।
• যখনই Street View এর StreetViewPov পরিবর্তন হয় তখন pov_changed সক্রিয় হয়। মনে রাখবেন যে অবস্থান এবং প্যানো আইডি স্থিতিশীল থাকাকালীন এই ইভেন্টটি সক্রিয় হতে পারে।
• যখনই স্ট্রিট ভিউয়ের লিঙ্ক পরিবর্তন হয় তখনই links_changed সক্রিয় হয়। মনে রাখবেন যে pano_changed এর মাধ্যমে নির্দেশিত প্যানো আইডি পরিবর্তনের পরে এই ইভেন্টটি অ্যাসিঙ্ক্রোনাসভাবে সক্রিয় হতে পারে।
• যখনই রাস্তার দৃশ্যের দৃশ্যমানতা পরিবর্তন হয় তখনই visible_changed সক্রিয় হয়। মনে রাখবেন যে pano_changed এর মাধ্যমে নির্দেশিত প্যানো আইডি পরিবর্তনের পরে এই ইভেন্টটি অ্যাসিঙ্ক্রোনাসভাবে সক্রিয় হতে পারে।

নিম্নলিখিত কোডটি ব্যাখ্যা করে যে কীভাবে এই ইভেন্টগুলি পরিচালনা করে অন্তর্নিহিত StreetViewPanorama সম্পর্কে তথ্য সংগ্রহ করা যেতে পারে:

টাইপস্ক্রিপ্ট

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

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

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

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

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

    const links = panorama.getLinks();

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

      linksTable.appendChild(row);

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

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

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

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

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

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

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

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

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

দ্রষ্টব্য: টাইপস্ক্রিপ্ট এবং গুগল ম্যাপ ব্যবহারের নির্দেশিকাটি পড়ুন।

জাভাস্ক্রিপ্ট

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

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

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

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

    const links = panorama.getLinks();

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

      linksTable.appendChild(row);

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

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

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

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

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

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

window.initPano = initPano;
index.js

দ্রষ্টব্য: জাভাস্ক্রিপ্টটি টাইপস্ক্রিপ্ট স্নিপেট থেকে সংকলিত।

সিএসএস

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

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

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

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

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

এইচটিএমএল

<html>
  <head>
    <title>Street View Events</title>

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

উদাহরণ দেখুন

নমুনা চেষ্টা করুন

JSFiddle.net গুগল ক্লাউড শেল

রাস্তার দৃশ্য নিয়ন্ত্রণ

StreetViewPanorama প্রদর্শন করার সময়, ডিফল্টরূপে প্যানোরামাতে বিভিন্ন ধরণের নিয়ন্ত্রণ উপস্থিত হয়। আপনি StreetViewPanoramaOptions এর মধ্যে উপযুক্ত ক্ষেত্রগুলিকে true বা false এ সেট করে এই নিয়ন্ত্রণগুলিকে সক্ষম বা অক্ষম করতে পারেন:

• একটি panControl প্যানোরামা ঘোরানোর একটি উপায় প্রদান করে। এই নিয়ন্ত্রণটি ডিফল্টরূপে একটি স্ট্যান্ডার্ড ইন্টিগ্রেটেড কম্পাস এবং প্যান নিয়ন্ত্রণ হিসাবে উপস্থিত হয়। আপনি panControlOptions ক্ষেত্রের মধ্যে PanControlOptions প্রদান করে নিয়ন্ত্রণের অবস্থান পরিবর্তন করতে পারেন।
• একটি zoomControl ছবির মধ্যে জুম করার একটি উপায় প্রদান করে। এই নিয়ন্ত্রণটি ডিফল্টরূপে প্যানোরামার নীচের ডানদিকে প্রদর্শিত হয়। আপনি zoomControlOptions ক্ষেত্রের মধ্যে ZoomControlOptions প্রদান করে নিয়ন্ত্রণের চেহারা পরিবর্তন করতে পারেন।
• একটি addressControl সংশ্লিষ্ট অবস্থানের ঠিকানা নির্দেশ করে একটি টেক্সট ওভারলে প্রদান করে এবং Google Maps-এ অবস্থানটি খোলার জন্য একটি লিঙ্ক প্রদান করে। আপনি addressControlOptions ক্ষেত্রের মধ্যে StreetViewAddressControlOptions প্রদান করে নিয়ন্ত্রণের চেহারা পরিবর্তন করতে পারেন।
• একটি fullscreenControl পূর্ণস্ক্রিন মোডে রাস্তার দৃশ্য খোলার বিকল্প প্রদান করে। আপনি fullscreenControlOptions ক্ষেত্রের মধ্যে FullscreenControlOptions প্রদান করে নিয়ন্ত্রণের চেহারা পরিবর্তন করতে পারেন।
• একটি motionTrackingControl মোবাইল ডিভাইসে গতি ট্র্যাকিং সক্ষম বা অক্ষম করার বিকল্প প্রদান করে। এই নিয়ন্ত্রণটি কেবলমাত্র সেই ডিভাইসগুলিতে প্রদর্শিত হয় যা ডিভাইস ওরিয়েন্টেশন ইভেন্টগুলিকে সমর্থন করে। ডিফল্টরূপে, নিয়ন্ত্রণটি প্যানোরামার নীচের ডানদিকে প্রদর্শিত হয়। আপনি MotionTrackingControlOptions প্রদান করে নিয়ন্ত্রণের অবস্থান পরিবর্তন করতে পারেন। আরও তথ্যের জন্য, গতি ট্র্যাকিং বিভাগটি দেখুন।
• একটি linksControl ছবিতে সংলগ্ন প্যানোরামা ছবিতে ভ্রমণের জন্য নির্দেশিকা তীর প্রদান করে।
• একটি বন্ধ নিয়ন্ত্রণ ব্যবহারকারীকে রাস্তার দৃশ্যের ভিউয়ার বন্ধ করতে দেয়। আপনি enableCloseButton কে true বা false এ সেট করে বন্ধ নিয়ন্ত্রণ সক্ষম বা অক্ষম করতে পারেন।

নিম্নলিখিত উদাহরণটি সংশ্লিষ্ট রাস্তার দৃশ্যের মধ্যে প্রদর্শিত নিয়ন্ত্রণগুলিকে পরিবর্তন করে এবং দৃশ্যের লিঙ্কগুলি সরিয়ে দেয়:

টাইপস্ক্রিপ্ট

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

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

দ্রষ্টব্য: টাইপস্ক্রিপ্ট এবং গুগল ম্যাপ ব্যবহারের নির্দেশিকাটি পড়ুন।

জাভাস্ক্রিপ্ট

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

window.initPano = initPano;
index.js

দ্রষ্টব্য: জাভাস্ক্রিপ্টটি টাইপস্ক্রিপ্ট স্নিপেট থেকে সংকলিত।

সিএসএস

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

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

এইচটিএমএল

<html>
  <head>
    <title>Street View Controls</title>

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

উদাহরণ দেখুন

নমুনা চেষ্টা করুন

JSFiddle.net গুগল ক্লাউড শেল

সরাসরি রাস্তার দৃশ্যের ডেটা অ্যাক্সেস করা

আপনি স্ট্রিট ভিউ ডেটার প্রাপ্যতা প্রোগ্রাম্যাটিকভাবে নির্ধারণ করতে পারেন, অথবা কোনও মানচিত্র/প্যানোরামার সরাসরি হেরফের না করেই নির্দিষ্ট প্যানোরামা সম্পর্কে তথ্য ফেরত দিতে পারেন। আপনি StreetViewService অবজেক্ট ব্যবহার করে এটি করতে পারেন, যা Google এর স্ট্রিট ভিউ পরিষেবাতে সংরক্ষিত ডেটার একটি ইন্টারফেস প্রদান করে।

রাস্তার দৃশ্য পরিষেবার অনুরোধ

স্ট্রিট ভিউ পরিষেবা অ্যাক্সেস করা অ্যাসিঙ্ক্রোনাস, কারণ গুগল ম্যাপস এপিআই-কে একটি বহিরাগত সার্ভারে কল করতে হয়। সেই কারণে, অনুরোধটি সম্পন্ন হওয়ার পরে কার্যকর করার জন্য আপনাকে একটি কলব্যাক পদ্ধতি পাস করতে হবে। এই কলব্যাক পদ্ধতি ফলাফল প্রক্রিয়া করে।

আপনি StreetViewPanoRequest অথবা StreetViewLocationRequest ব্যবহার করে StreetViewService এ অনুরোধ শুরু করতে পারেন।

StreetViewPanoRequest ব্যবহার করে করা একটি অনুরোধ প্যানোরামা ডেটা ফেরত পাঠায় যদি একটি রেফারেন্স আইডি দেওয়া হয় যা প্যানোরামাটিকে অনন্যভাবে শনাক্ত করে। মনে রাখবেন যে এই রেফারেন্স আইডিগুলি কেবলমাত্র সেই প্যানোরামার চিত্রের জীবনকাল পর্যন্ত স্থিতিশীল থাকে।

StreetViewLocationRequest ব্যবহার করে একটি অনুরোধ নিম্নলিখিত প্যারামিটার ব্যবহার করে একটি নির্দিষ্ট স্থানে প্যানোরামা ডেটা অনুসন্ধান করে:

• location একটি প্যানোরামা অনুসন্ধানের জন্য অবস্থান (অক্ষাংশ এবং দ্রাঘিমাংশ) নির্দিষ্ট করে।
• preference ব্যাসার্ধের মধ্যে কোন প্যানোরামাটি পাওয়া যাবে তার জন্য একটি পছন্দ সেট করে: প্রদত্ত অবস্থানের সবচেয়ে কাছেরটি, অথবা ব্যাসার্ধের মধ্যে সেরাটি।
• radius একটি ব্যাসার্ধ সেট করে, যা মিটারে নির্দিষ্ট করা আছে, যেখানে একটি প্যানোরামা অনুসন্ধান করা হবে, প্রদত্ত অক্ষাংশ এবং দ্রাঘিমাংশকে কেন্দ্র করে। সরবরাহ না করা হলে ডিফল্ট ৫০ হয়।
• source অনুসন্ধানের জন্য প্যানোরামার উৎস নির্দিষ্ট করে। বৈধ মানগুলি হল:
  • default রাস্তার দৃশ্যের জন্য ডিফল্ট উৎস ব্যবহার করে; অনুসন্ধানগুলি নির্দিষ্ট উৎসের মধ্যে সীমাবদ্ধ নয়।
  • outdoor অনুসন্ধানগুলিকে বহিরঙ্গন সংগ্রহের মধ্যে সীমাবদ্ধ করে। মনে রাখবেন যে নির্দিষ্ট অবস্থানের জন্য বহিরঙ্গন প্যানোরামাগুলি বিদ্যমান নাও থাকতে পারে।

রাস্তার দৃশ্য পরিষেবার প্রতিক্রিয়া

স্ট্রিট ভিউ পরিষেবা থেকে ফলাফল পাওয়ার পরে getPanorama() ফাংশনটির একটি কলব্যাক ফাংশন কার্যকর করার প্রয়োজন হয়। এই কলব্যাক ফাংশনটি 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 ক্ষেত্রে উল্লেখিত IDটি পাস করতে হবে।

status কোড নিম্নলিখিত মানগুলির মধ্যে একটি ফেরত দিতে পারে:

• OK ইঙ্গিত দেয় যে পরিষেবাটি একটি মিলিত প্যানোরামা খুঁজে পেয়েছে।
• ZERO_RESULTS ইঙ্গিত দেয় যে পরিষেবাটি পাস করা মানদণ্ডের সাথে মিলে যাওয়া কোনও প্যানোরামা খুঁজে পায়নি।
• UNKNOWN_ERROR ইঙ্গিত দেয় যে একটি রাস্তার দৃশ্য অনুরোধ প্রক্রিয়া করা যায়নি, যদিও সঠিক কারণ অজানা।

নিম্নলিখিত কোডটি একটি StreetViewService তৈরি করে যা ব্যবহারকারীর মানচিত্রে ক্লিকের প্রতিক্রিয়ায় মার্কার তৈরি করে যা ক্লিক করলে সেই অবস্থানের একটি StreetViewPanorama প্রদর্শন করে। কোডটি পরিষেবা থেকে ফিরে আসা StreetViewPanoramaData এর বিষয়বস্তু ব্যবহার করে।

টাইপস্ক্রিপ্ট

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

let map: google.maps.Map;

let panorama: google.maps.StreetViewPanorama;

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

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

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

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

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

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

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

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

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

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

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

দ্রষ্টব্য: টাইপস্ক্রিপ্ট এবং গুগল ম্যাপ ব্যবহারের নির্দেশিকাটি পড়ুন।

জাভাস্ক্রিপ্ট

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

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

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

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

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

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

window.initMap = initMap;
index.js

দ্রষ্টব্য: জাভাস্ক্রিপ্টটি টাইপস্ক্রিপ্ট স্নিপেট থেকে সংকলিত।

সিএসএস

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

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

এইচটিএমএল

<html>
  <head>
    <title>Directly Accessing Street View Data</title>

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

উদাহরণ দেখুন

নমুনা চেষ্টা করুন

JSFiddle.net গুগল ক্লাউড শেল

কাস্টম স্ট্রিট ভিউ প্যানোরামা প্রদান করা হচ্ছে

ম্যাপস জাভাস্ক্রিপ্ট এপিআই StreetViewPanorama অবজেক্টের মধ্যে কাস্টম প্যানোরামা প্রদর্শন সমর্থন করে। কাস্টম প্যানোরামা ব্যবহার করে, আপনি ভবনের অভ্যন্তর, মনোরম স্থানের দৃশ্য, অথবা আপনার কল্পনার যেকোনো কিছু প্রদর্শন করতে পারেন। এমনকি আপনি এই কাস্টম প্যানোরামাগুলিকে গুগলের বিদ্যমান স্ট্রিট ভিউ প্যানোরামার সাথে লিঙ্ক করতে পারেন।

কাস্টম প্যানোরামা চিত্রের একটি সেট সেট আপ করার জন্য নিম্নলিখিত পদক্ষেপগুলি অন্তর্ভুক্ত থাকে:

• প্রতিটি কাস্টম প্যানোরামার জন্য একটি বেস প্যানোরামিক ছবি তৈরি করুন। এই বেস ছবিটি সর্বোচ্চ রেজোলিউশনের ছবি হওয়া উচিত যার সাথে আপনি জুম ইন ইমেজারি পরিবেশন করতে চান।
• (ঐচ্ছিক, কিন্তু প্রস্তাবিত) মৌলিক চিত্র থেকে বিভিন্ন জুম স্তরে প্যানোরামিক টাইলসের একটি সেট তৈরি করুন।
• আপনার কাস্টম প্যানোরামার মধ্যে লিঙ্ক তৈরি করুন।
• (ঐচ্ছিক) Google-এর বিদ্যমান স্ট্রিট ভিউ চিত্রাবলীর মধ্যে "এন্ট্রি" প্যানোরামা নির্ধারণ করুন এবং কাস্টম সেট থেকে স্ট্যান্ডার্ড সেটের লিঙ্কগুলি কাস্টমাইজ করুন।
• StreetViewPanoramaData অবজেক্টের মধ্যে প্রতিটি প্যানোরামা ছবির জন্য মেটাডেটা নির্ধারণ করুন।
• এমন একটি পদ্ধতি বাস্তবায়ন করুন যা কাস্টম প্যানোরামা ডেটা এবং ছবি নির্ধারণ করে এবং StreetViewPanorama অবজেক্টের মধ্যে সেই পদ্ধতিটিকে আপনার কাস্টম হ্যান্ডলার হিসাবে মনোনীত করে।

নিম্নলিখিত বিভাগগুলি এই প্রক্রিয়াটি ব্যাখ্যা করে।

কাস্টম প্যানোরামা তৈরি করা

প্রতিটি স্ট্রিট ভিউ প্যানোরামা হল এমন একটি ছবি বা ছবির সেট যা একটি একক অবস্থান থেকে সম্পূর্ণ 360 ডিগ্রি ভিউ প্রদান করে। StreetViewPanorama অবজেক্ট এমন ছবি ব্যবহার করে যা সমকোণী (প্লেট ক্যারি) প্রক্ষেপণের সাথে সামঞ্জস্যপূর্ণ। এই ধরনের প্রক্ষেপণে 360 ডিগ্রি অনুভূমিক দৃশ্য (একটি সম্পূর্ণ মোড়ানো-আড়াআড়ি) এবং 180 ডিগ্রি উল্লম্ব দৃশ্য (সরল উপরে থেকে সোজা নীচে) থাকে। এই দৃশ্য ক্ষেত্রগুলির ফলে 2:1 অনুপাতের একটি চিত্র তৈরি হয়। একটি সম্পূর্ণ মোড়ানো-আড়াআড়ি প্যানোরামা নীচে দেখানো হয়েছে।

প্যানোরামা ছবিগুলি সাধারণত এক অবস্থান থেকে একাধিক ছবি তুলে প্যানোরামা সফটওয়্যার ব্যবহার করে সেলাই করে সংগ্রহ করা হয়। (আরও তথ্যের জন্য উইকিপিডিয়ার ফটো স্টিচিং অ্যাপ্লিকেশনের তুলনা দেখুন।) এই ধরনের ছবিগুলির একটি একক "ক্যামেরা" লোকাস থাকা উচিত, যেখান থেকে প্রতিটি প্যানোরামা ছবি তোলা হয়। ফলস্বরূপ 360 ডিগ্রি প্যানোরামা তারপর একটি গোলকের উপর একটি প্রক্ষেপণ নির্ধারণ করতে পারে যেখানে ছবিটি গোলকের দ্বি-মাত্রিক পৃষ্ঠে মোড়ানো থাকে।

একটি রেক্টিলিনিয়ার স্থানাঙ্ক সিস্টেমের সাহায্যে প্যানোরামাটিকে একটি গোলকের উপর একটি প্রক্ষেপণ হিসাবে বিবেচনা করা সুবিধাজনক যখন ছবিটিকে রেক্টিলিনিয়ার টাইলগুলিতে ভাগ করা হয় এবং গণনা করা টাইল স্থানাঙ্কের উপর ভিত্তি করে ছবি পরিবেশন করা হয়।

কাস্টম প্যানোরামা টাইলস তৈরি করা

জুম কন্ট্রোল ব্যবহারের মাধ্যমে স্ট্রিট ভিউ বিভিন্ন স্তরের ছবির বিস্তারিত তথ্য সমর্থন করে, যা আপনাকে ডিফল্ট ভিউ থেকে জুম ইন এবং আউট করতে দেয়। সাধারণত, স্ট্রিট ভিউ যেকোনো প্যানোরামা ছবির জন্য পাঁচ স্তরের জুম রেজোলিউশন প্রদান করে। যদি আপনি সমস্ত জুম স্তর পরিবেশন করার জন্য একটি একক প্যানোরামা ছবির উপর নির্ভর করেন, তাহলে এই ধরনের ছবি হয় বেশ বড় হবে এবং আপনার অ্যাপ্লিকেশনটিকে উল্লেখযোগ্যভাবে ধীর করে দেবে, অথবা উচ্চতর জুম স্তরে এত খারাপ রেজোলিউশনের হবে যে আপনি একটি খারাপ পিক্সেলেটেড ছবি পরিবেশন করবেন। তবে ভাগ্যক্রমে, আমরা প্রতিটি জুম স্তরে প্যানোরামার জন্য উপযুক্ত রেজোলিউশন চিত্র প্রদানের জন্য বিভিন্ন জুম স্তরে গুগলের মানচিত্র টাইল পরিবেশন করার জন্য ব্যবহৃত একই ধরণের নকশা প্যাটার্ন ব্যবহার করতে পারি।

যখন একটি StreetViewPanorama প্রথম লোড হয়, তখন ডিফল্টভাবে এটি জুম লেভেল ১-এ প্যানোরামার অনুভূমিক প্রস্থের ২৫% (৯০ ডিগ্রি আর্ক) সমন্বিত একটি ছবি প্রদর্শন করে। এই ভিউটি মোটামুটিভাবে একটি সাধারণ মানবিক ভিউ ফিল্ডের সাথে মিলে যায়। এই ডিফল্ট ভিউ থেকে "জুম আউট" করলে মূলত একটি প্রশস্ত আর্ক পাওয়া যায়, অন্যদিকে জুম ইন করলে ভিউ ফিল্ডটি একটি ছোট আর্কে সংকুচিত হয়। StreetViewPanorama স্বয়ংক্রিয়ভাবে নির্বাচিত জুম লেভেলের জন্য উপযুক্ত ফিল্ড অফ ভিউ গণনা করে এবং তারপর অনুভূমিক ফিল্ড অফ ভিউয়ের মাত্রার সাথে মোটামুটিভাবে মেলে এমন একটি টাইল সেট নির্বাচন করে সেই রেজোলিউশনের জন্য সবচেয়ে উপযুক্ত চিত্র নির্বাচন করে। স্ট্রিট ভিউ জুম লেভেলে নিম্নলিখিত ভিউ ফিল্ড অফ ভিউ ম্যাপ:

রাস্তার দৃশ্যের জুম লেভেল	দৃশ্য ক্ষেত্র (ডিগ্রি)
0	১৮০
১ (ডিফল্ট)	৯০
২	৪৫
৩	২২.৫
৪	১১.২৫

মনে রাখবেন যে স্ট্রিট ভিউতে দেখানো ছবির আকার সম্পূর্ণরূপে স্ট্রিট ভিউ কন্টেইনারের স্ক্রিন সাইজ (প্রস্থ) এর উপর নির্ভর করে। আপনি যদি আরও প্রশস্ত কন্টেইনার সরবরাহ করেন, তবে পরিষেবাটি যেকোনো জুম স্তরের জন্য একই ফিল্ড অফ ভিউ প্রদান করবে, যদিও এটি পরিবর্তে সেই রেজোলিউশনের জন্য আরও উপযুক্ত টাইল নির্বাচন করতে পারে।

যেহেতু প্রতিটি প্যানোরামা একটি সমকোণীয় প্রক্ষেপণ নিয়ে গঠিত, তাই প্যানোরামা টাইল তৈরি করা তুলনামূলকভাবে সহজ। যেহেতু প্রক্ষেপণটি 2:1 অনুপাতের একটি চিত্র প্রদান করে, তাই 2:1 অনুপাতের টাইলগুলি ব্যবহার করা সহজ, যদিও বর্গাকার টাইলগুলি বর্গাকার মানচিত্রে আরও ভাল কর্মক্ষমতা প্রদান করতে পারে (যেহেতু দৃশ্য ক্ষেত্র বর্গাকার হবে)।

২:১ টাইলসের ক্ষেত্রে, পুরো প্যানোরামাটি জুড়ে থাকা একটি একক চিত্র জুম লেভেল ০-এ সমগ্র প্যানোরামা "বিশ্ব" (বেস ইমেজ) উপস্থাপন করে, প্রতিটি ক্রমবর্ধমান জুম লেভেল ৪টি ^{জুমলেভেল} টাইল অফার করে। (যেমন জুম লেভেল ২-এ, পুরো প্যানোরামা ১৬টি টাইল নিয়ে গঠিত।) দ্রষ্টব্য: স্ট্রিট ভিউ টাইলিং-এ জুম লেভেলগুলি স্ট্রিট ভিউ নিয়ন্ত্রণ ব্যবহার করে প্রদত্ত জুম লেভেলের সাথে সরাসরি মেলে না; পরিবর্তে স্ট্রিট ভিউ নিয়ন্ত্রণ জুম লেভেলগুলি একটি ফিল্ড অফ ভিউ (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 ক্ষেত্রের মধ্যে এই অবস্থানটি সেট করুন।

নিচের উদাহরণটি গুগল সিডনি অফিসের একটি কাস্টম প্যানোরামা প্রদর্শন করে। মনে রাখবেন যে এই উদাহরণে কোনও মানচিত্র বা ডিফল্ট রাস্তার দৃশ্যের চিত্র ব্যবহার করা হয়নি:

টাইপস্ক্রিপ্ট

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

  panorama.registerPanoProvider(getCustomPanorama);
}

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

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

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

দ্রষ্টব্য: টাইপস্ক্রিপ্ট এবং গুগল ম্যাপ ব্যবহারের নির্দেশিকাটি পড়ুন।

জাভাস্ক্রিপ্ট

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

  panorama.registerPanoProvider(getCustomPanorama);
}

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

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

window.initPano = initPano;
index.js

দ্রষ্টব্য: জাভাস্ক্রিপ্টটি টাইপস্ক্রিপ্ট স্নিপেট থেকে সংকলিত।

সিএসএস

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

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

এইচটিএমএল

<html>
  <head>
    <title>Custom Street View Panoramas</title>

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

উদাহরণ দেখুন

নমুনা চেষ্টা করুন

JSFiddle.net গুগল ক্লাউড শেল

কাস্টম প্যানোরামা প্রদানকারী পাস করা প্যানোরামা আইডি, জুম লেভেল এবং প্যানোরামা টাইল স্থানাঙ্কের ভিত্তিতে উপযুক্ত টাইল ফেরত দেয়। যেহেতু ছবি নির্বাচন এই পাস করা মানগুলির উপর নির্ভর করে, তাই পাস করা মানগুলি দিয়ে প্রোগ্রাম্যাটিকভাবে নির্বাচিত করা যেতে পারে এমন ছবিগুলির নামকরণ করা কার্যকর, যেমন pano _ zoom _ tileX _ tileY .png ।

নিচের উদাহরণটি ছবিতে ডিফল্ট স্ট্রিট ভিউ নেভিগেশন তীর ছাড়াও আরেকটি তীর যুক্ত করে, যা গুগল সিডনির দিকে নির্দেশ করে এবং কাস্টম চিত্রের সাথে লিঙ্ক করে:

টাইপস্ক্রিপ্ট

let panorama: google.maps.StreetViewPanorama;

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

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

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

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

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

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

দ্রষ্টব্য: টাইপস্ক্রিপ্ট এবং গুগল ম্যাপ ব্যবহারের নির্দেশিকাটি পড়ুন।

জাভাস্ক্রিপ্ট

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;
index.js

দ্রষ্টব্য: জাভাস্ক্রিপ্টটি টাইপস্ক্রিপ্ট স্নিপেট থেকে সংকলিত।

সিএসএস

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

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

এইচটিএমএল

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

উদাহরণ দেখুন

নমুনা চেষ্টা করুন

JSFiddle.net গুগল ক্লাউড শেল