Street View Hizmeti

Genel bakış

Google Street View, kapsama alanı boyunca belirtilen yollardan 360 derece panoramik görüntüler sağlar. Street View'ın API kapsamı, Google Haritalar uygulamasının (https://maps.google.com/) API kapsamıyla aynıdır. Şu anda Street View için desteklenen şehirlerin listesi Google Haritalar web sitesinde mevcuttur.

Aşağıda örnek bir Street View görüntüsü gösterilmiştir.

Maps JavaScript API, Google Haritalar Street View'da kullanılan görüntülerin elde edilmesi ve değiştirilmesi için bir Street View hizmeti sunar. Bu Street View hizmeti, tarayıcıda yerel olarak desteklenir.

Street View Harita Kullanımı

Street View, bağımsız bir DOM öğesi içinde kullanılabilse de, harita üzerinde bir konum belirtilirken en yararlıdır. Varsayılan olarak, haritalarda Street View etkinleştirilir ve gezinme (yakınlaştırma ve kaydırma) kontrollerine entegre bir Street View Pegman denetimi görünür. streetViewControl değerini false olarak ayarlayarak bu denetimi haritanın MapOptions içinde gizleyebilirsiniz. Ayrıca, Map öğesinin streetViewControlOptions.position özelliğini yeni bir ControlPosition olarak ayarlayarak Street View kontrolünün varsayılan konumunu değiştirebilirsiniz.

Street View Pegman denetimi, Street View panoramalarını doğrudan harita üzerinde görüntülemenizi sağlar. Kullanıcı Pegman'i tıklayıp basılı tuttuğunda, harita güncellenerek Street View'ın etkin olduğu sokakların etrafındaki mavi dış çizgilerle gösterilir ve Google Haritalar uygulamasına benzer bir kullanıcı deneyimi sunar.

Kullanıcı Pegman işaretçisini sokağa bıraktığında harita güncellenir ve belirtilen konumun Street View panoramasını görüntüler.

Street View Panoramaları

Street View görüntüleri, Street View "izleyicisi"ne bir API arayüzü sağlayan StreetViewPanorama nesnesinin kullanımı ile desteklenir. Her haritada varsayılan bir Street View panoraması bulunur. Bu panoramayı, haritanın getStreetView() yöntemini kullanarak alabilirsiniz. streetViewControl seçeneğini true olarak ayarlayarak haritaya bir Street View denetimi eklediğinizde, Pegman kontrolü bu varsayılan Street View panoramasına otomatik olarak bağlanır.

Ayrıca kendi StreetViewPanorama nesnenizi oluşturabilir ve haritanın streetView özelliğini oluşturulan nesneye açıkça ayarlayarak haritayı varsayılan yerine bu nesneye ayarlayabilirsiniz. Harita ve panorama arasında bindirmelerin otomatik olarak paylaşılması gibi varsayılan davranışı değiştirmek istiyorsanız varsayılan panoramayı geçersiz kılabilirsiniz. (Aşağıdaki Street View içindeki bindirmeler konusuna bakın.)

Street View Kapsayıcıları

Bunun yerine, ayrı bir DOM öğesi içinde (genellikle bir <div> öğesi) bir StreetViewPanorama görüntülemek isteyebilirsiniz. DOM öğesini StreetViewPanorama oluşturucusu içinde iletmeniz yeterlidir. Resimlerin optimum şekilde görüntülenmesi için en az 200 piksele 200 piksellik bir boyut öneririz.

Not: Street View işlevi bir haritayla birlikte kullanılmak üzere tasarlanmış olsa da bu kullanım gerekli değildir. Harita olmadan bağımsız bir Street View nesnesi kullanabilirsiniz.

Street View konumları ve bakış açısı (bakış açısı)

StreetViewPanorama oluşturucu, StreetViewOptions parametresini kullanarak Street View konumunu ve bakış açısını ayarlamanıza da olanak tanır. İnşaattan sonra nesnenin konumunu ve bakış açısını değiştirmek için setPosition() ve setPov() öğelerini çağırabilirsiniz.

Street View konumu, bir resim için kamera odağının yerleşimini tanımlar ancak söz konusu görüntü için kameranın yönünü tanımlamaz. Bu amaçla StreetViewPov nesnesi iki özelliği tanımlar:

• heading (varsayılan 0), kamera yerinin çevresindeki dönüş açısını gerçek kuzeye göre derece cinsinden tanımlar. Yönler saat yönünde ölçülür (90 derece, doğu yönündedir).
• pitch (varsayılan 0), kameranın genellikle (ancak her zaman değil) düz yatay olan ilk varsayılan perdesinden "yukarı" veya "aşağı" açı varyansını tanımlar. (Örneğin, bir tepede çekilen resim, muhtemelen yatay olmayan bir varsayılan perde sergiler.) Atış açıları yukarı bakan pozitif değerlerle (varsayılan perdeye en fazla +90 derece, dikey olarak ise aşağıya) ve negatif değerlerle (-90 derece aşağı doğru ve varsayılan perdeye dikey) ölçülür.

StreetViewPov nesnesi, genellikle Street View kamerasının bakış açısını belirlemek için kullanılır. StreetViewPanorama.getPhotographerPov() yöntemiyle ayrıca fotoğrafçının bakış açısını (genellikle arabanın veya üç tekerleğin baktığı yön) de belirleyebilirsiniz.

Aşağıdaki kodda, Fenway Park'ın ilk görünümüyle Boston haritası görüntülenmektedir. Pegman'i seçip haritada desteklenen bir konuma sürüklediğinizde Street View panoraması değişir:

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

  map.setStreetView(panorama);
}

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

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

  map.setStreetView(panorama);
}

window.initialize = initialize;
index.js

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

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

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

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

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initialize&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

Mobil cihazlarda hareket izleme

API, cihaz yönü etkinliklerini destekleyen cihazlarda, kullanıcılara cihazın hareketine göre Street View bakış açısını değiştirme olanağı sunar. Kullanıcılar cihazlarını hareket ettirerek etrafa bakabilir. Buna hareket izleme veya cihaz döndürme takibi denir.

Uygulama geliştirici olarak varsayılan davranışı aşağıdaki gibi değiştirebilirsiniz:

• Hareket izleme işlevini etkinleştirin veya devre dışı bırakın. Varsayılan olarak hareket izleme, destekleyen tüm cihazlarda etkinleştirilir. Aşağıdaki örnek, hareket izlemeyi devre dışı bırakır ancak hareket izleme kontrolünü görünür durumda bırakır. (Kullanıcının kontrole dokunarak hareket izlemeyi açabileceğini unutmayın.)

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

• Hareket izleme kontrolünü gizleyin veya gösterin. Varsayılan olarak kontrol, hareket izlemeyi destekleyen cihazlarda gösterilir. Kullanıcı, hareket izlemeyi açmak veya kapatmak için kontrol düğmesine dokunabilir. Cihaz, hareket izlemeyi desteklemiyorsa motionTrackingControl değerinden bağımsız olarak kontrolün hiçbir zaman görünmeyeceğini unutmayın.

  Aşağıdaki örnek hem hareket izlemeyi hem de hareket izleme kontrolünü devre dışı bırakır. Bu durumda, kullanıcı hareket izlemeyi açamaz:

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

• Hareket izleme kontrolünün varsayılan konumunu değiştirin. Varsayılan olarak denetim, panoramanın sağ alt köşesine yakın bir yerde (RIGHT_BOTTOM konumu) görünür. Aşağıdaki örnekte, denetimin konumu sol altta olacak şekilde ayarlanmaktadır:

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

Hareket izlemeyi uygulamalı olarak görmek için aşağıdaki örneği bir mobil cihazda (veya cihaz yönü etkinliklerini destekleyen herhangi bir cihazda) görüntüleyin:

Örneği inceleyin

Street View içindeki bindirmeler

Varsayılan StreetViewPanorama nesnesi, harita yer paylaşımlarının yerel görünümünü destekler. Bindirmeler genellikle LatLng konumlarına sabitlenmiş şekilde "sokak düzeyinde" görünür. (Örneğin, Street View panoramasında işaretçiler, kuyrukları konumun yatay düzleminde sabitlenmiş bir şekilde görünür.)

Şu anda Street View panoramalarında desteklenen yer paylaşımı türleri Marker, InfoWindow ve özel OverlayView ile sınırlıdır. Haritada görüntülediğiniz bindirmeler, panoramayı Map nesnesinin yerine kullanarak, setMap() çağrısı yaparak ve StreetViewPanorama öğesini harita yerine bağımsız değişken olarak ileterek Street View panoramasında görüntülenebilir. Bilgi pencereleri, benzer şekilde Street View panoramasında open() numarası aranarak ve harita yerine StreetViewPanorama() üzerinden açılarak açılabilir.

Ayrıca, varsayılan StreetViewPanorama içeren harita oluştururken, bir haritada oluşturulan tüm işaretçiler, panoramanın görünür olması koşuluyla otomatik olarak haritanın ilişkili Street View panoramasıyla paylaşılır. Varsayılan Street View panoramasını almak için Map nesnesinde getStreetView() yöntemini çağırın. Haritanın streetView özelliğini açıkça kendi yapınızda StreetViewPanorama olarak ayarlarsanız varsayılan panoramayı geçersiz kılacağınızı unutmayın.

Aşağıdaki örnekte, Astor Place, New York City çevresindeki çeşitli konumları belirten işaretçiler gösterilmektedir. StreetViewPanorama içinde gösterilen paylaşılan işaretçilerin gösterilmesi için ekranı Street View'a geçirin.

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

  const cafeIcon = document.createElement("img");
  cafeIcon.src = "https://developers.google.com/maps/documentation/javascript/examples/full/images/cafe_icon.svg";

  const dollarIcon = document.createElement("img");
  dollarIcon.src = "https://developers.google.com/maps/documentation/javascript/examples/full/images/bank_icon.svg";

  const busIcon = document.createElement("img");
  busIcon.src = "https://developers.google.com/maps/documentation/javascript/examples/full/images/bus_icon.svg";


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

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

  const busMarker = new google.maps.Marker({
    position: { lat: 40.729559, lng: -73.990741 },
    map,
    title: "Bus Stop",
    icon: busIcon.src,
  });

  // We get the map's default panorama and set up some defaults.
  // Note that we don't yet set it visible.
  panorama = 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);

  const cafeIcon = document.createElement("img");

  cafeIcon.src =
    "https://developers.google.com/maps/documentation/javascript/examples/full/images/cafe_icon.svg";

  const dollarIcon = document.createElement("img");

  dollarIcon.src =
    "https://developers.google.com/maps/documentation/javascript/examples/full/images/bank_icon.svg";

  const busIcon = document.createElement("img");

  busIcon.src =
    "https://developers.google.com/maps/documentation/javascript/examples/full/images/bus_icon.svg";

  // Set up the markers on the map
  const cafeMarker = new google.maps.Marker({
    position: { lat: 40.730031, lng: -73.991428 },
    map,
    title: "Cafe",
    icon: cafeIcon.src,
  });
  const bankMarker = new google.maps.Marker({
    position: { lat: 40.729681, lng: -73.991138 },
    map,
    title: "Bank",
    icon: dollarIcon.src,
  });
  const busMarker = new google.maps.Marker({
    position: { lat: 40.729559, lng: -73.990741 },
    map,
    title: "Bus Stop",
    icon: busIcon.src,
  });

  // We get the map's default panorama and set up some defaults.
  // Note that we don't yet set it visible.
  panorama = 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>

    <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 script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=marker&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

Street View Etkinlikleri

Street View arasında gezinirken veya Street View yönünü değiştirirken StreetViewPanorama durumunda değişiklikler olduğunu gösteren çeşitli etkinlikleri izlemek isteyebilirsiniz:

• Bağımsız pano kimliği her değiştiğinde pano_changed tetiklenir. Bu etkinlik, etkinliğin tetiklenmesi sırasında panoramadaki ilişkili verilerin (örneğin bağlantılar) da değiştiğini garanti etmez. Bu etkinlik yalnızca pano kimliğinin değiştiğini gösterir. Pano kimliğinin (bu panoramaya referans vermek için kullanabileceğiniz) yalnızca mevcut tarayıcı oturumunda sabit olduğunu unutmayın.
• Panoramanın temel (LatLng) konumu değiştiğinde position_changed tetiklenir. Panoramanın döndürülmesi bu etkinliği tetiklemez. API en yakın pano kimliğini panoramanın konumuyla otomatik olarak ilişkilendireceğinden, ilgili pano kimliğini değiştirmeden panoramanın temel konumunu değiştirebilirsiniz.
• Street View'ın StreetViewPov özelliği her değiştiğinde pov_changed tetiklenir. Konum ve pano kimliği sabit kalırken bu etkinliğin tetiklenebileceğini unutmayın.
• Street View'ın bağlantıları her değiştiğinde links_changed tetiklenir. Bu etkinliğin, pano_changed aracılığıyla belirtilen pano kimliğindeki bir değişiklikten sonra eşzamansız olarak tetiklenebileceğini unutmayın.
• Street View'ın görünürlüğü her değiştiğinde visible_changed tetiklenir. Bu etkinliğin, pano_changed aracılığıyla belirtilen pano kimliğindeki bir değişiklikten sonra eşzamansız olarak tetiklenebileceğini unutmayın.

Aşağıdaki kod, temel StreetViewPanorama hakkında veri toplamak için bu etkinliklerin nasıl işlenebileceğini göstermektedir:

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

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

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

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

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

    const links = panorama.getLinks();

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

      linksTable.appendChild(row);

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

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

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

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

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

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

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

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

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

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

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

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

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

    const links = panorama.getLinks();

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

      linksTable.appendChild(row);

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

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

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

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

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

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

window.initPano = initPano;
index.js

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

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

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

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

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

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

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

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initPano&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

Street View Denetimleri

Bir StreetViewPanorama görüntülenirken panoramada varsayılan olarak çeşitli denetimler görünür. Bu denetimleri, StreetViewPanoramaOptions içindeki uygun alanları true veya false olarak ayarlayarak etkinleştirebilir veya devre dışı bırakabilirsiniz:

• panControl, panoramayı döndürmek için bir yöntem sunar. Bu kontrol, varsayılan olarak standart entegre pusula ve kaydırma kontrolü olarak görünür. panControlOptions alanında PanControlOptions sağlayarak kontrolün konumunu değiştirebilirsiniz.
• zoomControl, resmi yakınlaştırmak için bir yol sağlar. Bu denetim, varsayılan olarak panoramanın sağ alt kısmına yakın bir yerde görünür. zoomControlOptions alanında ZoomControlOptions sağlayarak kontrolün görünümünü değiştirebilirsiniz.
• addressControl, ilişkilendirilen konumun adresini gösteren metinsel bir yer paylaşımı ve konumu Google Haritalar'da açmak için bir bağlantı sunar. addressControlOptions alanında StreetViewAddressControlOptions sağlayarak kontrolün görünümünü değiştirebilirsiniz.
• fullscreenControl, Street View'ı tam ekran modunda açma seçeneği sunar. fullscreenControlOptions alanında FullscreenControlOptions sağlayarak kontrolün görünümünü değiştirebilirsiniz.
• motionTrackingControl, mobil cihazlarda hareket izlemeyi etkinleştirme veya devre dışı bırakma seçeneği sunar. Bu kontrol yalnızca cihaz yönü etkinliklerini destekleyen cihazlarda görünür. Varsayılan olarak denetim, panoramanın sağ alt kısmına yakın bir yerde görünür. MotionTrackingControlOptions sağlayarak kontrolün konumunu değiştirebilirsiniz. Daha fazla bilgi için hareket izleme bölümüne bakın.
• linksControl, bitişik panorama resimlerine gitmek için resim üzerinde kılavuz oklar sağlar.
• Kapat denetimi, kullanıcının Street View görüntüleyicisini kapatmasına olanak tanır. enableCloseButton öğesini true veya false olarak ayarlayarak Kapat denetimini etkinleştirebilir veya devre dışı bırakabilirsiniz.

Aşağıdaki örnekte, ilişkili Street View içinde görüntülenen denetimler değiştirilir ve görünümün bağlantıları kaldırılır:

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

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

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

window.initPano = initPano;
index.js

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

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

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

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

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initPano&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

Street View Verilerine Doğrudan Erişme

Street View verilerinin kullanılabilirliğini programatik olarak belirlemek veya bir haritanın/panoramanın doğrudan değiştirilmesine gerek kalmadan belirli panoramalar hakkında bilgi döndürmek isteyebilirsiniz. Bu işlemi, Google'ın Street View hizmetinde depolanan verilere arayüz sağlayan StreetViewService nesnesini kullanarak yapabilirsiniz.

Street View Hizmet İstekleri

Google Haritalar API'sinin harici bir sunucuya çağrı yapması gerektiğinden, Street View hizmetine erişim eşzamansız olarak yapılır. Bu nedenle, istek tamamlandıktan sonra yürütmek için callback (geri çağırma) yöntemi iletmeniz gerekir. Bu geri çağırma yöntemi, sonucu işler.

StreetViewPanoRequest veya StreetViewLocationRequest kullanarak StreetViewService için istek başlatabilirsiniz.

StreetViewPanoRequest kullanan bir istek, panoramayı benzersiz şekilde tanımlayan bir referans kimliği verilen panorama verilerini döndürür. Bu referans kimliklerinin yalnızca söz konusu panoramaya ait görüntülerin ömrü boyunca sabit olduğunu unutmayın.

StreetViewLocationRequest kullanan bir istek, aşağıdaki parametreleri kullanarak belirli bir konumdaki panorama verilerini arar:

• location, panoramanın aranacağı konumu (enlem ve boylam) belirtir.
• preference, yarıçap içinde hangi panoramanın bulunacağına dair bir tercih belirler: sağlanan konuma en yakın olan veya yarıçap içindeki en iyi panorama.
• radius, belirtilen enlem ve boylama göre ortalanmış bir yarıçap belirler. Panorama aranırken, metre cinsinden belirtilir. Sağlanmazsa varsayılan olarak 50 değerine ayarlanır.
• source, aranacak panoramaların kaynağını belirtir. Geçerli değerler şunlardır:
  • default, Street View için varsayılan kaynakları kullanır. Aramalar belirli kaynaklarla sınırlı değildir.
  • outdoor, aramaları açık hava koleksiyonlarıyla sınırlandırır. Belirtilen konum için dış mekan panoramalarının mevcut olmayabileceğini unutmayın.

Street View Hizmet Yanıtları

Street View hizmetinden bir sonuç alındıktan sonra getPanorama() işlevinin yürütülmesi için bir callback işlevine ihtiyacı var. Bu geri çağırma işlevi, StreetViewPanoramaData nesnesinin içinde bir panorama verisi kümesi ve isteğin durumunu belirten bir StreetViewStatus kodu (bu sırayla) döndürür.

StreetViewPanoramaData nesne spesifikasyonu, aşağıdaki biçimde bir Street View panoramasıyla ilgili meta verileri içerir:

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

Bu veri nesnesinin kendisi bir StreetViewPanorama nesnesi olmadığını unutmayın. Bu verileri kullanarak Street View nesnesi oluşturmak için bir StreetViewPanorama oluşturmanız ve döndürülen location.pano alanında belirtilen kimliği ileterek setPano() yöntemini çağırmanız gerekir.

status kodu, aşağıdaki değerlerden birini döndürebilir:

• OK, hizmetin eşleşen bir panorama bulduğunu gösterir.
• ZERO_RESULTS, hizmetin iletilen ölçütlerle eşleşen bir panorama bulamadığını gösterir.
• UNKNOWN_ERROR, Street View isteğinin işlenemediğini belirtir ancak bunun tam nedeni bilinmemektedir.

Aşağıdaki kod, tıklandığında ilgili konumun StreetViewPanorama bilgisini görüntüleyen işaretçiler oluşturarak harita üzerindeki kullanıcı tıklamalarına yanıt veren bir StreetViewService oluşturur. Kod, hizmetten döndürülen StreetViewPanoramaData içeriğini kullanır.

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

let map: google.maps.Map;

let panorama: google.maps.StreetViewPanorama;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

window.initMap = initMap;
index.js

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

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

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

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

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

Özel Street View Panoramaları Sağlama

Maps JavaScript API, özel panoramaların StreetViewPanorama nesnesi içinde görüntülenmesini destekler. Özel panoramalar kullanarak binaların içini, güzel manzaralı yerlerin görüntülerini veya hayalinizdeki her şeyi görüntüleyebilirsiniz. Hatta bu özel panoramaları Google'ın mevcut Street View panoramalarına bile bağlayabilirsiniz.

Bir dizi özel panorama görüntüsü oluşturmak için şu adımları uygulayın:

• Her özel panorama için bir temel panoramik resim oluşturun. Bu temel resim, yakınlaştırılmış görüntüleri sunmak istediğiniz en yüksek çözünürlüklü resim olmalıdır.
• (İsteğe bağlı, ancak önerilir) Temel resimden farklı yakınlaştırma düzeylerinde bir dizi panoramik karo oluşturun.
• Özel panoramalarınız arasında bağlantılar oluşturun.
• (İsteğe bağlı) Google'ın mevcut Street View görüntülerinde"giriş" panoramalarını belirleyin ve özel gruba giden/standart kümeden gelen bağlantıları özelleştirin.
• StreetViewPanoramaData nesnesindeki her panorama resmi için meta veri tanımlayın.
• Özel panorama verilerini ve görüntülerini belirleyen bir yöntem uygulayın ve bu yöntemi StreetViewPanorama nesnesi içinde özel işleyiciniz olarak belirleyin.

Aşağıdaki bölümlerde bu işlem açıklanmaktadır.

Özel Panoramalar Oluşturma

Her Street View panoraması, tek bir konumdan tam 360 derece görünüm sağlayan bir resim veya resim kümesidir. StreetViewPanorama nesnesi, eşdikdörtgen (Plate Carrée) projeksiyonuna uygun görüntüler kullanır. Bu tür bir projeksiyon, 360 derece yatay görünüm (tam sarma) ve 180 derece dikey görünüm (düzden dümdüz aşağıya) içerir. Bu görünüm alanları 2:1 en boy oranına sahip bir resim oluşturur. Aşağıda tam bir panoramik panorama gösterilmektedir.

Panorama görüntüleri genellikle bir konumdan birden fazla fotoğraf çekilip panorama yazılımı kullanılarak birleştirilerek elde edilir. (Daha fazla bilgi için Wikipedia'nın fotoğraf birleştirme uygulamalarının karşılaştırması konusuna bakın.) Bu tür resimler, panorama resimlerinin her birinin alındığı tek bir "kamera" konumunu paylaşmalıdır. Böylece, elde edilen 360 derecelik panorama, görüntünün iki boyutlu yüzeyine sarmalanmış olmasıyla küre üzerinde bir projeksiyon tanımlayabilir.

Panoramayı doğrusal koordinat sistemine sahip bir küre üzerinde projeksiyon olarak ele almak, resmi doğrusal karolara bölerken ve hesaplanan karo koordinatlarına göre görüntüler sunarken avantaj sağlar.

Özel Panorama Karoları Oluşturma

Street View ayrıca, varsayılan görünümde yakınlaştırma ve uzaklaştırma yapmanıza olanak tanıyan yakınlaştırma denetimi aracılığıyla farklı düzeylerde görüntü ayrıntısını destekler. Street View, herhangi bir panorama görseli için genellikle beş yakınlaştırma çözünürlüğü seviyesi sunar. Tüm yakınlaştırma düzeylerinde tek bir panorama resminden yararlanacaksanız bu tür bir resim ya çok büyük olur ve uygulamanızı önemli ölçüde yavaşlatır ya da yüksek yakınlaştırma düzeylerinde düşük çözünürlüğe sahip olduğundan pikselleştirilmiş bir resim sunar. Ancak neyse ki, Google'ın harita karolarını farklı yakınlaştırma düzeylerinde sunmak için kullanılan benzer bir tasarım deseni kullanarak her bir yakınlaştırma düzeyinde panoramalar için uygun çözünürlük görüntüleri sağlayabiliriz.

StreetViewPanorama ilk kez yüklendiğinde, varsayılan olarak panoramanın yatay genişliğinin %25'i (90 derecelik) olan bir resmi yakınlaştırma seviyesi 1 olarak gösterir. Bu görünüm, yaklaşık olarak normal insan görüş alanına karşılık gelir. Bu varsayılan görünümden "uzaklaştırma" işlemi aslında daha geniş bir açı sağlar. Yakınlaştırma ise görüş alanını daha küçük bir açıyla daraltır. StreetViewPanorama, seçilen yakınlaştırma düzeyi için uygun görüş alanını otomatik olarak hesaplar ve ardından, yatay görüş alanının boyutlarıyla kabaca eşleşen bir karo grubu seçerek bu çözünürlük için en uygun görüntüleri seçer. Aşağıdaki görünüm alanları, Street View yakınlaştırma seviyeleriyle eşlenir:

Street View'da gösterilen resmin boyutunun, tamamen Street View kapsayıcısının ekran boyutuna (genişliği) bağlı olduğunu unutmayın. Daha geniş bir container sağlarsanız hizmet, herhangi bir yakınlaştırma seviyesi için aynı görüş alanını sağlamaya devam eder ancak bunun yerine bu çözünürlük için daha uygun karoları seçebilir.

Her panorama eşdeğer dikdörtgen bir projeksiyon içerdiğinden, panorama karoları oluşturmak nispeten daha kolaydır. Projeksiyon 2:1 en boy oranına sahip bir resim sağladığından, 2:1 oranlara sahip karoların kullanımı daha kolay olsa da, kare haritalarda daha iyi performans sağlayabilir (görüş alanı kare olacağı için).

2:1 bloklarda, panoramanın tamamını kapsayan tek bir resim, yakınlaştırma seviyesi 0 olan panoramanın tamamını (temel resim) temsil eder. Her bir artan yakınlaştırma düzeyi, 4^zoomLevel karo sunar. (Örneğin, 2. yakınlaştırma düzeyinde, tüm panorama 16 karodan oluşur.) Not: Street View parçasındaki yakınlaştırma düzeyleri, Street View kontrolü kullanılarak sağlanan yakınlaştırma düzeyleriyle doğrudan eşleşmez. Bunun yerine, Street View kontrolü yakınlaştırma düzeyleri, uygun karoların seçileceği bir Görünüm Alanı (FoV) seçer.

Genellikle resim karolarınızı programatik olarak seçilebilmeleri için adlandırmak istersiniz. Böyle bir adlandırma şeması, aşağıdaki Özel Panorama İsteklerini İşleme bölümünde açıklanmıştır.

Özel Panorama İsteklerini İşleme

Özel panorama kullanmak için StreetViewPanorama.registerPanoProvider() çağrısı yaparak özel panorama sağlayıcı yönteminizin adını belirtin. Panorama sağlayıcı yöntemi, StreetViewPanoramaData nesnesi döndürmeli ve aşağıdaki imzaya sahip olmalıdır:

Function(pano):StreetViewPanoramaData

StreetViewPanoramaData, aşağıdaki biçimde bir nesnedir:

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

Özel panoramayı aşağıdaki gibi görüntüleyin:

• StreetViewPanoramaOptions.pano özelliğini özel bir değere ayarlayın.
• Özel bir panorama sağlayıcı işlevi sağlamak için StreetViewPanorama.registerPanoProvider() numaralı telefonu çağırın.
• Belirtilen pano değerini işlemek için özel panorama sağlayıcı işlevinizi uygulayın.
• StreetViewPanoramaData nesnesi oluşturun.
• StreetViewTileData.getTileUrl özelliğini, sağladığınız özel karo sağlayıcı işlevinin adına ayarlayın. Örneğin, getCustomPanoramaTileUrl.
• Özel karo sağlayıcı işlevinizi aşağıdaki örneklerde gösterildiği gibi uygulayın.
• StreetViewPanoramaData nesnesini döndürün.

Not: Özel panoramalar görüntülemek istediğinizde doğrudan StreetViewPanorama üzerinde position ayarlamayın. Böyle bir konum, Street View hizmetine söz konusu konuma yakın olan varsayılan Street View görüntülerini isteme talimatı verir. Bunun yerine, bu konumu özel StreetViewPanoramaData nesnesinin location.latLng alanında ayarlayın.

Aşağıdaki örnekte Google Sidney ofisinin özel bir panoraması gösterilmektedir. Bu örneğin, bir haritayı veya varsayılan Street View görüntülerini kullanmadığını unutmayın:

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

  panorama.registerPanoProvider(getCustomPanorama);
}

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

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

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

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

  panorama.registerPanoProvider(getCustomPanorama);
}

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

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

window.initPano = initPano;
index.js

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

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

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

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

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initPano&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

Özel panorama sağlayıcısı, iletilen panorama kimliği, yakınlaştırma düzeyi ve panorama parçası koordinatlarına göre uygun karoyu döndürür. Görüntü seçimi bu iletilen değerlere bağlı olduğundan, pano_zoom_tileX_tileY.png gibi aktarılan bu değerlere göre programatik olarak seçilebilen görüntüleri adlandırmak yararlı olur.

Aşağıdaki örnekte resme, varsayılan Street View gezinme oklarının yanı sıra Google Sidney'i işaret eden ve özel görüntülere bağlantı veren bir ok daha eklenmiştir:

let panorama: google.maps.StreetViewPanorama;

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

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

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

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

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

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

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

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

function initPanorama() {
  panorama = new google.maps.StreetViewPanorama(
    document.getElementById("street-view"),
    { pano: outsideGoogle.location.pano },
  );
  // Register a provider for the custom panorama.
  panorama.registerPanoProvider((pano) => {
    if (pano === "reception") {
      return getReceptionPanoramaData();
    }
    // @ts-ignore TODO fix typings
    return null;
  });
  // Add a link to our custom panorama from outside the Google Sydney office.
  panorama.addListener("links_changed", () => {
    if (panorama.getPano() === outsideGoogle.location.pano) {
      panorama.getLinks().push({
        description: "Google Sydney",
        heading: 25,
        pano: "reception",
      });
    }
  });
}

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

window.initMap = initMap;
index.js

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

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

<html>
  <head>
    <title>Custom Street View Panorama Tiles</title>

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

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html