Usługa Street View

Omówienie

Google Street View udostępnia panoramiczne widoki z wyznaczonych ulic na całym terenie. Interfejs API Street View jest taki sam jak interfejs API Map Google (https://maps.google.com/). Lista obecnie obsługiwanych miast w Street View jest dostępna na stronie Map Google.

Poniżej znajduje się przykładowe zdjęcie Street View.

Interfejs Maps JavaScript API zapewnia usługę Street View do pobierania zdjęć i manipulowania nimi w Street View. Ta usługa Street View jest natywnie obsługiwana w przeglądarce.

Wykorzystanie map Street View

Street View można wykorzystywać w samodzielnym elemencie DOM, ale jest on najbardziej przydatny do wskazywania lokalizacji na mapie. Domyślnie funkcja Street View jest włączona na mapie, a w elementach sterujących nawigacji (powiększanie i przesuwanie) pojawiają się elementy sterujące Pegmanem. Aby ukryć ten element sterujący w obszarze MapOptions mapy, ustaw streetViewControl na false. Możesz też zmienić domyślną pozycję elementu sterującego Street View, ustawiając we właściwości streetViewControlOptions.position właściwość Map.

Element sterujący Pegmanem Street View umożliwia wyświetlanie panoram Street View bezpośrednio na mapie. Gdy użytkownik kliknie i przytrzyma Pegmana, mapa zostanie zaktualizowana, tak aby widoczne kontury wokół ulic z włączoną funkcją Street View były podobne do tych w aplikacji Mapy Google.

Gdy użytkownik umieszcza znacznik Pegmana na ulicy, mapa jest aktualizowana, aby wyświetlić panoramę Street View wskazanej lokalizacji.

Panoramy Street View

Zdjęcia Street View są obsługiwane przez obiekt StreetViewPanorama, który udostępnia interfejs API „wyświetlający” Street View. Każda mapa zawiera domyślną panoramę Street View, którą możesz pobrać, wywołując metodę getStreetView() mapy. Gdy dodasz do mapy opcję Street View, ustawiając jej opcję streetViewControl na true, automatycznie połączysz element sterujący Pegmanem z tą domyślną panoramą Street View.

Możesz też utworzyć własny obiekt StreetViewPanorama i ustawić mapę tak, aby używała go zamiast domyślnego, ustawiając właściwość streetView mapy na ten skonstruowany obiekt. Jeśli chcesz zmienić domyślne zachowanie, takie jak automatyczne udostępnianie nakładek między mapą a panoramę, możesz zastąpić domyślną panoramę. (Patrz sekcja Nakładki w Street View poniżej).

Kontenery Street View

Zamiast tego możesz umieścić StreetViewPanorama w osobnym elemencie DOM, często w elemencie <div>. Wystarczy przekazać element DOM w konstruktorze StreetViewPanorama. Aby uzyskać optymalne wyświetlanie obrazów, minimalny rozmiar to 200 x 200 pikseli.

Uwaga: funkcja Street View może być używana z mapą, ale nie jest to wymagane. Możesz używać samodzielnego obiektu Street View bez mapy.

Lokalizacje w Street View i punkt widzenia

Konstruktor StreetViewPanorama umożliwia też ustawienie lokalizacji i punktu widzenia Street View za pomocą parametru StreetViewOptions. Po utworzeniu obiektu możesz wywołać obiekty setPosition() i setPov(), aby zmienić jego lokalizację i punkt widzenia.

Lokalizacja w Street View określa położenie ostrości kamery w odniesieniu do danego zdjęcia, ale nie określa orientacji aparatu. W tym celu obiekt StreetViewPov definiuje 2 właściwości:

• heading (domyślnie 0) określa kąt obrotu wokół wierzchołka kamery w stopniach względem prawdziwej północy. Nagłówki są mierzone w prawo (90 stopni to wschodni wschód).
• pitch (domyślna wartość 0) określa wariancję kąta „w górę” lub „w dół” względem początkowego nachylenia domyślnego aparatu, który często (choć nie zawsze) jest płaski. (Na przykład zdjęcie zrobione na wzgórzu prawdopodobnie będzie przedstawiać domyślnie tonację inną niż pozioma). Kąt nachylenia można zmierzyć przy zastosowaniu dodatnich wartości (do +90 stopni w górę i do góry do wysokości domyślnej) oraz ujemnych (do -90 stopni w dół i do wysokości domyślnej).

Obiekt StreetViewPov jest najczęściej używany do określania punktu widzenia aparatu w Street View. Możesz też określić punkt widzenia fotografa – zazwyczaj jest to kierunek, w którym zmierzył się samochód lub trójkołowiec – za pomocą metody StreetViewPanorama.getPhotographerPov().

Poniższy kod przedstawia mapę Bostonu z początkowym widokiem na park Fenway. Wybór Pegmana i przeciągnięcie go w obsługiwane miejsce na mapie spowoduje zmianę panoramy Street View:

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>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

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

    <!-- 
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises
      with https://www.npmjs.com/package/@googlemaps/js-api-loader.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initialize&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

Śledzenie ruchu na urządzeniach mobilnych

Na urządzeniach obsługujących zdarzenia orientacji urządzenia interfejs API umożliwia użytkownikom zmianę widoku Street View w zależności od ruchu urządzenia. Użytkownicy mogą się rozglądać, przesuwając urządzenia. Jest to tzw. śledzenie ruchu lub śledzenie obrotu urządzenia.

Jako deweloper aplikacji możesz zmienić to działanie w ten sposób:

• Włącz lub wyłącz funkcję śledzenia ruchu. Domyślnie śledzenie ruchu jest włączone na każdym urządzeniu, które go obsługuje. Poniższy przykład pokazuje wyłączenie śledzenia ruchu, ale mimo to umożliwia jego kontrolowanie. (Pamiętaj, że użytkownik może włączyć śledzenie ruchu, klikając element sterujący).

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

• Ukryj lub pokaż element sterujący ruchem. Domyślnie ten element sterujący jest wyświetlany na urządzeniach obsługujących śledzenie ruchu. Użytkownik może włączyć lub wyłączyć śledzenie ruchu przez kliknięcie elementu sterującego. Pamiętaj, że element sterujący nigdy nie wyświetli się, jeśli urządzenie nie obsługuje śledzenia ruchu, niezależnie od wartości motionTrackingControl.

  Poniższa próbka wyłącza śledzenie ruchu i kontrolę ruchu. W takim przypadku użytkownik nie będzie mógł włączyć śledzenia ruchu:

  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
      });
  

• Zmień domyślną pozycję ustawienia śledzenia ruchu. Domyślnie element sterujący jest wyświetlany w prawym dolnym rogu panoramy (pozycja RIGHT_BOTTOM). W tym przykładzie określono ustawienie tego elementu na lewo:

  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
        }
      });
  

Aby zobaczyć, jak działa śledzenie ruchu, wyświetl poniższy przykład na urządzeniu mobilnym (lub dowolnym urządzeniu, które obsługuje zdarzenia orientacji urządzenia):

Zobacz przykład

Nakładki w Street View

Domyślny obiekt StreetViewPanorama obsługuje natywne wyświetlanie nakładek mapy. Nakładki wyświetlają się zwykle na poziomie ulicy zakotwiczonym na pozycjach LatLng. (Znaczniki będą się pojawiać na podstawie ich ogonów związanych z poziomym samolotem w widoku Street View).

Obecnie typy nakładek obsługiwanych w panoramach Street View są ograniczone do Marker, InfoWindow i niestandardowych OverlayView. Nakładki wyświetlane na mapie mogą być wyświetlane w widoku Street View, traktując panoramę jako zamiennik obiektu Map, wywołując setMap() i przekazując StreetViewPanorama jako argument, a nie mapę. Okna informacyjne można też otwierać w widoku Street View, wywołując open() i przekazując element StreetViewPanorama() zamiast mapy.

Jeśli utworzysz mapę z domyślnym ustawieniem StreetViewPanorama, wszystkie znaczniki utworzone na mapie będą automatycznie udostępniane razem z panoramą Street View mapy, pod warunkiem że widoczna będzie panorama. Aby pobrać domyślną panoramę Street View, wywołaj getStreetView() na obiekcie Map. Pamiętaj, że jeśli wyraźnie ustawisz właściwość streetView mapy na StreetViewPanorama własnego budynku, zastąpisz domyślną panoramę.

Poniższy przykład pokazuje znaczniki różnych lokalizacji wokół Astor Place, Nowy Jork. Przełącz wyświetlacz w Street View, aby wyświetlić udostępnione znaczniki w sekcji StreetViewPanorama.

let panorama: google.maps.StreetViewPanorama;

function initMap(): void {
  const astorPlace = { lat: 40.729884, lng: -73.990988 };

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

  document
    .getElementById("toggle")!
    .addEventListener("click", toggleStreetView);

  // Set up the markers on the map
  const cafeMarker = new google.maps.Marker({
    position: { lat: 40.730031, lng: -73.991428 },
    map,
    icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00",
    title: "Cafe",
  });

  const bankMarker = new google.maps.Marker({
    position: { lat: 40.729681, lng: -73.991138 },
    map,
    icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=dollar|FFFF00",
    title: "Bank",
  });

  const busMarker = new google.maps.Marker({
    position: { lat: 40.729559, lng: -73.990741 },
    map,
    icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=bus|FFFF00",
    title: "Bus Stop",
  });

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

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

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

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

let panorama;

function initMap() {
  const astorPlace = { lat: 40.729884, lng: -73.990988 };
  // Set up the map
  const map = new google.maps.Map(document.getElementById("map"), {
    center: astorPlace,
    zoom: 18,
    streetViewControl: false,
  });

  document.getElementById("toggle").addEventListener("click", toggleStreetView);

  // Set up the markers on the map
  const cafeMarker = new google.maps.Marker({
    position: { lat: 40.730031, lng: -73.991428 },
    map,
    icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00",
    title: "Cafe",
  });
  const bankMarker = new google.maps.Marker({
    position: { lat: 40.729681, lng: -73.991138 },
    map,
    icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=dollar|FFFF00",
    title: "Bank",
  });
  const busMarker = new google.maps.Marker({
    position: { lat: 40.729559, lng: -73.990741 },
    map,
    icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=bus|FFFF00",
    title: "Bus Stop",
  });

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

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

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

window.initMap = initMap;
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;
}

#floating-panel {
  margin-left: -100px;
}
style.css

<html>
  <head>
    <title>Overlays Within Street View</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="floating-panel">
      <input type="button" value="Toggle Street View" id="toggle" />
    </div>
    <div id="map"></div>

    <!-- 
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises
      with https://www.npmjs.com/package/@googlemaps/js-api-loader.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

Wydarzenia Street View

Podczas poruszania się między Street View lub manipulowanie jego orientację możesz monitorować kilka zdarzeń wskazujących zmiany stanu elementu StreetViewPanorama:

• pano_changed uruchamia się za każdym razem, gdy zmienia się identyfikator panoramy. To zdarzenie nie gwarantuje, że wszystkie powiązane dane z panoramy (np. połączenia) zmieniły się do momentu wywołania tego zdarzenia. To zdarzenie wskazuje tylko, że zmienił się identyfikator panoramy. Identyfikator panoramy (który można wykorzystać do odwołania do tej panoramy) jest stabilny tylko w bieżącej sesji przeglądarki.
• position_changed uruchamia się za każdym razem, gdy zmienia się bazowa pozycja (LatLng) panoramy. Obracanie panoramy nie wywoła tego zdarzenia. Możesz zmienić położenie punktu początkowego, nie zmieniając powiązanego identyfikatora panoramy, ponieważ interfejs API automatycznie łączy najbliższy identyfikator panoramy z pozycją panoramy.
• pov_changed uruchamia się za każdym razem, gdy zmienia się StreetViewPov elementu Street View. To zdarzenie może się uruchomić, gdy pozycja i identyfikator panoramy pozostaną stabilne.
• links_changed uruchamia się za każdym razem, gdy zmieniają się linki do Street View. Pamiętaj, że to zdarzenie może się uruchomić asynchronicznie po zmianie identyfikatora panoramy wskazanej na pano_changed.
• visible_changed uruchamia się za każdym razem, gdy zmienia się widoczność Street View. Pamiętaj, że to zdarzenie może się uruchomić asynchronicznie po zmianie identyfikatora panoramy wskazanej na pano_changed.

Ten kod pokazuje, jak postępować ze zdarzeniami w celu zbierania danych o elementach 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>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="pano"></div>
    <div id="floating-panel">
      <table>
        <tr>
          <td><b>Position</b></td>
          <td id="position-cell">&nbsp;</td>
        </tr>
        <tr>
          <td><b>POV Heading</b></td>
          <td id="heading-cell">270</td>
        </tr>
        <tr>
          <td><b>POV Pitch</b></td>
          <td id="pitch-cell">0.0</td>
        </tr>
        <tr>
          <td><b>Pano ID</b></td>
          <td id="pano-cell">&nbsp;</td>
        </tr>
        <table id="links_table"></table>
      </table>
    </div>

    <!-- 
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises
      with https://www.npmjs.com/package/@googlemaps/js-api-loader.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initPano&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

Elementy sterujące Street View

Gdy wyświetla się StreetViewPanorama, domyślnie w przeglądarce pojawiają się różne opcje. Możesz włączyć lub wyłączyć te ustawienia, ustawiając odpowiednie pola w StreetViewPanoramaOptions na true lub false:

• panControl umożliwia obracanie panoramy. Ta opcja pojawia się domyślnie jako standardowy, zintegrowany kompas i sterowanie kontrolą przesuwania. Możesz zmienić pozycję elementu sterującego, podając PanControlOptions w polu panControlOptions.
• zoomControl umożliwia powiększenie obrazu. Jest ona domyślnie widoczna w prawym dolnym rogu panoramy. Wygląd elementu sterującego możesz zmienić, podając w polu zoomControlOptions wartość ZoomControlOptions.
• addressControl zawiera nakładkę tekstową wskazującą powiązaną lokalizację i zawiera link umożliwiający otwarcie tej lokalizacji w Mapach Google. Wygląd elementu sterującego możesz zmienić, podając w polu addressControlOptions wartość StreetViewAddressControlOptions.
• fullscreenControl umożliwia otwarcie Street View w trybie pełnoekranowym. Wygląd elementu sterującego możesz zmienić, podając w polu fullscreenControlOptions wartość FullscreenControlOptions.
• motionTrackingControl umożliwia włączenie lub wyłączenie śledzenia ruchu na urządzeniach mobilnych. Ta opcja jest widoczna tylko na urządzeniach, które obsługują zdarzenia orientacji urządzenia. Domyślnie element sterujący jest widoczny w prawym dolnym rogu panoramy. Możesz zmienić pozycję elementu sterującego, podając MotionTrackingControlOptions. Więcej informacji znajdziesz w sekcji poświęconej śledzeniu ruchu.
• linksControl zawiera strzałki wskazujące miejsce, w którym można przejść do sąsiednich zdjęć panoramicznych.
• Element sterujący zamykający pozwala użytkownikowi zamknąć przeglądarkę Street View. Możesz włączyć lub wyłączyć ustawienie Zamknij, ustawiając enableCloseButton na true lub false.

Poniższy przykład pokazuje, jak zmienić elementy sterujące wyświetlane w powiązanym widoku Street View i usunąć linki do widoku:

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>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

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

    <!-- 
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises
      with https://www.npmjs.com/package/@googlemaps/js-api-loader.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initPano&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

Bezpośredni dostęp do danych Street View

Możesz automatycznie określić dostępność danych Street View lub zwrócić informacje o konkretnych panoramach bez konieczności bezpośredniej modyfikacji mapy/panoramy. Możesz to zrobić za pomocą obiektu StreetViewService, który zapewnia interfejs do danych przechowywanych w usłudze Street View Google.

Prośby o usługę Street View

Dostęp do usługi Street View jest asynchroniczny, ponieważ interfejs API Map Google musi wykonywać wywołania na serwerze zewnętrznym. Z tego powodu musisz przekazać metodę wywołania zwrotnego, która zostanie wykonana po zakończeniu żądania. Ta metoda wywołania zwrotnego przetwarza wynik.

Możesz zainicjować żądania do StreetViewService za pomocą StreetViewPanoRequest lub StreetViewLocationRequest.

Żądanie używające tagu StreetViewPanoRequest zwraca dane panoramy, używając unikalnego identyfikatora, który jednoznacznie identyfikuje panoramę. Pamiętaj, że te identyfikatory referencyjne są stabilne tylko przez cały okres istnienia zdjęć danej panoramy.

Żądanie korzystające z funkcji StreetViewLocationRequest wyszukuje dane dotyczące panoramy w określonej lokalizacji, używając tych parametrów:

• location określa lokalizację (szerokość i długość geograficzną), która ma być używana do wyszukiwania panoramy.
• preference określa, w którym promieniu należy znaleźć panoramę: najbliższą podanej lokalizacji lub najlepszą w określonym promieniu.
• radius ustawia promień (w metrach), w którym można wyszukać panoramę, wyśrodkowany na danej szerokości i długości geograficznej. Jeśli nie zostanie podany, domyślna wartość to 50.
• source określa źródło panoram do wyszukiwania. Prawidłowe wartości to:
  • default korzysta z domyślnych źródeł Street View; wyszukiwania nie są ograniczone do konkretnych źródeł.
  • outdoor ogranicza wyszukiwanie do kolekcji na zewnątrz. Pamiętaj, że w przypadku danej lokalizacji mogą nie być dostępne panoramy na zewnątrz.

Odpowiedzi usługi Street View

Funkcja getPanorama() wymaga wywołania zwrotnego do wykonania po pobraniu wyniku z usługi Street View. Ta funkcja wywołania zwrotnego zwraca zestaw danych panoramicznych w obiekcie StreetViewPanoramaData oraz kod StreetViewStatus wskazujący stan żądania w tej kolejności.

Specyfikacja obiektu StreetViewPanoramaData zawiera metadane, które przedstawiają panoramę Street View w następującej postaci:

{
  "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
  }
}

Ten obiekt danych nie jest obiektem StreetViewPanorama. Aby utworzyć obiekt Street View z wykorzystaniem tych danych, musisz utworzyć StreetViewPanorama i wywołać metodę setPano(), przekazując identyfikator w sposób podany w zwróconym polu location.pano.

Kod status może zwracać jedną z tych wartości:

• OK wskazuje, że usługa znalazła pasującą panoramę.
• ZERO_RESULTS oznacza, że usługa nie znalazła panoramy spełniającej warunki.
• UNKNOWN_ERROR oznacza, że nie udało się przetworzyć żądania Street View, mimo że dokładna przyczyna jest nieznana.

Następujący kod tworzy StreetViewService, który odpowiada na kliknięcia użytkownika na mapie przez utworzenie znaczników, które po kliknięciu wyświetlają StreetViewPanorama tej lokalizacji. Kod wykorzystuje zawartość elementu StreetViewPanoramaData zwróconego przez usługę.

/*
 * 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>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map" style="width: 45%; height: 100%; float: left"></div>
    <div id="pano" style="width: 45%; height: 100%; float: left"></div>

    <!-- 
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises
      with https://www.npmjs.com/package/@googlemaps/js-api-loader.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

Dostarczanie niestandardowych widoków Street View

Interfejs Maps JavaScript API obsługuje wyświetlanie niestandardowych panoram w obiekcie StreetViewPanorama. Dzięki niestandardowym panoramom możesz pokazać wnętrze budynków, widoki z malowniczych miejsc lub co tylko zechcesz. Możesz nawet połączyć je z istniejącymi panoramami Google.

Aby skonfigurować zbiór niestandardowych zdjęć panoramicznych, wykonaj te czynności:

• Utwórz podstawowy obraz panoramiczny dla każdej z nich. Ten obraz podstawowy powinien być w najwyższej rozdzielczości, z której chcesz wyświetlać powiększony obraz.
• (Opcjonalne, ale zalecane) Utwórz zestaw panoramicznych kafelków przy różnych poziomach powiększenia z obrazu podstawowego.
• Twórz połączenia między niestandardowymi panoramami.
• (Opcjonalnie) Wyznacz panoramy „wejściowe” na istniejących zdjęciach Google Street View i dostosuj połączenia ze niestandardowego zbioru do standardowego.
• Zdefiniuj metadane każdego obrazu panoramicznego w obiekcie StreetViewPanoramaData.
• Zaimplementuj metodę, która określa dane i niestandardowe obrazy panoramiczne, i wyznacz tę metodę jako niestandardowy moduł obsługi w obiekcie StreetViewPanorama.

Wyjaśnij ten proces w kolejnych sekcjach.

Tworzenie niestandardowych panoram

Każda panorama Street View to zdjęcie lub zbiór zdjęć, które zapewniają pełny widok 360 stopni z jednego miejsca. Obiekt StreetViewPanorama używa obrazów zgodnych z odwzorowaniem walcowym równoodległościowym (Plate Carrée). Odchylenie obejmuje widok poziomy (360 stopni w poziomie) i 180 stopni (od góry do góry). Dzięki tym polom widoku powstaje obraz o współczynniku proporcji 2:1. Pełen widok rozciąga się poniżej.

Zdjęcia panoramiczne uzyskuje się zwykle przez zrobienie wielu zdjęć z jednej pozycji i ich połączenie za pomocą oprogramowania do tworzenia panoram. Więcej informacji znajdziesz w porównaniu aplikacji do łączenia zdjęć Wikipedii. Takie zdjęcia powinny mieć jedną lokalizację, w której będą wykonywane poszczególne zdjęcia panoramiczne. Powstała panorama 360° umożliwia pokazanie odwzorowania na kulę zdobioną przez dwuwymiarową powierzchnię kuli.

W przypadku dzielenia obrazu na prostokątne kafelki i wyświetlania na podstawie wyliczonych współrzędnych płytki lepiej jest traktować panoramę jako odwzorowanie na sferze z układem prostokątnym.

Tworzenie niestandardowych kafelków panoramy

Street View obsługuje też różne poziomy szczegółowości zdjęć za pomocą elementów sterujących powiększeniem, które pozwalają na powiększenie i pomniejszenie widoku domyślnego. Ogólnie Street View udostępnia pięć poziomów powiększenia każdego zdjęcia panoramicznego. Jeśli chcesz, aby jeden obraz panoramiczny wyświetlał wszystkie poziomy powiększenia, taki obraz byłby dość duży i znacznie spowolnił działanie aplikacji lub mieć niską rozdzielczość przy wyższych poziomach powiększenia, gdyby konieczne było zastosowanie słabo spikselowanego obrazu. Na szczęście możemy użyć podobnego wzorca służącego do wyświetlania kafelków mapy Google na różnych poziomach powiększenia, aby zdjęcia w rozdzielczości były odpowiedniej jakości na każdym poziomie powiększenia.

Po pierwszym wczytaniu StreetViewPanorama domyślnie wyświetla obraz składający się z 25% (90 stopni) łuku w poziomie. Panorama w poziomie powiększenia 1. Ten widok odpowiada mniej więcej normalnemu polu widzenia ludzi. Pomniejszenie widoku domyślnego zapewnia w zasadzie szerszy łuk, a powiększanie powoduje zawężenie pola widoku do mniejszego. StreetViewPanorama automatycznie oblicza odpowiednie pole widzenia dla wybranego poziomu powiększenia, a następnie wybierze obrazy, które są najbardziej odpowiednie dla danej rozdzielczości, wybierając zestaw kafelków przybliżony do wymiarów poziomego pola widzenia. Poniższe pola widoku są mapowane na poziomy powiększenia Street View:

Pamiętaj, że rozmiar zdjęcia wyświetlanego w Street View zależy całkowicie od rozmiaru ekranu (szerokość) kontenera Street View. Jeśli podasz większy kontener, usługa będzie nadal oferować to samo pole widzenia przy danym poziomie powiększenia, ale może wybrać kafelki bardziej odpowiednie dla tej rozdzielczości.

Ponieważ każda panorama składa się z odwzorowania walcowego równoodległościowego, tworzenie fragmentów map jest stosunkowo proste. Odwzorowanie pozwala uzyskać obraz o współczynniku proporcji 2:1, dlatego ten format jest łatwiejszy w obsłudze, jednak może go poprawić w przypadku map kwadratowych (ponieważ pole widzenia jest kwadratowe).

W przypadku kafelków 2:1 pojedynczy obraz obejmujący całą panoramę reprezentuje cały świat („obraz podstawowy”) na poziomie powiększenia 0, przy czym każdy kolejny poziom powiększenia oferuje 4 kafelki ^zoomLevel. (Na przykład przy powiększeniu na poziomie 2 cała panorama składa się z 16 kafelków). Uwaga: poziomy powiększenia w widoku kafelka Street View nie są bezpośrednio dopasowane do poziomu powiększenia określonego za pomocą elementów sterujących Street View. Zamiast tego poziom powiększenia w widoku Street View wybiera pole widzenia, z którego wybierane są odpowiednie kafelki.

Ogólnie warto określić nazwy kafelków, by móc je wybierać automatycznie. Schemat jest opisany poniżej w sekcji Obsługa niestandardowych próśb o panoramę.

Obsługa niestandardowych próśb o dodanie panoramy

Aby użyć niestandardowej panoramy, wywołaj jej nazwę StreetViewPanorama.registerPanoProvider(), określając jej nazwę. Metoda dostawcy panoramy musi zwracać obiekt StreetViewPanoramaData o takim podpisie:

Function(pano):StreetViewPanoramaData

StreetViewPanoramaData jest obiektem następującego formularza:

{
  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
  ]
}

Aby wyświetlić niestandardową panoramę:

• Ustaw właściwość StreetViewPanoramaOptions.pano na wartość niestandardową.
• Wywołaj StreetViewPanorama.registerPanoProvider(), aby dostarczyć funkcję dostawcy panoramy niestandardowej.
• Zaimplementuj niestandardową funkcję dostawcy panoramy, aby obsłużyć określoną wartość pano.
• utworzyć obiekt StreetViewPanoramaData;
• Ustaw właściwość StreetViewTileData.getTileUrl na nazwę przekazanej przez siebie funkcji dostawcy kafelka. na przykład getCustomPanoramaTileUrl.
• Zaimplementuj funkcję niestandardowego dostawcy kafelków, tak jak pokazano w przykładach poniżej.
• Zwraca obiekt StreetViewPanoramaData.

Uwaga: nie ustawiaj bezpośrednio właściwości position na urządzeniu StreetViewPanorama, gdy chcesz wyświetlać niestandardowe widoki. Takie działanie spowoduje wysłanie do usługi Street View prośby o ustawienie domyślnego widoku Street View w pobliżu danej lokalizacji. Zamiast tego ustaw ją w polu location.latLng niestandardowego obiektu StreetViewPanoramaData.

Poniższy przykład pokazuje niestandardową panoramę biura Google Sydney. Pamiętaj, że ten przykład nie wykorzystuje mapy ani domyślnych zdjęć Street View:

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>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

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

    <!-- 
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises
      with https://www.npmjs.com/package/@googlemaps/js-api-loader.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initPano&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

Dostawca niestandardowej panoramy zwraca odpowiedni kafelek na podstawie przekazanego identyfikatora, poziomu powiększenia i współrzędnych mapy. Wybór obrazów zależy od tych przekazywanych wartości, dlatego warto nazwać obrazy, które można wybrać automatycznie na podstawie podanych wartości, np. pano_zoom_tileX_tileY.png.

Poniższy przykład dodaje kolejną strzałkę do domyślnych strzałek nawigacyjnych Street View, która wskazuje Google Sydney i zawiera linki do zdjęć niestandardowych:

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",
      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>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

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

    <!-- 
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises
      with https://www.npmjs.com/package/@googlemaps/js-api-loader.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html