Genel bakış
Google Street View, kapsama alanı genelinde belirlenen yollardan 360 derecelik panoramik manzaralar sunar. Street View'ın API kapsamı, Google Haritalar uygulamasının (https://maps.google.com/
) API kapsamıyla aynıdır. Street View için şu anda desteklenen şehirlerin listesini Google Haritalar web sitesinde bulabilirsiniz.
Aşağıda örnek bir Street View görüntüsü gösterilmektedir.
Maps JavaScript API, Google Haritalar Street View'da kullanılan görüntüleri elde etmek ve değiştirmek için 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 en çok bir konumu haritada belirtirken kullanışlıdır. Varsayılan olarak, Street View haritada
etkinleştirilir ve gezinme (yakınlaştırma ve kaydırma) denetimlerine entegre bir
Street View Pegman kontrolü görünür. Haritanın MapOptions
içinde bu denetimi gizlemek için streetViewControl
öğesini false
seçeneğine ayarlayabilirsiniz. Map
streetViewControlOptions.position
özelliğini
yeni bir ControlPosition
olarak ayarlayarak Street View kontrolünün varsayılan konumunu
da değiştirebilirsiniz.
Street View Pegman kontrolü, Street View panoramalarını doğrudan harita içinde görüntülemenize olanak tanır. Kullanıcı Pegman'i tıklayıp elinde tuttuğunda, harita güncellenerek Street View özellikli sokakların etrafında mavi ana hatlar gösterecek şekilde güncellenir ve Google Haritalar uygulamasına benzer bir kullanıcı deneyimi sunar.
Kullanıcı Pegman işaretçisini bir 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 "izleyicisine" API arayüzü sağlayan StreetViewPanorama
nesnesinin kullanımıyla desteklenir. Her haritada, haritanın getStreetView()
yöntemini
çağırarak alabileceğiniz varsayılan bir Street View panoraması bulunur. Haritaya bir Street View
denetimi eklemek için streetViewControl
seçeneğini true
olarak ayarlarsanız, Pegman kontrolünü bu varsayılan
Street View panoramasına otomatik olarak bağlarsınız.
Ayrıca kendi StreetViewPanorama
nesnenizi oluşturabilir ve haritanın streetView
özelliğini oluşturulan bu nesneye açıkça ayarlayarak haritayı, varsayılan yerine bu nesneyi kullanacak şekilde ayarlayabilirsiniz. Harita ve panorama arasındaki bindirmelerin otomatik
paylaşımı gibi varsayılan çalışma biçimini değiştirmek isterseniz varsayılan panoramayı geçersiz kılabilirsiniz. (Aşağıdaki Street View içindeki yer paylaşımları bölümüne bakın.)
Street View Kapsayıcıları
Bunun yerine, ayrı bir DOM öğesinde (genellikle <div>
) bir StreetViewPanorama
görüntülemek isteyebilirsiniz.
DOM öğesini StreetViewPanorama
oluşturucusu içinde iletmeniz yeterlidir. Resimlerin optimum şekilde gösterilmesi için en az 200 piksele 200 piksel boyutunda bir boyut belirlemeniz önerilir.
Not: Street View işlevi, 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ış Noktası (POV)
StreetViewPanorama
oluşturucu, StreetViewOptions
parametresini kullanarak Street View konumunu ve bakış açısını ayarlamanıza da olanak tanır. İnşaattan sonra, konumunu ve Bakış Açısı'nı değiştirmek için nesne üzerinde
setPosition()
ve setPov()
numaralı telefonu arayabilirsiniz.
Street View konumu, bir resmin kamera odağının konumunu 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ılan0
), kamera loksu çevresindeki dönüş açısını gerçek kuzeye göre derece cinsinden tanımlar. Başlıklar saat yönünde ölçülür (90 derece gerçek doğuyu ifade eder).pitch
(varsayılan0
), kameranın genellikle (ancak her zaman değil) yatay olan ilk varsayılan perdesinden "yukarı" veya "aşağı" açı varyansını tanımlar. (Örneğin, tepede çekilen bir görüntüde muhtemelen yatay olmayan bir varsayılan dönüş açısı sergilenecektir.) Ses perdesi açıları, yukarı bakan pozitif değerlerle (varsayılan perdeye dik olacak şekilde +90 derece dik ve aşağıya doğru) ve negatif değerlerle (-90 derece dik aşağıya ve varsayılan perdeye dik olacak şekilde) ölçülür.
StreetViewPov
nesnesi genellikle Street View kamerasının bakış açısını belirlemek için kullanılır. Fotoğrafçının bakış açısını (genellikle arabanın veya üç tekerlekli aracın baktığı yön) StreetViewPanorama.getPhotographerPov()
yöntemini kullanarak da belirleyebilirsiniz.
Aşağıdaki kod, ilk olarak Fenway Park'ın görünümüyle birlikte Boston haritasını gösterir. Pegman'i seçip haritada desteklenen bir yere sürüklemek Street View panoramasını değiştirir:
TypeScript
function initialize() { const fenway = { lat: 42.345573, lng: -71.098326 }; const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { center: fenway, zoom: 14, } ); const panorama = new google.maps.StreetViewPanorama( document.getElementById("pano") as HTMLElement, { position: fenway, pov: { heading: 34, pitch: 10, }, } ); map.setStreetView(panorama); } declare global { interface Window { initialize: () => void; } } window.initialize = initialize;
JavaScript
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;
CSS
html, body { height: 100%; margin: 0; padding: 0; } #map, #pano { float: left; height: 100%; width: 50%; }
HTML
<html> <head> <title>Street View split-map-panes</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <div id="pano"></div> <!-- The `defer` attribute causes the callback to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. 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>
Örneği Deneyin
Mobil cihazlarda hareket izleme
API, cihaz yön etkinliklerini destekleyen cihazlarda kullanıcılara cihazın hareketine bağlı olarak Street View bakışını değiştirme olanağı sunar. Kullanıcılar cihazlarını hareket ettirerek etrafa bakabilir. Buna hareket izleme veya cihaz dönüşü izleme adı verilir.
Uygulama geliştirici olarak varsayılan davranışı aşağıdaki şekilde değiştirebilirsiniz:
- Hareket izleme işlevini etkinleştirin veya devre dışı bırakın. Varsayılan olarak hareket izleme, destekleyen tüm cihazlarda etkindir. 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ı, kontrole dokunarak hareket izlemeyi açabilir veya kapatabilir. Cihaz, hareket izlemeyi desteklemiyorsa
motionTrackingControl
değeri ne olursa olsun kontrolün hiçbir zaman görünmeyeceğini unutmayın.Aşağıdaki örnekte hem hareket izleme hem de hareket izleme kontrolü devre dışı bırakılmaktadır. Bu durumda, kullanıcı hareket izlemeyi etkinleştiremez:
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 kontrol, panoramanın sağ alt kısmına yakın bir yerde görünür (
RIGHT_BOTTOM
konumu). Aşağıdaki örnekte, kontrolün konumu sol alt olarak ayarlanı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 çalışırken görmek için bir mobil cihazda (veya cihaz yön etkinliklerini destekleyen herhangi bir cihazda) aşağıdaki örneği görüntüleyin:
Sokak Görünümü'ndeki yer paylaşımları
Varsayılan StreetViewPanorama
nesnesi, harita yer paylaşımları için yerel görünümü destekler.
Yer paylaşımları genellikle LatLng
konumlarına sabitlenmiş, "sokak seviyesinde" görünür. (Örneğin, işaretçiler Street View panoramasında konumun yatay düzlemine sabitlenmiş kuyruklarıyla 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. Bir haritada görüntülediğiniz bindirmeler, Street View panoramasında, panorama Map
nesnesinin yerine değerlendirilerek, setMap()
çağrısı yapılarak ve StreetViewPanorama
öğesi harita yerine bağımsız değişken olarak geçirilerek görüntülenebilir. Benzer şekilde, Street View panoraması içinde bilgi pencereleri de open()
çağrısı yapılarak ve harita yerine StreetViewPanorama()
üzerinden açılarak açılabilir.
Ayrıca, varsayılan
StreetViewPanorama
ile bir harita oluştururken, bir haritada oluşturulan tüm işaretçiler,
panoramanın görünür olması şartıyla, haritanın ilişkili Street View panoramasıyla otomatik olarak
paylaşılır. Varsayılan Street View panoramasını almak için Map
nesnesinde getStreetView()
çağrısı yapın. Haritanın streetView
özelliğini açık bir şekilde kendi yapımınıza ait StreetViewPanorama
olarak ayarlarsanız varsayılan panoramayı geçersiz kılacağınızı unutmayın.
Aşağıdaki örnekte, New York City'nin Astor Place şehrindeki çeşitli konumları belirten işaretçiler gösterilmektedir. StreetViewPanorama
içinde görüntülenen paylaşılan işaretçileri göstermek için ekranı Street View'a getirin.
TypeScript
let panorama: google.maps.StreetViewPanorama; function initMap(): void { const astorPlace = { lat: 40.729884, lng: -73.990988 }; // Set up the map const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { center: astorPlace, zoom: 18, streetViewControl: false, } ); document .getElementById("toggle")! .addEventListener("click", toggleStreetView); // Set up the markers on the map const cafeMarker = new google.maps.Marker({ position: { lat: 40.730031, lng: -73.991428 }, map, icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00", title: "Cafe", }); const bankMarker = new google.maps.Marker({ position: { lat: 40.729681, lng: -73.991138 }, map, icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=dollar|FFFF00", title: "Bank", }); const busMarker = new google.maps.Marker({ position: { lat: 40.729559, lng: -73.990741 }, map, icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=bus|FFFF00", title: "Bus Stop", }); // We get the map's default panorama and set up some defaults. // Note that we don't yet set it visible. panorama = map.getStreetView()!; // TODO fix type panorama.setPosition(astorPlace); panorama.setPov( /** @type {google.maps.StreetViewPov} */ { heading: 265, pitch: 0, } ); } function toggleStreetView(): void { const toggle = panorama.getVisible(); if (toggle == false) { panorama.setVisible(true); } else { panorama.setVisible(false); } } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
let panorama; function initMap() { const astorPlace = { lat: 40.729884, lng: -73.990988 }; // Set up the map const map = new google.maps.Map(document.getElementById("map"), { center: astorPlace, zoom: 18, streetViewControl: false, }); document.getElementById("toggle").addEventListener("click", toggleStreetView); // Set up the markers on the map const cafeMarker = new google.maps.Marker({ position: { lat: 40.730031, lng: -73.991428 }, map, icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00", title: "Cafe", }); const bankMarker = new google.maps.Marker({ position: { lat: 40.729681, lng: -73.991138 }, map, icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=dollar|FFFF00", title: "Bank", }); const busMarker = new google.maps.Marker({ position: { lat: 40.729559, lng: -73.990741 }, map, icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=bus|FFFF00", title: "Bus Stop", }); // We get the map's default panorama and set up some defaults. // Note that we don't yet set it visible. panorama = map.getStreetView(); // TODO fix type panorama.setPosition(astorPlace); panorama.setPov( /** @type {google.maps.StreetViewPov} */ { heading: 265, pitch: 0, }, ); } function toggleStreetView() { const toggle = panorama.getVisible(); if (toggle == false) { panorama.setVisible(true); } else { panorama.setVisible(false); } } window.initMap = initMap;
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } #floating-panel { position: absolute; top: 10px; left: 25%; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; text-align: center; font-family: "Roboto", "sans-serif"; line-height: 30px; padding-left: 10px; } #floating-panel { margin-left: -100px; }
HTML
<html> <head> <title>Overlays Within Street View</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="floating-panel"> <input type="button" value="Toggle Street View" id="toggle" /> </div> <div id="map"></div> <!-- The `defer` attribute causes the callback to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. 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>
Örneği Deneyin
Street View Etkinlikleri
Street View arasında gezinirken veya yönünü değiştirirken StreetViewPanorama
durumundaki değişiklikleri gösteren çeşitli etkinlikleri izlemek isteyebilirsiniz:
pano_changed
bağımsız pano kimliği değiştiğinde etkinleşir. Bu etkinlik, tetiklendiğinde panorama içindeki ilişkili verilerin de (bağlantılar gibi) değiştiğini garanti etmez. Bu etkinlik, yalnızca bir pano kimliğinin değiştiğini belirtir. Pano kimliğinin (bu panoramaya referans vermek için kullanabilirsiniz) yalnızca geçerli tarayıcı oturumunda sabit olduğunu unutmayın.- Panoramanın temel (
LatLng
) konumu değiştiğindeposition_changed
tetiklenir. Bir panoramanın döndürülmesi bu etkinliği tetiklemez. API, en yakın pano kimliğini panoramanın konumuyla otomatik olarak ilişkilendireceği için, bir panoramanın temel konumunu, ilişkili pano kimliğini değiştirmeden değiştirebilirsiniz. - Street View'ın
StreetViewPov
her değiştiğindepov_changed
tetiklenir. Konum ve pano kimliği sabit kalırken bu etkinliğin tetiklenebileceğini unutmayın. - Street View 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 görünürlüğü değiştiğinde
visible_changed
etkinleşir. 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:
TypeScript
function initPano() { const panorama = new google.maps.StreetViewPanorama( document.getElementById("pano") as HTMLElement, { position: { lat: 37.869, lng: -122.255 }, pov: { heading: 270, pitch: 0, }, visible: true, } ); panorama.addListener("pano_changed", () => { const panoCell = document.getElementById("pano-cell") as HTMLElement; panoCell.innerHTML = panorama.getPano(); }); panorama.addListener("links_changed", () => { const linksTable = document.getElementById("links_table") as HTMLElement; while (linksTable.hasChildNodes()) { linksTable.removeChild(linksTable.lastChild as ChildNode); } const links = panorama.getLinks(); for (const i in links) { const row = document.createElement("tr"); linksTable.appendChild(row); const labelCell = document.createElement("td"); labelCell.innerHTML = "<b>Link: " + i + "</b>"; const valueCell = document.createElement("td"); valueCell.innerHTML = links[i].description as string; linksTable.appendChild(labelCell); linksTable.appendChild(valueCell); } }); panorama.addListener("position_changed", () => { const positionCell = document.getElementById( "position-cell" ) as HTMLElement; (positionCell.firstChild as HTMLElement).nodeValue = panorama.getPosition() + ""; }); panorama.addListener("pov_changed", () => { const headingCell = document.getElementById("heading-cell") as HTMLElement; const pitchCell = document.getElementById("pitch-cell") as HTMLElement; (headingCell.firstChild as HTMLElement).nodeValue = panorama.getPov().heading + ""; (pitchCell.firstChild as HTMLElement).nodeValue = panorama.getPov().pitch + ""; }); } declare global { interface Window { initPano: () => void; } } window.initPano = initPano;
JavaScript
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;
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } #floating-panel { position: absolute; top: 10px; left: 25%; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; text-align: center; font-family: "Roboto", "sans-serif"; line-height: 30px; padding-left: 10px; } #pano { width: 50%; height: 100%; float: left; } #floating-panel { width: 45%; height: 100%; float: right; text-align: left; overflow: auto; position: static; border: 0px solid #999; }
HTML
<html> <head> <title>Street View Events</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="pano"></div> <div id="floating-panel"> <table> <tr> <td><b>Position</b></td> <td id="position-cell"> </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"> </td> </tr> <table id="links_table"></table> </table> </div> <!-- The `defer` attribute causes the callback to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. 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>
Örneği Deneyin
Street View Kontrolleri
Bir StreetViewPanorama
görüntülenirken, panoramada varsayılan olarak çeşitli denetimler görünür. Bu denetimleri, StreetViewPanoramaOptions
içindeki ilgili alanları true
veya false
değerine ayarlayarak etkinleştirebilir veya devre dışı bırakabilirsiniz:
panControl
, panoramayı döndürmek için bir yol sağlar. Bu denetim, varsayılan olarak standart bir entegre pusula ve kaydırma kontrolü olarak görünür.panControlOptions
alanı içindePanControlOptions
sağlarsanız kontrolün konumunu değiştirebilirsiniz.zoomControl
, resmi yakınlaştırmak için bir yöntem sunar. Bu denetim, varsayılan olarak panoramanın sağ alt kısmına yakın bir yerde görünür.zoomControlOptions
alanı içindeZoomControlOptions
değerini sağlayarak kontrolün görünümünü değiştirebilirsiniz.addressControl
, ilişkilendirilen konumun adresini belirten bir metin yer paylaşımı ve konumu Google Haritalar'da açmak için bir bağlantı sunar.addressControlOptions
alanı içindeStreetViewAddressControlOptions
değerini 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ı içindeFullscreenControlOptions
değerini 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 denetim yalnızca cihaz yön etkinliklerini destekleyen cihazlarda görünür. Varsayılan olarak kontrol, 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 konulu bölüme bakın.linksControl
işareti, bitişik panorama resimlere gitmek için resim üzerinde kılavuz oklar sağlar.- Kapat kontrolü, kullanıcının Street View görüntüleyicisini kapatmasına olanak tanır.
enableCloseButton
öğesinitrue
veyafalse
değerine ayarlayarak Kapat denetimini etkinleştirebilir veya devre dışı bırakabilirsiniz.
Aşağıdaki örnek, ilişkili Street View'da görüntülenen denetimleri değiştirir ve görünümün bağlantılarını kaldırır:
TypeScript
function initPano() { // Note: constructed panorama objects have visible: true // set by default. const panorama = new google.maps.StreetViewPanorama( document.getElementById("map") as HTMLElement, { position: { lat: 42.345573, lng: -71.098326 }, addressControlOptions: { position: google.maps.ControlPosition.BOTTOM_CENTER, }, linksControl: false, panControl: false, enableCloseButton: false, } ); } declare global { interface Window { initPano: () => void; } } window.initPano = initPano;
JavaScript
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;
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
HTML
<html> <head> <title>Street View Controls</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <!-- The `defer` attribute causes the callback to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. 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>
Örneği Deneyin
Street View Verilerine Doğrudan Erişme
Street View verilerinin kullanılabilirliğini programlı olarak belirlemek veya bir harita/panoramanın doğrudan değiştirilmesine gerek olmadan 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 Maps API'nin harici bir sunucuya çağrı yapması gerektiğinden, Street View hizmetine erişim eşzamansız olarak gerçekleştirilmektedir. Bu nedenle, isteğin tamamlanmasının ardından yürütülecek bir callback 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 ilgili panoramanın görüntülerinin ömrü boyunca kararlı olduğunu unutmayın.
StreetViewLocationRequest
kullanan bir istek, aşağıdaki parametreleri kullanarak belirli bir konumda panorama verilerini arar:
location
, panoramanın aranacağı konumu (enlem ve boylam) belirtir.preference
, yarıçap içinde bulunan panoramalardan hangisinin bulunduğuna ilişkin bir tercih belirler: belirtilen konuma en yakın olan veya yarıçap içindeki en iyi panorama.radius
, belirtilen enlem ve boylamın merkezinde yer alan, panorama araması yapmak için metre cinsinden belirtilen bir yarıçap belirler. Sağlanmadığında varsayılan olarak 50 değerine ayarlanır.source
, aranacak panoramaların kaynağını belirtir. Geçerli değerler aşağıda belirtilmiştir: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 açık hava panoramalarının bulunmayabileceğini unutmayın.
Street View Hizmet Yanıtları
getPanorama()
işlevinin, Street View hizmetinden bir sonuç alındığında yürütülmesi için bir geri çağırma işlevine ihtiyacı vardır. Bu geri çağırma işlevi, bir StreetViewPanoramaData
nesnesindeki panorama verilerini ve isteğin durumunu ilgili sırayla gösteren StreetViewStatus
kodunu döndürür.
StreetViewPanoramaData
nesne spesifikasyonu, şu biçimdeki 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 kendisinin bir StreetViewPanorama
nesnesi olmadığını unutmayın. Bu verileri kullanarak bir 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 belirtir.ZERO_RESULTS
, hizmetin geçirilen ölçütlerle eşleşen bir panorama bulamadığını belirtir.UNKNOWN_ERROR
, tam nedeni bilinmese de bir Street View isteğinin işleme alınamadığını belirtir.
Aşağıdaki kod, tıklandığında haritadaki ilgili konuma ait StreetViewPanorama
gösteren işaretçiler oluşturarak kullanıcı tıklamalarına yanıt veren bir StreetViewService
oluşturur. Kod, hizmetten döndürülen StreetViewPanoramaData
içeriğini kullanır.
TypeScript
/* * Click the map to set a new location for the Street View camera. */ let map: google.maps.Map; let panorama: google.maps.StreetViewPanorama; function initMap(): void { const berkeley = { lat: 37.869085, lng: -122.254775 }; const sv = new google.maps.StreetViewService(); panorama = new google.maps.StreetViewPanorama( document.getElementById("pano") as HTMLElement ); // Set up the map. map = new google.maps.Map(document.getElementById("map") as HTMLElement, { center: berkeley, zoom: 16, streetViewControl: false, }); // Set the initial Street View camera to the center of the map sv.getPanorama({ location: berkeley, radius: 50 }).then(processSVData); // Look for a nearby Street View panorama when the map is clicked. // getPanorama will return the nearest pano when the given // radius is 50 meters or less. map.addListener("click", (event) => { sv.getPanorama({ location: event.latLng, radius: 50 }) .then(processSVData) .catch((e) => console.error("Street View data not found for this location.") ); }); } function processSVData({ data }: google.maps.StreetViewResponse) { const location = data.location!; const marker = new google.maps.Marker({ position: location.latLng, map, title: location.description, }); panorama.setPano(location.pano as string); panorama.setPov({ heading: 270, pitch: 0, }); panorama.setVisible(true); marker.addListener("click", () => { const markerPanoID = location.pano; // Set the Pano to use the passed panoID. panorama.setPano(markerPanoID as string); panorama.setPov({ heading: 270, pitch: 0, }); panorama.setVisible(true); }); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
/* * 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;
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
HTML
<html> <head> <title>Directly Accessing Street View Data</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map" style="width: 45%; height: 100%; float: left"></div> <div id="pano" style="width: 45%; height: 100%; float: left"></div> <!-- The `defer` attribute causes the callback to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. 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>
Örneği Deneyin
Özel Street View Panoramaları sağlama
Maps JavaScript API, StreetViewPanorama
nesnesinde özel panoramaların görüntülenmesini destekler. Özel panoramaları kullanarak binaların içini, manzaralı konumlardan manzaraları veya hayalinizdeki her şeyi görüntüleyebilirsiniz. Hatta bu özel panoramaları Google'ın mevcut Street View panoramalarına da bağlayabilirsiniz.
Özel panorama görüntüleri oluşturmak için aşağıdaki adımlar uygulanır:
- Her özel panorama için temel bir 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ı belirtin ve özel küme ile standart küme arasındaki bağlantıları özelleştirin.
- Bir
StreetViewPanoramaData
nesnesindeki her bir panorama resmi için meta verileri tanımlayın. - Özel panorama verilerini ve resimleri belirleyen bir yöntem uygulayın ve bu yöntemi
StreetViewPanorama
nesnesinde özel işleyiciniz olarak atayın.
Aşağıdaki bölümlerde bu süreç açıklanmaktadır.
Özel Panoramalar Oluşturma
Her bir Street View panoraması, tek bir konumdan tam 360 derecelik görünüm sağlayan
bir resim veya resim kümesidir.
StreetViewPanorama
nesnesi, eş dikdörtgen (Plate Carrée) projeksiyonuna uygun resimler kullanır. Böyle bir projeksiyon, 360 derece yatay görünüm (tam ekran) ve 180 derece dikey görünüm (düzden aşağıya doğru) içerir. Bu görünüm alanları 2:1 en boy oranına sahip bir görselle sonuçlanır. Aşağıda tam olarak kaplanmış bir 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ı sayfasına bakın.) Bu tür resimler, panorama resimlerinin her birinin çekildiği tek bir "kamera" konumunu paylaşmalıdır. Ortaya çıkan 360 derecelik panorama, görüntünün kürenin iki boyutlu yüzeyine sarıldığı, küre üzerinde bir projeksiyon tanımlamaktır.
Panoramayı, doğrusal koordinat sistemine sahip bir küre üzerindeki projeksiyon olarak ele almak, resmi doğrusal karolara bölerken ve hesaplanan karo koordinatlarına göre resim sunarken avantaj sağlar.
Özel Panorama Karoları Oluşturma
Street View, 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ılarını da destekler. Street View, genel olarak herhangi bir panorama resmi için beş seviye yakınlaştırma çözünürlüğü sağlar. Tüm yakınlaştırma düzeylerini sunmak için tek bir panorama resmi kullanacak olsaydınız, bu tür bir resim çok büyük boyutlu ve uygulamanızı önemli ölçüde yavaşlatacaktı veya daha yüksek yakınlaştırma düzeylerinde o kadar kötü bir çözünürlükte olacaktı ki, kötü pikselleştirilmiş bir resim sunacaksınız. Neyse ki, her yakınlaştırma düzeyinde panoramalar için uygun çözünürlüklü görüntüler sağlamak amacıyla Google'ın harita desenlerini farklı yakınlaştırma düzeylerinde sunmak için kullanılan benzer bir tasarım kalıbı kullanabiliriz.
Bir StreetViewPanorama
ilk kez yüklendiğinde, varsayılan olarak, 1. yakınlaştırma düzeyinde panoramanın yatay genişliğinin %25'ini (90 derece yay) oluşan bir resim görüntüler. Bu görünüm, genel olarak normal bir insan görüş alanına karşılık gelir. Bu varsayılan görünümü "uzaklaştırdığınızda" daha geniş bir yay elde edilir. Yakın 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 hemen hemen eşleşen bir karo grubu seçerek bu çözünürlük için en uygun görüntüleri seçer. Street View yakınlaştırma düzeylerine ilişkin görünüm haritasında aşağıdaki alanlar:
Street View yakınlaştırma düzeyi | Görüş Alanı (derece) |
---|---|
0 | 180 |
1 (varsayılan) | 90 |
2 | 45 |
3 | 22.5 |
4 | 11.25 |
Street View'da gösterilen resmin boyutunun tamamen Street View kapsayıcısının ekran boyutuna (genişliğine) bağlı olduğunu unutmayın. Daha geniş bir kapsayıcı sağlarsanız hizmet, herhangi bir yakınlaştırma düzeyi için aynı görüş alanını sağlamaya devam eder ancak bu çözünürlük için daha uygun olan karoları seçebilir.
Her panorama eş dikdörtgen projeksiyondan oluştuğundan, panorama karoları oluşturmak nispeten kolaydır. Projeksiyon en boy oranı 2:1 olan bir görüntü sağladığından, 2:1 en boy oranına sahip karoların kullanımı daha kolaydır, ancak kare karolar, (görüş alanı kare olduğu için) kare haritalarda daha iyi performans sağlayabilir.
2:1 karolar için, tüm panoramayı kapsayan tek bir resim, yakınlaştırma düzeyi 0'da tüm panorama "dünyasını" (temel resim) temsil eder ve her artan yakınlaştırma seviyesi 4 zoomLevel karosu sunar. (Ör. yakınlaştırma düzeyi 2 olduğunda tüm panorama 16 karodan oluşur.) Not: Street View parçalarındaki yakınlaştırma düzeyleri, Street View kontrolü kullanılarak sağlanan yakınlaştırma seviyeleriyle doğrudan eşleşmez. Bunun yerine Street View kontrolü yakınlaştırma seviyeleri, uygun karoların seçileceği bir Görüş Alanı (FoV) seçer.
Genel olarak resim karolarınızı programatik olarak seçilebilecek şekilde adlandırmanız gerekir. Böyle bir adlandırma şeması, aşağıda Özel Panorama İsteklerini İşleme bölümünde açıklanmıştır.
Özel Panorama İsteklerini İşleme
Özel bir panorama kullanmak için özel panorama sağlayıcı yönteminizin adını belirterek StreetViewPanorama.registerPanoProvider()
yöntemini çağırın. Panorama sağlayıcı yöntemi StreetViewPanoramaData
nesnesi döndürmelidir ve şu 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 bir 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 arayı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 StreetViewPanorama
üzerinde doğrudan bir position
ayarlamayın. Böyle bir konum, Street View hizmetine söz konusu konumun yakınındaki 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 haritanın veya varsayılan Street View görüntüsünün kullanılmadığını unutmayın:
TypeScript
function initPano() { // Set up Street View and initially set it visible. Register the // custom panorama provider function. Set the StreetView to display // the custom panorama 'reception' which we check for below. const panorama = new google.maps.StreetViewPanorama( document.getElementById("map") as HTMLElement, { pano: "reception", visible: true } ); panorama.registerPanoProvider(getCustomPanorama); } // Return a pano image given the panoID. function getCustomPanoramaTileUrl( pano: string, zoom: number, tileX: number, tileY: number ): string { return ( "https://developers.google.com/maps/documentation/javascript/examples/full/images/" + "panoReception1024-" + zoom + "-" + tileX + "-" + tileY + ".jpg" ); } // Construct the appropriate StreetViewPanoramaData given // the passed pano IDs. function getCustomPanorama(pano: string): google.maps.StreetViewPanoramaData { if (pano === "reception") { return { location: { pano: "reception", description: "Google Sydney - Reception", }, links: [], // The text for the copyright control. copyright: "Imagery (c) 2010 Google", // The definition of the tiles for this panorama. tiles: { tileSize: new google.maps.Size(1024, 512), worldSize: new google.maps.Size(2048, 1024), // The heading in degrees at the origin of the panorama // tile set. centerHeading: 105, getTileUrl: getCustomPanoramaTileUrl, }, }; } // @ts-ignore TODO fix typings return null; } declare global { interface Window { initPano: () => void; } } window.initPano = initPano;
JavaScript
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;
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
HTML
<html> <head> <title>Custom Street View Panoramas</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <!-- The `defer` attribute causes the callback to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. 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>
Örneği Deneyin
Özel panorama sağlayıcısı, iletilen panorama kimliği, yakınlaştırma düzeyi ve panorama karosu koordinatlarına göre uygun karoyu döndürür.
Görüntü seçimi, iletilen bu değerlere bağlı olduğundan pano_zoom_tileX_tileY.png
gibi iletilen bu değerlere göre programatik olarak seçilebilen görüntüleri adlandırmak faydalıdır.
Aşağıdaki örnekte, varsayılan Street View gezinme oklarına ek olarak, resme Google Sidney'i işaret eden ve özel görüntülere bağlantı veren başka bir ok eklenmiştir:
TypeScript
let panorama: google.maps.StreetViewPanorama; // StreetViewPanoramaData of a panorama just outside the Google Sydney office. let outsideGoogle: google.maps.StreetViewPanoramaData; // StreetViewPanoramaData for a custom panorama: the Google Sydney reception. function getReceptionPanoramaData(): google.maps.StreetViewPanoramaData { return { location: { pano: "reception", // The ID for this custom panorama. description: "Google Sydney - Reception", latLng: new google.maps.LatLng(-33.86684, 151.19583), }, links: [ { heading: 195, description: "Exit", pano: (outsideGoogle.location as google.maps.StreetViewLocation).pano, }, ], copyright: "Imagery (c) 2010 Google", tiles: { tileSize: new google.maps.Size(1024, 512), worldSize: new google.maps.Size(2048, 1024), centerHeading: 105, getTileUrl: function ( pano: string, zoom: number, tileX: number, tileY: number ): string { return ( "https://developers.google.com/maps/documentation/javascript/examples/full/images/" + "panoReception1024-" + zoom + "-" + tileX + "-" + tileY + ".jpg" ); }, }, }; } function initPanorama() { panorama = new google.maps.StreetViewPanorama( document.getElementById("street-view") as HTMLElement, { pano: (outsideGoogle.location as google.maps.StreetViewLocation).pano } ); // Register a provider for the custom panorama. panorama.registerPanoProvider( (pano: string): google.maps.StreetViewPanoramaData => { if (pano === "reception") { return getReceptionPanoramaData(); } // @ts-ignore TODO fix typings return null; } ); // Add a link to our custom panorama from outside the Google Sydney office. panorama.addListener("links_changed", () => { if ( panorama.getPano() === (outsideGoogle.location as google.maps.StreetViewLocation).pano ) { panorama.getLinks().push({ description: "Google Sydney", heading: 25, pano: "reception", }); } }); } function initMap(): void { // Use the Street View service to find a pano ID on Pirrama Rd, outside the // Google office. new google.maps.StreetViewService() .getPanorama({ location: { lat: -33.867386, lng: 151.195767 } }) .then(({ data }: google.maps.StreetViewResponse) => { outsideGoogle = data; initPanorama(); }); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
let panorama; // StreetViewPanoramaData of a panorama just outside the Google Sydney office. let outsideGoogle; // StreetViewPanoramaData for a custom panorama: the Google Sydney reception. function getReceptionPanoramaData() { return { location: { pano: "reception", description: "Google Sydney - Reception", latLng: new google.maps.LatLng(-33.86684, 151.19583), }, links: [ { heading: 195, description: "Exit", pano: outsideGoogle.location.pano, }, ], copyright: "Imagery (c) 2010 Google", tiles: { tileSize: new google.maps.Size(1024, 512), worldSize: new google.maps.Size(2048, 1024), centerHeading: 105, getTileUrl: function (pano, zoom, tileX, tileY) { return ( "https://developers.google.com/maps/documentation/javascript/examples/full/images/" + "panoReception1024-" + zoom + "-" + tileX + "-" + tileY + ".jpg" ); }, }, }; } function initPanorama() { panorama = new google.maps.StreetViewPanorama( document.getElementById("street-view"), { pano: outsideGoogle.location.pano }, ); // Register a provider for the custom panorama. panorama.registerPanoProvider((pano) => { if (pano === "reception") { return getReceptionPanoramaData(); } // @ts-ignore TODO fix typings return null; }); // Add a link to our custom panorama from outside the Google Sydney office. panorama.addListener("links_changed", () => { if (panorama.getPano() === outsideGoogle.location.pano) { panorama.getLinks().push({ description: "Google Sydney", heading: 25, pano: "reception", }); } }); } function initMap() { // Use the Street View service to find a pano ID on Pirrama Rd, outside the // Google office. new google.maps.StreetViewService() .getPanorama({ location: { lat: -33.867386, lng: 151.195767 } }) .then(({ data }) => { outsideGoogle = data; initPanorama(); }); } window.initMap = initMap;
CSS
html, body { height: 100%; margin: 0; padding: 0; } #street-view { height: 100%; }
HTML
<html> <head> <title>Custom Street View Panorama Tiles</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="street-view"></div> <!-- The `defer` attribute causes the callback to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. 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>