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

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

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

আরও দেখুন ম্যাপস জাভাস্ক্রিপ্ট এপিআই রেফারেন্স: রেন্ডারিং , সার্ভিস )

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

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

নিচে একটি নমুনা স্ট্রিট ভিউ ছবি দেখানো হলো।

ম্যাপস জাভাস্ক্রিপ্ট এপিআই, গুগল ম্যাপস স্ট্রিট ভিউতে ব্যবহৃত চিত্রাবলী সংগ্রহ ও পরিচালনা করার জন্য একটি স্ট্রিট ভিউ পরিষেবা প্রদান করে। এই স্ট্রিট ভিউ পরিষেবাটি ব্রাউজারের মধ্যেই স্বাভাবিকভাবে সমর্থিত।

স্ট্রিট ভিউ মানচিত্র ব্যবহার

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

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

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

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

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

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

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

স্ট্রিট ভিউ কন্টেইনার

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

দ্রষ্টব্য: যদিও স্ট্রিট ভিউ কার্যকারিতা একটি মানচিত্রের সাথে একত্রে ব্যবহারের জন্য ডিজাইন করা হয়েছে, এই ব্যবহারটি বাধ্যতামূলক নয়। আপনি মানচিত্র ছাড়াই একটি স্বতন্ত্র স্ট্রিট ভিউ অবজেক্ট ব্যবহার করতে পারেন।

স্ট্রিট ভিউ লোকেশন এবং পয়েন্ট-অফ-ভিউ (পিওভি)

StreetViewPanorama কনস্ট্রাক্টরটি আপনাকে StreetViewOptions প্যারামিটার ব্যবহার করে স্ট্রিট ভিউ-এর অবস্থান এবং দৃষ্টিকোণ (পয়েন্ট অফ ভিউ) নির্ধারণ করার সুযোগ দেয়। অবজেক্টটি তৈরি করার পরে এর অবস্থান এবং দৃষ্টিকোণ পরিবর্তন করার জন্য আপনি setPosition() এবং setPov() কল করতে পারেন।

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

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

StreetViewPov অবজেক্টটি বেশিরভাগ ক্ষেত্রে স্ট্রিট ভিউ ক্যামেরার দৃষ্টিকোণ নির্ধারণ করতে ব্যবহৃত হয়। এছাড়াও আপনি 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

উদাহরণ দেখুন

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

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

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

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

  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 সহ একটি ম্যাপ তৈরি করার সময়, ম্যাপে তৈরি করা যেকোনো মার্কার স্বয়ংক্রিয়ভাবে ম্যাপের সংশ্লিষ্ট Street View প্যানোরামার সাথে শেয়ার হয়ে যায়, যদি সেই প্যানোরামাটি দৃশ্যমান থাকে। ডিফল্ট Street View প্যানোরামাটি পেতে, Map অবজেক্টে getStreetView() কল করুন। মনে রাখবেন যে, যদি আপনি ম্যাপের streetView প্রপার্টিকে স্পষ্টভাবে আপনার নিজের তৈরি করা একটি StreetViewPanorama তে সেট করেন, তাহলে আপনি ডিফল্ট প্যানোরামাটিকে ওভাররাইড করে ফেলবেন।

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

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

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('./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
    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();
index.ts

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

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

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('./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
    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 {};
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>
        <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>
index.html

উদাহরণ দেখুন

স্ট্রিট ভিউ ইভেন্টস

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

• যখনই কোনো নির্দিষ্ট প্যানো আইডি পরিবর্তিত হয়, তখনই pano_changed ইভেন্টটি ফায়ার হয়। এই ইভেন্টটি ট্রিগার হওয়ার আগেই প্যানোরামার ভেতরের কোনো সংশ্লিষ্ট ডেটা (যেমন লিঙ্কগুলো) পরিবর্তিত হয়েছে কি না, তার কোনো নিশ্চয়তা দেয় না; এই ইভেন্টটি শুধুমাত্র নির্দেশ করে যে একটি প্যানো আইডি পরিবর্তিত হয়েছে। মনে রাখবেন যে প্যানো আইডি (যা আপনি এই প্যানোরামাটিকে রেফারেন্স করতে ব্যবহার করতে পারেন) শুধুমাত্র বর্তমান ব্রাউজার সেশনের মধ্যেই স্থিতিশীল থাকে।
• যখনই প্যানোরামার অন্তর্নিহিত ( LatLng ) অবস্থান পরিবর্তিত হয়, তখনই position_changed ইভেন্টটি ফায়ার হয়। প্যানোরামা ঘোরানোর ফলে এই ইভেন্টটি ট্রিগার হবে না। উল্লেখ্য যে, আপনি সংশ্লিষ্ট প্যানো আইডি পরিবর্তন না করেও একটি প্যানোরামার অন্তর্নিহিত অবস্থান পরিবর্তন করতে পারেন, কারণ এপিআই স্বয়ংক্রিয়ভাবে নিকটতম প্যানো আইডিটিকে প্যানোরামার অবস্থানের সাথে যুক্ত করে দেবে।
• যখনই স্ট্রিট ভিউ-এর 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

উদাহরণ দেখুন

স্ট্রিট ভিউ নিয়ন্ত্রণ

একটি 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

উদাহরণ দেখুন

সরাসরি স্ট্রিট ভিউ ডেটা অ্যাক্সেস করা

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

স্ট্রিট ভিউ পরিষেবা অনুরোধ

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

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

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

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

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

স্ট্রিট ভিউ পরিষেবার প্রতিক্রিয়া

স্ট্রিট ভিউ সার্ভিস থেকে কোনো ফলাফল পাওয়ার পর getPanorama() ফাংশনটি কার্যকর হওয়ার জন্য একটি কলব্যাক ফাংশনের প্রয়োজন হয়। এই কলব্যাক ফাংশনটি ক্রমানুসারে একটি StreetViewPanoramaData অবজেক্টের মধ্যে প্যানোরামা ডেটার একটি সেট এবং অনুরোধের অবস্থা নির্দেশকারী একটি StreetViewStatus কোড ফেরত দেয়।

একটি StreetViewPanoramaData অবজেক্ট স্পেসিফিকেশনে একটি স্ট্রিট ভিউ প্যানোরামা সম্পর্কিত নিম্নলিখিত ফর্মের মেটা-ডেটা থাকে:

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

উল্লেখ্য যে, এই ডেটা অবজেক্টটি নিজে কোনো StreetViewPanorama অবজেক্ট নয়। এই ডেটা ব্যবহার করে একটি Street View অবজেক্ট তৈরি করতে হলে, আপনাকে একটি StreetViewPanorama তৈরি করতে হবে এবং ফেরত আসা location.pano ফিল্ডে উল্লিখিত ID-টি পাস করে setPano() ফাংশনটি কল করতে হবে।

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

উদাহরণ দেখুন

কাস্টম স্ট্রিট ভিউ প্যানোরামা প্রদান করা

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

নিজস্ব প্যানোরামা চিত্রাবলী সেট আপ করার জন্য নিম্নলিখিত ধাপগুলো অনুসরণ করতে হয়:

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

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

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

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

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

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

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

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

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

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

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

যেহেতু প্রতিটি প্যানোরামা একটি ইক্যুইরেক্ট্যাঙ্গুলার প্রজেকশন নিয়ে গঠিত, তাই প্যানোরামা টাইলস তৈরি করা তুলনামূলকভাবে সহজ। যেহেতু এই প্রজেকশনটি ২:১ অ্যাসপেক্ট রেশিওর একটি ছবি প্রদান করে, তাই ২:১ অনুপাতের টাইলস ব্যবহার করা সহজতর, যদিও বর্গাকার টাইলস বর্গাকার ম্যাপে আরও ভালো পারফরম্যান্স দিতে পারে (কারণ এর ফিল্ড অফ ভিউ বর্গাকার হবে)।

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

উদাহরণ দেখুন

কাস্টম প্যানোরামা প্রোভাইডার প্রদত্ত প্যানোরামা আইডি, জুম লেভেল এবং প্যানোরামা টাইল স্থানাঙ্কের উপর ভিত্তি করে উপযুক্ত টাইলটি ফেরত দেয়। যেহেতু ছবি নির্বাচন এই প্রদত্ত মানগুলির উপর নির্ভর করে, তাই যে ছবিগুলি ঐ মানগুলি ব্যবহার করে প্রোগ্রামগতভাবে নির্বাচন করা যায়, সেগুলির নাম দেওয়া সুবিধাজনক 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

উদাহরণ দেখুন