Street View পরিষেবা

এক নজরে

প্ল্যাটফর্ম বেছে নিন: Android iOS JavaScript

এছাড়াও, Maps JavaScript API রেফারেন্স দেখুন: রেন্ডারিং, পরিষেবা)

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

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

নিচে একটি নমুনা Street View ছবি দেখানো হয়েছে।

Maps JavaScript API, Google Maps Street View-তে ব্যবহৃত ছবি পাওয়ার ও তা ম্যানিপুলেট করার জন্য একটি Street View পরিষেবা প্রদান করে। এই Street View পরিষেবা ব্রাউজারের মধ্যে নেটিভভাবে কাজ করে।

Street View ম্যাপের ব্যবহার

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

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

ব্যবহারকারী কোনও রাস্তায় পেগম্যান মার্কার ড্রপ করলে, ম্যাপ আপডেট হয়ে সেই লোকেশনের Street View প্যানোরামা দেখায়।

Street View প্যানোরামা

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

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

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

Street View কন্টেনার

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

মনে রাখবেন: যদিও Street View ফাংশনালিটি ম্যাপের সাথে একসাথে ব্যবহার করার জন্য ডিজাইন করা হয়েছে, তবে এই ব্যবহারের প্রয়োজন নেই। আপনি ম্যাপ ছাড়াই একটি স্বতন্ত্র Street View অবজেক্ট ব্যবহার করতে পারেন।

Street View লোকেশন ও পয়েন্ট-অফ-ভিউ (POV)

StreetViewPanorama কনস্ট্রাক্টর আপনাকে StreetViewOptions প্যারামিটার ব্যবহার করে Street View লোকেশন এবং পয়েন্ট অফ ভিউ সেট করার অনুমতি দেয়। অবজেক্টের লোকেশন ও POV পরিবর্তন করতে, কনস্ট্রাকশনের পরে setPosition() ও setPov()-এ কল করতে পারেন।

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

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

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

নিচের কোডটি বোস্টনের একটি ম্যাপ দেখায় যেখানে ফেনওয়ে পার্কের প্রাথমিক ভিউ রয়েছে। পেগম্যান বেছে নিয়ে ম্যাপের কোনও কাজ করে এমন লোকেশনে টেনে নিয়ে গেলে Street View প্যানোরামা পরিবর্তন হবে:

TypeScript

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

  map.setStreetView(panorama);
}

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

মনে রাখবেন: TypeScript ও Google Maps ব্যবহার করার ব্যাপারে গাইড পড়ুন।

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

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

মনে রাখবেন: TypeScript স্নিপেট থেকে জাভাস্ক্রিপ্ট কম্পাইল করা হয়।

CSS

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

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

HTML

<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

উদাহরণ দেখুন

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

ডিভাইস ওরিয়েন্টেশন ইভেন্ট কাজ করে এমন ডিভাইসে, API ব্যবহারকারীদের ডিভাইসের মুভমেন্টের উপর ভিত্তি করে Street View-এর পয়েন্ট অফ ভিউ পরিবর্তন করার ক্ষমতা প্রদান করে। ব্যবহারকারী ডিভাইস ঘুরিয়ে চারপাশে দেখতে পারবেন। একে মোশন ট্র্যাকিং বা ডিভাইস রোটেশন ট্র্যাকিং বলা হয়।

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

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

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

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

  নিচের নমুনাটি মোশন ট্র্যাকিং ও মোশন ট্র্যাকিং কন্ট্রোল, দুটিই বন্ধ করে দেয়। এই ক্ষেত্রে, ব্যবহারকারী মোশন ট্র্যাকিং চালু করতে পারবেন না:

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

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

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

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

উদাহরণ দেখুন

Street View-এর মধ্যে ওভারলে

ডিফল্ট StreetViewPanorama অবজেক্ট, ম্যাপের নেটিভ ডিসপ্লে ওভারলে কাজ করে। ওভারলে সাধারণত "স্ট্রিট লেভেলে" LatLng পজিশনে অ্যাঙ্কর করা থাকে। (মার্কারের লেজটি Street View প্যানোরামার মধ্যে লোকেশনের অনুভূমিক প্লেনের সাথে অ্যাঙ্কর করা থাকবে, যেমন।)

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

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

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

TypeScript

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

মনে রাখবেন: TypeScript ও Google Maps ব্যবহার করা সংক্রান্ত নির্দেশিকা পড়ুন।

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

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

CSS

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

<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

উদাহরণ দেখুন

Street View ইভেন্ট

Street View-এর মধ্যে নেভিগেট করার সময় বা এর দিকনির্দেশ পরিবর্তন করার সময়, আপনি হয়ত বেশ কিছু ইভেন্ট মনিটর করতে চাইবেন যা StreetViewPanorama-এর স্ট্যাটাসে পরিবর্তন নির্দেশ করে:

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

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

TypeScript

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

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

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

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

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

    const links = panorama.getLinks();

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

      linksTable.appendChild(row);

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

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

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

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

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

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

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

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

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

মনে রাখবেন: TypeScript ও Google Maps ব্যবহার করা সংক্রান্ত নির্দেশিকা পড়ুন।

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

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

মনে রাখবেন: TypeScript স্নিপেট থেকে জাভাস্ক্রিপ্ট কম্পাইল করা হয়।

CSS

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

<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

উদাহরণ দেখুন

Street View কন্ট্রোল

StreetViewPanorama দেখানোর সময়, ডিফল্ট হিসেবে প্যানোরামায় বিভিন্ন ধরনের কন্ট্রোল দেখা যায়। আপনি true বা false-এ StreetViewPanoramaOptions-এর মধ্যে উপযুক্ত ফিল্ড সেট করে এইসব কন্ট্রোল চালু বা বন্ধ করতে পারবেন:

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

নিম্নলিখিত উদাহরণটি সংশ্লিষ্ট Street View-এর মধ্যে দেখানো কন্ট্রোল পরিবর্তন করে এবং ভিউয়ের লিঙ্ক সরিয়ে দেয়:

TypeScript

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

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

মনে রাখবেন: TypeScript ও Google Maps ব্যবহার করার ব্যাপারে গাইড পড়ুন।

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

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

মনে রাখবেন: TypeScript স্নিপেট থেকে JavaScript কম্পাইল করা হয়।

CSS

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

<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

উদাহরণ দেখুন

Street View ডেটা সরাসরি অ্যাক্সেস করা

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

Street View পরিষেবার অনুরোধ

Google Maps API একটি এক্সটার্নাল সার্ভারে কল করতে হয় বলে Street View পরিষেবা অ্যাক্সেস করা অ্যাসিঙ্ক্রোনাস। সেই কারণে, অনুরোধ সম্পূর্ণ হলে এক্সিকিউট করার জন্য আপনাকে একটি কলব্যাক পদ্ধতি পাস করতে হবে। এই কলব্যাক পদ্ধতি ফলাফল প্রসেস করে।

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

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

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

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

Street View পরিষেবা সংক্রান্ত উত্তর

Street View পরিষেবা থেকে ফলাফল পাওয়ার পরে তা এক্সিকিউট করার জন্য 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 থেকে বোঝা যাচ্ছে যে Street View সংক্রান্ত অনুরোধ প্রসেস করা যায়নি, যদিও এর সঠিক কারণ জানা যায়নি।

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

TypeScript

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

let map: google.maps.Map;

let panorama: google.maps.StreetViewPanorama;

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

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

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

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

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

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

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

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

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

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

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

মনে রাখবেন: TypeScript ও Google Maps ব্যবহার করা সংক্রান্ত নির্দেশিকা পড়ুন।

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

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

মনে রাখবেন: TypeScript স্নিপেট থেকে JavaScript কম্পাইল করা হয়।

CSS

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

<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

উদাহরণ দেখুন

কাস্টম Street View প্যানোরামা প্রদান করা

Maps JavaScript API, StreetViewPanorama অবজেক্টের মধ্যে কাস্টম প্যানোরামা দেখানোর সুবিধা প্রদান করে। কাস্টম প্যানোরামা ব্যবহার করে, আপনি বিল্ডিংয়ের ভেতরের অংশ, মনোরম লোকেশন থেকে দৃশ্য অথবা আপনার কল্পনা থেকে যেকোনও কিছু দেখাতে পারবেন। এমনকি আপনি এইসব কাস্টম প্যানোরামা Google-এর আগে থেকে থাকা Street View প্যানোরামার সাথে লিঙ্ক করতে পারবেন।

কাস্টম প্যানোরামা ছবির সেট সেট-আপ করার মধ্যে নিম্নলিখিত ধাপগুলি অন্তর্ভুক্ত:

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

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

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

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

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

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

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

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

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

Street View জুম লেভেল	ফিল্ড অফ ভিউ (ডিগ্রি)
0	১৮০
১ (ডিফল্ট)	৯০
2	45
3	22.5
4	১১.২৫

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

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

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

নিচের উদাহরণে Google-এর সিডনি অফিসের কাস্টম প্যানোরামা দেখানো হয়েছে। মনে রাখবেন যে এই উদাহরণে ম্যাপ বা ডিফল্ট Street View ছবি ব্যবহার করা হয়নি:

TypeScript

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

  panorama.registerPanoProvider(getCustomPanorama);
}

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

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

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

মনে রাখবেন: TypeScript ও Google Maps ব্যবহার করা সংক্রান্ত নির্দেশিকা পড়ুন।

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

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

মনে রাখবেন: TypeScript স্নিপেট থেকে জাভাস্ক্রিপ্ট কম্পাইল করা হয়।

CSS

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

<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।

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

TypeScript

let panorama: google.maps.StreetViewPanorama;

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

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

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

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

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

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

মনে রাখবেন: TypeScript ও Google Maps ব্যবহার করা সংক্রান্ত নির্দেশিকা পড়ুন।

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

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

মনে রাখবেন: TypeScript স্নিপেট থেকে জাভাস্ক্রিপ্ট কম্পাইল করা হয়।

CSS

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

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

HTML

<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

উদাহরণ দেখুন