Es kann losgehen!

Bevor Sie mit der Entwicklung beginnen, lesen Sie bitte unsere Entwicklerdokumentation.

Die Google Maps JavaScript API aktivieren

Zum Einstieg führen wir Sie durch die Google Developers Console, wo Sie vorab Folgendes tun müssen:

  1. Ein Projekt erstellen oder auswählen
  2. Die Google Maps JavaScript API und zugehörige Dienste aktivieren
  3. Zugehörige Schlüssel erstellen
Weiter

Street View-Dienst

Übersicht

Google Street View stellt 360°-Panoramaansichten von verschiedenen Straßen des gesamten Street View-Abdeckungsbereichs zur Verfügung. Die API-Abdeckung von Street View stimmt mit der Abdeckung der Google Maps-Anwendung (https://maps.google.com/) überein. Die Liste der derzeit unterstützten Städte für Street View finden Sie auf derGoogle Maps-Website.

Ein Beispiel eines Street View-Bildes ist nachfolgend abgebildet.


Google Maps JavaScript API bietet einen Street View-Dienst zum Beziehen und Bearbeiten der in Google Maps Street View verwendeten Bilder. Dieser Street View-Dienst wird durch den Browser unterstützt.

Street View-Karten verwenden

Obwohl Street View in einem eigenständigen DOM-Element verwendet werden kann, liegt der größte Nutzen von Street View in der Angabe eines Standorts auf einer Karte. Standardmäßig ist Street View auf einer Karte aktiviert, und ein Pegman-Steuerelement für Street View ist in die Steuerelemente für die Navigation (Zoom und Schwenken) integriert. Sie können dieses Steuerelement in den MapOptions der Karte ausblenden, indem Sie streetViewControl auf false setzen. Außerdem können Sie die Standardposition des Street View-Steuerelements ändern, indem Sie die Eigenschaft streetViewControlOptions.position der Map auf eine neue ControlPosition setzen.

Das Pegman-Steuerelement für Street View ermöglicht Ihnen, Street View-Panoramaansichten direkt in der Karte anzuzeigen. Durch Klicken und Halten von Pegman wird die Karte aktualisiert und zeigt blaue Rahmenlinien um Street View-aktivierte Straßen, vergleichbar mit dem Erscheinungsbild der Google Maps-App.

Wenn der Benutzer den Pegman-Marker auf einer Straße positioniert, wird die Karte aktualisiert und zeigt ein Street View-Panorama des angegebenen Standorts.

Street View-Panoramen

Street View-Bilder werden durch Verwenden des Objektes StreetViewPanorama unterstützt. Über dieses Objekt wird eine API -Schnittstelle zu einem Street View-Anzeigeprogramm bereitgestellt. Jede Karte enthält ein Street View-Standardpanorama, das Sie durch Aufrufen der Kartenmethode getStreetView() abrufen können. Wenn Sie ein Street View-Steuerelement zur Karte hinzufügen, indem Sie die Option streetViewControl auf true setzen, verbinden Sie automatisch das Pegman-Steuerelement mit diesem Street View-Standardpanorama.

Sie können auch ein eigenes Objekt StreetViewPanorama erstellen und anstelle des Standardobjektes verwenden, indem Sie die Karteneigenschaft streetView explizit auf dieses konstruierte Objekt setzen. Bei Bedarf können Sie das Standardpanorama übersteuern, wenn Sie das Standardverhalten, z. B. das automatische Teilen von Überlagerungen zwischen Karte und Panorama, ändern möchten. (Siehe nachfolgenden Abschnitt Überlagerungen in Street View.)

Street View-Container

Bei Bedarf können Sie ein StreetViewPanorama stattdessen in einem eigenen DOM-Element anzeigen; häufig wird dazu ein Element <div> verwendet. Übergeben Sie das DOM-Element einfach innerhalb des Konstruktors von StreetViewPanorama. Für eine optimale Bilddarstellung empfehlen wir eine Größe von mindestens 200 x 200 Pixel.

Hinweis: Obwohl die Funktionen von Street View für die Verwendung in Verbindung mit einer Karte entwickelt wurden, ist eine Karte nicht zwingend erforderlich. Sie können auch eigenständige Street View-Objekte ohne Karte verwenden.

Street View-Standorte und Point-of-View (POV)

Mit dem Konstruktor StreetViewPanorama können Sie außerdem Standort und Point-of-View (subjektive Einstellung) mithilfe des Parameters StreetViewOptions einstellen. Sie können nach der Konstruktion setPosition() und setPov() für das Objekt aufrufen, um seinen Standort und seinen POV zu ändern.

Mit dem Street View-Standort ist die Position des Kamerafokus für ein Bild definiert, jedoch nicht die Ausrichtung der Kamera für dieses Bild. Zu diesem Zweck werden mit dem Objekt StreetViewPov zwei Eigenschaften definiert:

  • Mit heading (Standardwert 0) wird der Rotationswinkel um den geometrischen Kameraort in Grad relativ vom geografischen Norden aus definiert. Aufnahmerichtungen werden im Uhrzeigersinn gemessen (90 Grad sind der geografische Osten).
  • Mit pitch (Standardwert 0) wird die Abweichung „nach oben“ oder „nach unten“ vom Standardneigungswinkel der Kamera aus gemessen, der häufig (aber nicht immer) flach horizontal ist. (Ein Bild, das auf einem Berg aufgenommen wurde, wird vermutlich einen Neigungswinkel haben, der nicht horizontal ist.) Neigungswinkel werden mit positiven Werten nach oben gemessen (bis +90 Grad: senkrecht nach oben und im rechten Winkel zum Standardneigungswinkel) und mit negativen Werten nach unten (bis -90 Grad: senkrecht nach unten und im rechten Winkel zum Standardneigungswinkel).

Das Objekt StreetViewPov wird meist dazu verwendet, um den Point-of-View der Street View-Kamera zu bestimmen. Mit der Methode StreetViewPanorama.getPhotographerPov() können Sie auch den Point-of-View des Fotografen bestimmen – zumeist die Fahrtrichtung des Autos oder Trikes.

Der folgende Code zeigt eine Karte von Boston mit einer Anfangsansicht des Fenway-Parks. Indem Sie den Pegman auswählen und auf einen unterstützten Standort auf der Karte ziehen, ändern Sie das Street View-Panorama.

function initialize() {
  var fenway = {lat: 42.345573, lng: -71.098326};
  var map = new google.maps.Map(document.getElementById('map'), {
    center: fenway,
    zoom: 14
  });
  var panorama = new google.maps.StreetViewPanorama(
      document.getElementById('pano'), {
        position: fenway,
        pov: {
          heading: 34,
          pitch: 10
        }
      });
  map.setStreetView(panorama);
}
<div id="map"></div>
<div id="pano"></div>
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map, #pano {
  float: left;
  height: 100%;
  width: 45%;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize">
</script>
function initialize() {
  var fenway = {lat: 42.345573, lng: -71.098326};
  var map = new google.maps.Map(document.getElementById('map'), {
    center: fenway,
    zoom: 14
  });
  var panorama = new google.maps.StreetViewPanorama(
      document.getElementById('pano'), {
        position: fenway,
        pov: {
          heading: 34,
          pitch: 10
        }
      });
  map.setStreetView(panorama);
}

Beispiel anzeigen (streetview-simple.html).

Bewegungsverfolgung auf Mobilgeräten

Auf Geräten, die Geräteausrichtungsereignisse unterstützen, bietet die API Nutzern die Möglichkeit, den Point-of-View von Street View auf Grundlage der Gerätebewegung zu ändern. Nutzer können sich umschauen, indem sie ihre Geräte bewegen. Dies wird als Bewegungsverfolgung oder Verfolgung der Geräterotation bezeichnet.

Als App-Entwickler können Sie das Standardverhalten wie folgt ändern:

  • Bewegungsverfolgung aktivieren oder deaktivieren. Standardmäßig ist die Bewegungsverfolgung auf jedem Gerät, das sie unterstützt, aktiviert. Im folgenden Beispiel wird die Bewegungsverfolgung deaktiviert, das zugehörige Steuerelement bleibt jedoch sichtbar. (Der Nutzer kann die Bewegungsverfolgung durch Tippen auf das Steuerelement aktivieren.)
    var panorama = new google.maps.StreetViewPanorama(
        document.getElementById('pano'), {
          position: {lat: 37.869260, lng: -122.254811},
          pov: {heading: 165, pitch: 0},
          motionTracking: false
        });
    
  • Steuerelement für Bewegungsverfolgung ein- oder ausblenden. Standardmäßig wird das Steuerelement auf Geräten, die die Bewegungsverfolgung unterstützen, angezeigt. Der Nutzer kann die Bewegungsverfolgung durch Tippen auf das Steuerelement aktivieren oder deaktivieren. Unabhängig von dem Wert für motionTrackingControl wird das Steuerelement nicht angezeigt, wenn das Gerät die Bewegungsverfolgung nicht unterstützt.

    Im folgenden Beispiel werden sowohl die Bewegungsverfolgung als auch das zugehörige Steuerelement deaktiviert. In diesem Fall kann der Nutzer die Bewegungsverfolgung nicht aktivieren:

    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
        });
    
  • Standardposition des Steuerelements für Bewegungsverfolgung ändern. Standardmäßig wird das Steuerelement unten rechts im Panorama angezeigt (Position RIGHT_BOTTOM). Im folgenden Beispiel wird die Position des Steuerelements auf unten links gesetzt:
    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
          }
        });
    

Wenn Sie die Bewegungsverfolgung in Aktion sehen möchten, zeigen Sie das folgende Beispiel auf einem Mobilgerät an (oder einem anderen Gerät, das Geräteausrichtungsereignisse unterstützt):


Beispiel auf neuer Seite anzeigen (streetview-embed.html).

Überlagerungen in Street View

Das Standardobjekt StreetViewPanorama unterstützt die Anzeige von Kartenüberlagerungen. Überlagerungen werden generell auf „Straßenebene“ angezeigt und sind an den Positionen LatLng verankert. (Es werden Marker angezeigt, deren Enden z. B. an der horizontalen Fläche im Street View-Panorama verankert sind.)

Derzeit beschränken sich die von Street View-Panoramaansichten unterstützten Überlagerungen auf die Typen Marker, InfoWindow sowie benutzerdefinierte OverlayViews. Überlagerungen, die Sie auf einer Karte anzeigen, können in einem Street View-Panorama angezeigt werden, indem das Panorama das Objekt Map ersetzt. Rufen Sie dazu setMap() auf, und übergeben Sie anstelle einer Karte das Objekt StreetViewPanorama als Argument. Vergleichbar können Info-Fenster in einem Street View-Panorama geöffnet werden, indem Sie open() aufrufen, und StreetViewPanorama() anstelle einer Karte übergeben.

Außerdem werden beim Anlegen einer Karte mit einem Standardobjekt StreetViewPanorama jegliche in einer Karte erstellten Marker auch vom zur Karte gehörenden Street View-Panorama genutzt, sofern das Panorama angezeigt wird. Um das Street View-Standardpanorama abzurufen, rufen Sie getStreetView() auf dem Objekt Map auf. Hinweis: Wenn Sie die Karteneigenschaft streetView explizit auf ein selbst konstruiertes Objekt StreetViewPanorama setzen, übersteuern Sie das Standardpanorama und deaktivieren das automatische gemeinsame Nutzen der Überlagerungen.

Im nachfolgenden Beispiel sind Marker dargestellt, die auf verschiedene Standorte um Astor Place, New York City zeigen. Wechseln Sie zur Street View-Ansicht, um die Marker anzuzeigen, die inStreetViewPanorama dargestellt werden.

var panorama;

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

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

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

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

  var busMarker = new google.maps.Marker({
      position: {lat: 40.729559, lng: -73.990741},
      map: 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();
  panorama.setPosition(astorPlace);
  panorama.setPov(/** @type {google.maps.StreetViewPov} */({
    heading: 265,
    pitch: 0
  }));
}

function toggleStreetView() {
  var toggle = panorama.getVisible();
  if (toggle == false) {
    panorama.setVisible(true);
  } else {
    panorama.setVisible(false);
  }
}
<div id="floating-panel">
  <input type="button" value="Toggle Street View" onclick="toggleStreetView();"></input>
</div>
<div id="map"></div>
/* 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;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
var panorama;

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

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

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

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

  var busMarker = new google.maps.Marker({
      position: {lat: 40.729559, lng: -73.990741},
      map: 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();
  panorama.setPosition(astorPlace);
  panorama.setPov(/** @type {google.maps.StreetViewPov} */({
    heading: 265,
    pitch: 0
  }));
}

function toggleStreetView() {
  var toggle = panorama.getVisible();
  if (toggle == false) {
    panorama.setVisible(true);
  } else {
    panorama.setVisible(false);
  }
}

Beispiel anzeigen (streetview-simple.html).

Street View-Ereignisse

Wenn Sie in Street View navigieren oder die Street View-Ausrichtung bearbeiten, ist es ggf. wünschenswert, verschiedene Ereignisse zu überwachen, die auf Änderungen des Zustands von StreetViewPanorama hinweisen:

  • pano_changed wird bei jeder Änderung der individuellen Panorama-ID ausgelöst. Mit diesem Ereignis wird nicht garantiert, dass beliebige zugehörige Daten im Panorama (z. B. die Links) zum Zeitpunkt des Auslösens des Ereignisses ebenfalls geändert wurden; dieses Ereignis gibt lediglich an, dass eine Panorama-ID geändert wurde. Beachten Sie, dass die Panorama-ID (die Sie zum Verweisen auf dieses Panorama verwenden können) nur während der aktuellen Browsersitzung stabil ist.
  • position_changed wird bei jeder Änderungen der zugrundeliegenden Position (LatLng) des Panoramas ausgelöst. Das Drehen eines Panoramas löst dieses Ereignis nicht aus. Beachten Sie, dass Sie die zugrundeliegende Position eines Panoramas ändern können, ohne die zugehörige Panorama-ID zu ändern, da die API der Panoramaposition automatisch die nächstgelegene Panorama-ID zuweist.
  • pov_changed wird bei jeder Änderung von StreetViewPov von Street View ausgelöst. Beachten Sie, dass dieses Ereignis auch ausgelöst werden kann, ohne dass Position und Panorama-ID sich ändern.
  • links_changed wird bei jeder Änderung von Street View-Links ausgelöst. Beachten Sie, dass dieses Ereignis asynchron nach einer Änderung der Panorama-ID durch pano_changed ausgelöst werden kann.
  • visible_changed wird bei jeder Änderung der Sichtbarkeit von Street View ausgelöst. Beachten Sie, dass dieses Ereignis asynchron nach einer Änderung der Panorama-ID durch pano_changed ausgelöst werden kann.

Im nachfolgenden Code wird gezeigt, wie diese Ereignisse genutzt werden können, um Daten zum zugrundeliegenden StreetViewPanorama zu sammeln:

function initPano() {
  var 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', function() {
      var panoCell = document.getElementById('pano-cell');
      panoCell.innerHTML = panorama.getPano();
  });

  panorama.addListener('links_changed', function() {
      var linksTable = document.getElementById('links_table');
      while (linksTable.hasChildNodes()) {
        linksTable.removeChild(linksTable.lastChild);
      }
      var links = panorama.getLinks();
      for (var i in links) {
        var row = document.createElement('tr');
        linksTable.appendChild(row);
        var labelCell = document.createElement('td');
        labelCell.innerHTML = '<b>Link: ' + i + '</b>';
        var valueCell = document.createElement('td');
        valueCell.innerHTML = links[i].description;
        linksTable.appendChild(labelCell);
        linksTable.appendChild(valueCell);
      }
  });

  panorama.addListener('position_changed', function() {
      var positionCell = document.getElementById('position-cell');
      positionCell.firstChild.nodeValue = panorama.getPosition() + '';
  });

  panorama.addListener('pov_changed', function() {
      var headingCell = document.getElementById('heading-cell');
      var pitchCell = document.getElementById('pitch-cell');
      headingCell.firstChild.nodeValue = panorama.getPov().heading + '';
      pitchCell.firstChild.nodeValue = panorama.getPov().pitch + '';
  });
}
<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>
/* 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;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initPano">
</script>
function initPano() {
  var 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', function() {
      var panoCell = document.getElementById('pano-cell');
      panoCell.innerHTML = panorama.getPano();
  });

  panorama.addListener('links_changed', function() {
      var linksTable = document.getElementById('links_table');
      while (linksTable.hasChildNodes()) {
        linksTable.removeChild(linksTable.lastChild);
      }
      var links = panorama.getLinks();
      for (var i in links) {
        var row = document.createElement('tr');
        linksTable.appendChild(row);
        var labelCell = document.createElement('td');
        labelCell.innerHTML = '<b>Link: ' + i + '</b>';
        var valueCell = document.createElement('td');
        valueCell.innerHTML = links[i].description;
        linksTable.appendChild(labelCell);
        linksTable.appendChild(valueCell);
      }
  });

  panorama.addListener('position_changed', function() {
      var positionCell = document.getElementById('position-cell');
      positionCell.firstChild.nodeValue = panorama.getPosition() + '';
  });

  panorama.addListener('pov_changed', function() {
      var headingCell = document.getElementById('heading-cell');
      var pitchCell = document.getElementById('pitch-cell');
      headingCell.firstChild.nodeValue = panorama.getPov().heading + '';
      pitchCell.firstChild.nodeValue = panorama.getPov().pitch + '';
  });
}

Beispiel anzeigen (streetview-events.html).

Street View-Steuerelemente

Wenn Sie ein Objekt StreetViewPanorama aufrufen, werden standardmäßig verschiedene Steuerelemente im Panorama angezeigt. Sie können diese Steuerelemente aktivieren oder deaktivieren, indem Sie die entsprechenden Felder in den StreetViewPanoramaOptions auf true bzw. false setzen:

  • Mithilfe des Steuerelements panControl können Sie das Panorama drehen. Dieses Steuerelement wird standardmäßig als integriertes Kompass- und Schwenksteuerelement angezeigt. Sie können die Position des Steuerelements verändern, indem Sie PanControlOptions im Feld panControlOptions einstellen.
  • zoomControl bietet die Möglichkeit, Bildbereiche zu vergrößern. Dieses Steuerelement wird standardmäßig unten rechts in der Panoramaansicht angezeigt. Sie können die Position des Steuerelements verändern, indem Sie ZoomControlOptions im Feld zoomControlOptions einstellen.
  • Das Steuerelement addressControl ermöglicht eine Textüberlagerung zum Anzeigen der Adresse des jeweiligen Standorts. Außerdem kann der Standort über einen Link in Google Maps aufgerufen werden. Sie können das Erscheinungsbild des Steuerelements verändern, indem Sie StreetViewAddressControlOptions im Feld addressControlOptions einstellen.
  • Mit dem Steuerelement fullscreenControl können Sie Street View als Vollbild öffnen. Sie können das Erscheinungsbild des Steuerelements verändern, indem Sie FullscreenControlOptions im Feld fullscreenControlOptions einstellen.
  • Mit dem Steuerelement motionTrackingControl lässt sich die Bewegungsverfolgung auf Mobilgeräten aktivieren oder deaktivieren. Dieses Steuerelement wird nur auf Geräten angezeigt, die Geräteausrichtungsereignisse unterstützen. Standardmäßig wird das Steuerelement unten rechts im Panorama angezeigt. Sie können die Position des Steuerelements ändern, indem Sie MotionTrackingControlOptions angeben. Weitere Informationen finden Sie im Abschnitt zur Bewegungsverfolgung.
  • Mit dem Element linksControl werden Richtungspfeile auf dem Bild eingeblendet, um zu benachbarten Panoramaansichten zu wechseln.
  • Über ein Steuerelement „Close“ können Benutzer das Street View-Anzeigeprogramm schließen. Sie können des Steuerelements „Close“ aktivieren oder deaktivieren, indem Sie den Status von enableCloseButton auf true bzw. false setzen:

Im nachfolgenden Beispiel werden die in Street View angezeigten Steuerelemente verändert und die Links der Ansicht entfernt:

Dieses Beispiel im Vollbildmodus ansehen.

function initPano() {
  // Note: constructed panorama objects have visible: true
  // set by default.
  var 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
  });
}
<div id="map"></div>
/* 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;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initPano">
</script>
function initPano() {
  // Note: constructed panorama objects have visible: true
  // set by default.
  var 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
  });
}

Beispiel anzeigen (streetview-controls.html).

Street View-Daten direkt aufrufen

Es kann ggf. erwünscht sein, die Verfügbarkeit von Street View-Daten programmgesteuert zu ermitteln oder Informationen zu einzelnen Panoramen zurückzugeben, ohne eine Karte/ein Panorama direkt bearbeiten zu müssen. Verwenden Sie dazu das Objekt StreetViewService, das über eine Schnittstelle zu den Daten verfügt, die im Street View-Dienst von Google hinterlegt sind.

Street View-Dienstanforderungen

Der Zugriff auf den Street View-Dienst erfolgt asynchron, da dazu der Aufruf eines externen Servers durch Google Maps API erforderlich ist. Aus diesem Grund müssen Sie eine Callbackmethode übergeben, die bei Abschluss der Anforderung ausgeführt werden soll. Das Ereignis wird mit der Callbackmethode verarbeitet.

Sie können zwei Arten von Anforderungen an StreetViewService initiieren:

  • Anforderungen mit StreetViewPanoRequest – das Ergebnis sind Panoramadaten mit einer Referenz-ID, mit der das Panorama eindeutig identifiziert wird. Beachten Sie, dass diese Referenz-IDs nur für die Lebensdauer der Bilder dieses Panoramas stabil ist.
  • Anforderungen mit StreetViewLocationRequest – bei dieser Anforderung wird nach Panoramadaten für einen definierten Bereich gemäß dem übergebenen Wert für LatLng gesucht.

Street View-Dienstantworten

<Die Funktion getPanorama() erfordert eine Callbackfunktion, damit sie ausgeführt wird, nachdem sie ein Ergebnis vom Street View-Dienst erhalten hat. Die Callbackfunktion gibt einen Panoramadatensatz in einem Objekt StreetViewPanoramaData und einen Code StreetViewStatus zurück, in dem der Status der Anforderung angegeben ist (in dieser Reihenfolge).

Eine Objektspezifikation StreetViewPanoramaData enthält Metadaten zu einem Street View-Panorama mit folgender Form:

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

Beachten Sie, dass dieses Datenobjekt selbst kein Objekt StreetViewPanorama ist. Um ein Street View-Objekt anhand dieser Daten zu erstellen, müssten Sie ein StreetViewPanorama erstellen und setPano() aufrufen, wobei Sie die ID wie angegeben in das zurückgegebene Feld location.pano eingeben.

Mit dem Code status kann einer der folgenden Werte zurückgegeben werden:

  • OK bedeutet, dass mit dem Dienst ein passendes Panorama gefunden wurde.
  • ZERO_RESULTS bedeutet, dass mit dem Dienst kein passendes Panorama mit den übergebenen Kriterien gefunden wurde.
  • UNKNOWN_ERROR bedeutet, dass eine Street View-Anforderung nicht verarbeitet werden konnte, wobei die genaue Ursache nicht bekannt ist.

Mit dem folgenden Code wird ein StreetViewService erstellt, der auf Benutzerklicks auf die Karte reagiert, indem Marker angelegt werden, die ein StreetViewPanorama des jeweils angeklickten Standorts anzeigen. Der Code verwendet die Inhalte aus StreetViewPanoramaData, die vom Dienst zurückgegeben wurden.

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

var map;
var panorama;

function initMap() {
  var berkeley = {lat: 37.869085, lng: -122.254775};
  var 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}, processSVData);

  // Look for a nearby Street View panorama when the map is clicked.
  // getPanoramaByLocation will return the nearest pano when the
  // given radius is 50 meters or less.
  map.addListener('click', function(event) {
    sv.getPanorama({location: event.latLng, radius: 50}, processSVData);
  });
}

function processSVData(data, status) {
  if (status === 'OK') {
    var marker = new google.maps.Marker({
      position: data.location.latLng,
      map: map,
      title: data.location.description
    });

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

    marker.addListener('click', function() {
      var markerPanoID = data.location.pano;
      // Set the Pano to use the passed panoID.
      panorama.setPano(markerPanoID);
      panorama.setPov({
        heading: 270,
        pitch: 0
      });
      panorama.setVisible(true);
    });
  } else {
    console.error('Street View data not found for this location.');
  }
}
<div id="map" style="width: 45%; height: 100%;float:left"></div>
<div id="pano" style="width: 45%; height: 100%;float:left"></div>
/* 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;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
/*
 * Click the map to set a new location for the Street View camera.
 */

var map;
var panorama;

function initMap() {
  var berkeley = {lat: 37.869085, lng: -122.254775};
  var 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}, processSVData);

  // Look for a nearby Street View panorama when the map is clicked.
  // getPanoramaByLocation will return the nearest pano when the
  // given radius is 50 meters or less.
  map.addListener('click', function(event) {
    sv.getPanorama({location: event.latLng, radius: 50}, processSVData);
  });
}

function processSVData(data, status) {
  if (status === 'OK') {
    var marker = new google.maps.Marker({
      position: data.location.latLng,
      map: map,
      title: data.location.description
    });

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

    marker.addListener('click', function() {
      var markerPanoID = data.location.pano;
      // Set the Pano to use the passed panoID.
      panorama.setPano(markerPanoID);
      panorama.setPov({
        heading: 270,
        pitch: 0
      });
      panorama.setVisible(true);
    });
  } else {
    console.error('Street View data not found for this location.');
  }
}

Beispiel anzeigen (streetview-service.html).

Benutzerdefinierte Street View-Panoramaansichten bereitstellen

Die Anzeige von benutzerdefinierten Panoramen im Objekt StreetViewPanorama wird von Google Maps JavaScript API unterstützt. Mithilfe von benutzerdefinierten Panoramen können Sie das Innere von Gebäuden, Ansichten von Landschaften oder fast alles, was Sie sich vorstellen können, darstellen. Sie können diese benutzerdefinierten Panoramen sogar mit bestehenden Google Street View-Panoramen verknüpfen.

Zum Einrichten von benutzerdefinierten Panoramabildgruppen sind folgende Schritte erforderlich:

  • Legen Sie ein Basispanoramabild für jedes benutzerdefinierte Panorama an. Dieses Basisbild sollte die höchste Auflösung aufweisen, die für die maximale Vergrößerungsstufe der Bilder erforderlich ist.
  • (Optional, aber empfohlen) Erstellen Sie einen Satz Panoramakacheln in unterschiedlichen Vergrößerungsstufen vom Basisbild.
  • Erstellen Sie Verknüpfungen zwischen Ihren benutzerdefinierten Panoramabildern.
  • (Optional) Geben Sie „Einstiegspanoramen“ in den vorhandenen Bildern von Google Street an, und passen Sie diese Verknüpfungen vom benutzerdefinierten Bildmaterial zum Standardbildmaterial und umgekehrt an.
  • Definieren Sie Metadaten für jedes Panoramabild in einem Objekt StreetViewPanoramaData.
  • Implementieren Sie eine Methode, mit der die benutzerdefinierten Panoramadaten bestimmt werden, und legen Sie diese Methode als Ihren benutzerdefinierten Handler im Objekt StreetViewPanorama fest.

Dieser Prozess ist in den nachfolgenden Abschnitten erläutert.

Benutzerdefinierte Panoramaansichten erstellen

Jedes Street View-Panorama besteht aus einem oder mehreren Bildern, die eine 360-Grad-Ansicht eines einzelnen Ortes bilden. Für das Objekt StreetViewPanorama werden Bilder verwendet, die der Equirektangularprojektion (Plate Carrée) entsprechen. Diese Projektion bietet eine 360-Grad-Horizontalsicht (eine volle Drehung) und eine 180-Grad-Vertikalsicht (von senkrecht oben bis senkrecht unten). Diese Sichtfelder ergeben ein Bild mit einem Seitenverhältnis von 2:1. Ein vollständiges Rundum-Panorama ist nachfolgend dargestellt.

Panoramabilder werden in der Regel durch Aufnehmen mehrerer Fotos von einer Position aus erstellt, die dann mithilfe einer Panoramasoftware zusammengefügt werden. (Weitere Informationen finden Sie im Wikipedia-Artikel Comparison of photo stitching applications (Englisch).) Diese Bilder sollten einen gemeinsamen geometrischen Kameraort aufweisen, von dem aus alle Panoramabilder aufgenommen werden. Die daraus resultierende 360-Grad-Panoramaansicht kann dann eine Projektion auf einer Kugel definieren, über deren zweidimensionale Oberfläche das Bild gelegt wird.

Die Betrachtung des Panoramas als Projektion auf eine Kugel mit einem geradlinigen Koordinatensystem ist vorteilhaft, wenn Sie das Bild in geradlinige Kacheln unterteilen und Bilder verwenden, die auf berechneten Kachelkoordinaten basieren.

Benutzerdefinierte Panoramakacheln erstellen

Street View unterstützt außerdem verschiedene Bilddetailebenen mithilfe einer Zoomsteuerung, die das Vergrößern und Verkleinern ausgehend von der Standardsicht ermöglicht. Im Allgemeinen bietet Street View fünf Stufen der Zoomauflösung für jedes beliebige Panoramabild. Wenn Sie alle Vergrößerungsstufen durch ein einzelnes Panoramabild abdecken wollten, müsste dieses Bild entweder sehr groß sein und würde somit Ihre Anwendung erheblich verlangsamen, oder dieses Bild hätte bei höheren Vergrößerungsstufen eine so schwache Auflösung, dass Sie eine schlechte, „gepixelte“ Darstellung erhalten würden. Glücklicherweise können wir ein ähnliches Designmuster verwenden wie bei den Google-Kartenkacheln bei verschiedenen Vergrößerungsstufen, um Bilder mit einer angemessenen Auflösung für Panoramaansichten in jeder Vergrößerungsstufe bereitzustellen.

Beim ersten Laden eines StreetViewPanorama wird standardmäßig ein Bild angezeigt, das 25 % (ein Bogen von 90 Grad) der horizontalen Breite des Panoramas bei Vergrößerungsstufe 1 ausmacht. Diese Ansicht entspricht in etwa dem normalen menschlichen Sichtfeld. Das Verkleinern von der Standardansicht führt im Wesentlichen zu einem breiteren Bogen, während das Vergrößern das Sichtfeld zu einem kleineren Bogen verjüngt. Mit dem Objekt StreetViewPanorama wird das geeignete Sichtfeld für die ausgewählte Vergrößerungsstufe automatisch berechnet. Anschließend werden dann die für diese Auflösung am besten geeigneten Bilder durch Auswählen eines Kachelsatzes, der in etwa den Maßen des horizontalen Sichtfelds entspricht, bestimmt. Nachfolgend sind die Sichtfelder mit Zuordnung zu entsprechenden Street View-Vergrößerungsstufe aufgeführt:

Street View-Vergrößerungsstufe Sichtfeld (Grad)
0 180
1 (Standardwert) 90
2 45
3 22,5
4 11,25

Beachten Sie, dass die Größe der in Street View dargestellten Bilder vollständig von der Bildschirmgröße (-breite) des Street View-Containers abhängig ist. Wenn Sie einen breiteren Container bereitstellen, liefert der Dienst weiterhin dasselbe Sichtfeld für die einzelnen Vergrößerungsstufen, wobei die ausgewählten Kacheln ggf. besser für die jeweilige Auflösung geeignet sind.

Da jedes Panorama aus einer Equirektangularprojektion besteht, ist das Erstellen von Panoramakacheln nicht sehr kompliziert. Da die Projektion ein Seitenverhältnis von 2:1 liefert, lassen sich Kacheln mit einem Seitenverhältnis von 2:1 besser verwenden, während quadratische Kacheln sich besser für quadratische Karten eignen (da das Sichtfeld in diesem Fall quadratisch ist).

Bei 2:1-Kacheln stellt ein einzelnes Bild, das bei Vergrößerungsstufe 0 das gesamte Panorama abdeckt, die gesamte „Panoramawelt“ (das Basisbild) bei Vergrößerungsstufe 0 dar. Mit jeder Erhöhung der Vergrößerungsstufe zoomLevel vervierfachen sich die Kacheln. (Bei Vergrößerungsstufe 2 besteht das Panorama beispielsweise aus 16 Kacheln.) Hinweis: Die Vergrößerungsstufen der Street View-Kacheln entsprechen nicht direkt den Vergrößerungsstufen, die durch das Street-Steuerelement bereitgestellt werden; stattdessen wird mit dem Street View-Steuerelement ein Sichtfeld ausgewählt, aus dem dann die entsprechenden Kacheln gewählt werden.

Im Allgemeinen sollten Sie Ihre Bildkacheln so benennen, dass sie programmgesteuert ausgewählt werden können. Ein geeignetes Benennungsschema wird im nachfolgenden Abschnitt Benutzerdefinierte Panoramaanforderungen benennen erläutert.

Benutzerdefinierte Panoramaanforderungen benennen

Die Verwendung von benutzerdefinierten Panoramen wird durch das Registrieren einer benutzerdefinierten Panoramamethode in StreetViewPanoramaOptions im Feld panoProvider oder durch den expliziten Aufruf von StreetViewPanorama.registerPanoProvider() angegeben. Die Panoramaprovider-Methode ist eine Funktion, bei der das Objekt StreetViewPanoramaData zurückgegeben wird und die über folgende Signatur verfügt:

Function(pano,zoom,tileX,tileY):StreetViewPanoramaData

Das Objekt StreetViewPanoramaData weist die folgende Form auf:

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

Sie können ein benutzerdefiniertes Panorama anzeigen, indem Sie ganz einfach die StreetViewPanorama-Eigenschaft pano auf einen benutzerdefinierten Wert setzen, panoProvider definieren und dann einen benutzerdefinierten Wert pano in der benutzerdefinierten Panoramaprovider-Methode verarbeiten, mit der dann das Objekt StreetViewPanoramaData konstruiert und zurückgegeben wird.

Hinweis: Legen Sie im Objekt StreetViewPanorama keinen Wert für position direkt fest, wenn Sie benutzerdefinierte Panoramen anzeigen möchten, da mit diesem Wert für den Street View-Dienst vorgegeben würde, die Street View-Standardbilder nahe dieses Standortes anzufordern. Definieren Sie diese Position stattdessen im Feld location.latLng des benutzerdefinierten Objekts StreetViewPanoramaData.

Im nachfolgenden Beispiel ist ein benutzerdefiniertes Panorama des Google-Standorts in Sydney dargestellt. Beachten Sie, dass wir in diesem Fall keinerlei Karten (oder Street View-Standardbilder) verwenden.

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.
  var panorama = new google.maps.StreetViewPanorama(
    document.getElementById('map'), {
      pano: 'reception',
      visible: true,
      panoProvider: getCustomPanorama
  });
}

// Return a pano image given the panoID.
function getCustomPanoramaTileUrl(pano, zoom, tileX, tileY) {
  // Note: robust custom panorama methods would require tiled pano data.
  // Here we're just using a single tile, set to the tile size and equal
  // to the pano "world" size.
  return 'https://developers.google.com/maps/documentation/javascript/examples/full/images/panoReception1024-0.jpg';
}

// Construct the appropriate StreetViewPanoramaData given
// the passed pano IDs.
function getCustomPanorama(pano, zoom, tileX, tileY) {
  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(1024, 512),
        // The heading in degrees at the origin of the panorama
        // tile set.
        centerHeading: 105,
        getTileUrl: getCustomPanoramaTileUrl
      }
    };
  }
}
<div id="map"></div>
/* 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;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initPano">
</script>
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.
  var panorama = new google.maps.StreetViewPanorama(
    document.getElementById('map'), {
      pano: 'reception',
      visible: true,
      panoProvider: getCustomPanorama
  });
}

// Return a pano image given the panoID.
function getCustomPanoramaTileUrl(pano, zoom, tileX, tileY) {
  // Note: robust custom panorama methods would require tiled pano data.
  // Here we're just using a single tile, set to the tile size and equal
  // to the pano "world" size.
  return 'https://developers.google.com/maps/documentation/javascript/examples/full/images/panoReception1024-0.jpg';
}

// Construct the appropriate StreetViewPanoramaData given
// the passed pano IDs.
function getCustomPanorama(pano, zoom, tileX, tileY) {
  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(1024, 512),
        // The heading in degrees at the origin of the panorama
        // tile set.
        centerHeading: 105,
        getTileUrl: getCustomPanoramaTileUrl
      }
    };
  }
}

Beispiel anzeigen (streetview-custom-simple.html).

Beachten Sie, dass wir im vorangehenden Beispiel nur ein Bild zurückgegeben haben, so dass das Vergrößern dieses Bildes zu einer schwachen Auflösung führt. Stattdessen könnten wir einen Kachelsatz bereitstellen, indem wir Kachelbilder erstellen und die Methode panoProvider bearbeiten, damit die entsprechende Kachel mit der übergebenen Panorama-ID und den Koordinaten der Panoramakachel zurückgegeben wird.

Da die Bildauswahl von diesen übergebenen Werten abhängt, sollten diese Bilder so benannt werden, dass sie programmgesteuert gemäß den übergebenen Werten, z. B. pano_zoom_tileX_tileY.png, ausgewählt werden können.

Das nachfolgende Beispiel ist leicht augmentiert und umfasst zwei Vergrößerungsstufen. Außerdem wurde zusätzlich zu den Standardnavigationspfeilen von Street View ein weiterer Pfeil zum Bild hinzugefügt, der auf Google Sydney zeigt und auf die benutzerdefinierten Bilder verweist:

var panorama;

// StreetViewPanoramaData of a panorama just outside the Google Sydney office.
var 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 our custom panorama.
        panoProvider: function(pano) {
          if (pano === 'reception') {
            return getReceptionPanoramaData();
          }
        }
      });

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

function initialize() {
  // Use the Street View service to find a pano ID on Pirrama Rd, outside the
  // Google office.
  var streetviewService = new google.maps.StreetViewService;
  streetviewService.getPanorama(
      {location: {lat: -33.867386, lng: 151.195767}},
      function(result, status) {
        if (status === 'OK') {
          outsideGoogle = result;
          initPanorama();
        }
      });
}
<div id="street-view"></div>
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#street-view {
  height: 100%;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize">
</script>
var panorama;

// StreetViewPanoramaData of a panorama just outside the Google Sydney office.
var 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 our custom panorama.
        panoProvider: function(pano) {
          if (pano === 'reception') {
            return getReceptionPanoramaData();
          }
        }
      });

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

function initialize() {
  // Use the Street View service to find a pano ID on Pirrama Rd, outside the
  // Google office.
  var streetviewService = new google.maps.StreetViewService;
  streetviewService.getPanorama(
      {location: {lat: -33.867386, lng: 151.195767}},
      function(result, status) {
        if (status === 'OK') {
          outsideGoogle = result;
          initPanorama();
        }
      });
}

Beispiel anzeigen (streetview-custom-tiles.html).

Feedback geben zu...

Google Maps JavaScript API
Google Maps JavaScript API