모든 준비를 마쳤습니다!

개발을 시작하려면 개발자 문서로 이동하세요.

Google Maps JavaScript API 활성화

개발을 시작하기 위해 Google Developers Console에서 우선적으로 해야 할 일을 몇 가지 소개하겠습니다.

  1. 프로젝트 생성 또는 선택
  2. Google Maps JavaScript API 및 관련 서비스 활성화
  3. 적합한 키 생성
계속

스트리트 뷰 서비스

개요

Google 스트리트 뷰는 지정된 도로부터 커버리지 영역 전반에 걸쳐 360도 파노라마 뷰를 제공합니다. 스트리트 뷰의 API 커버리지는 Google 지도 애플리케이션(https://maps.google.com/)의 커버리지와 동일합니다. 현재 스트리트 뷰가 지원되는 도시의 목록은Google 지도 웹사이트에서 볼 수 있습니다.

아래는 샘플 스트리트 뷰 이미지입니다.


Google Maps JavaScript API는 Google 지도 스트리트 뷰에서 사용되는 이미지를 얻고 조작하기 위한 스트리트 뷰 서비스를 제공합니다. 스트리트 뷰 서비스는 기본적으로 브라우저 내에서 지원됩니다.

스트리트 뷰 지도 사용

스트리트 뷰는 독립형 DOM 요소에서 사용할 수 있지만, 지도에서 위치를 나타낼 때 가장 유용합니다. 기본적으로 스트리트뷰는 지도에서 활성화되어 있고, 스트리트 뷰 펙맨 컨트롤은 탐색(확대/축소 및 팬) 컨트롤 내에서 통합되어 나타납니다. streetViewControlfalse로 설정하여 지도의 MapOptions 내에 컨트롤을 숨길 수 있습니다. 또한, MapstreetViewControlOptions.position 속성을 새 ControlPosition으로 설정하면 스트리트 뷰 컨트롤의 기본 위치를 변경할 수 있습니다.

스트리트 뷰 펙맨 컨트롤을 사용하면 지도 내에서 스트리트 뷰 파노라마를 직접 볼 수 있습니다. 사용자가 펙맨을 클릭한 채로 있으면 지도가 업데이트되면서 스트리트 뷰가 활성화된 도로에 파란색 윤곽선이 나타나고, Google 지도 앱과 유사한 사용자 경험을 제공합니다.

사용자가 펙맨 마커를 도로에 놓으면, 지도가 업데이트되면서 표시된 위치의 스트리트 뷰 파노라마를 표시합니다.

스트리트 뷰 파노라마

스트리트 뷰 이미지는 스트리트 뷰 "뷰어"에 API 인터페이스를 제공하는 StreetViewPanorama 객체를 사용하여 지원됩니다. 각 지도에는 기본 스트리트 뷰 파노라마가 포함되어 있고, 지도의 getStreetView() 메서드를 호출하여 검색할 수 있습니다. streetViewControl 옵션을 true로 설정하여 지도에 스트리트 뷰 컨트롤을 추가하면, 이 기본 스트리트 뷰 파노라마에 펙맨 컨트롤이 자동으로 연결됩니다.

또한, StreetViewPanorama 객체를 생성하고, 지도의 streetView 속성을 생성된 객체에 명시적으로 설정하여 지도에서 기본값 대신 설정한 속성을 사용할 수 있습니다. 지도와 파노라마 간 오버레이의 자동 공유와 같은 기본 동작을 수정하여 기본 파노라마를 재정의할 수도 있습니다. (아래 스트리트 뷰 내의 오버레이를 참조하세요.)

스트리트 뷰 컨테이너

별도의 DOM 요소(주로 <div> 요소)에 StreetViewPanorama를 표시할 수도 있습니다. StreetViewPanorama의 생성자 내부에 DOM 요소를 전달하기만 하면 됩니다. 이미지를 최적으로 표시하려면 200 x 200 픽셀 이상의 크기를 권장합니다.

참고: 스트리트 뷰 기능은 지도와 함께 사용하도록 설계되었지만, 필수는 아닙니다. 지도 없이 독립적으로 스트리트 뷰 객체를 사용할 수 있습니다.

스트리트 뷰 위치 및 시점(POV)

StreetViewPanorama 생성자를 새용하면 StreetViewOptions 매개변수를 통해 스트리트 뷰 위치와 시점을 설정할 수도 있습니다. 객체 생성 후에 객체에서 setPosition()setPov()를 호출하여 위치와 시점을 변경할 수 있습니다.

스트리트 뷰 위치는 이미지의 카메라 초점 배치를 정의하지만, 해당 이미지에 대해 카메라의 방향을 정의하지는 않습니다. 이러한 목적으로 StreetViewPov 객체는 두 가지 속성을 정의합니다.

  • heading(기본값 0)은 정북과 상대적으로 카메라 중심을 기준으로 회전하는 회전 각도를 도 단위로 정의합니다. 방위는 시계 방향으로 측정됩니다(90도는 정동).
  • pitch(기본값 0)는 카메라의 최초 기본 피치에서부터 "위" 또는 "아래"의 각도 변화를 정의합니다. 이 값은 (항상 그렇지는 않지만) 대개는 완전 수평입니다. (예를 들어, 언덕에서 촬영한 이미지는 기본 피치가 수평이 아닐 것입니다.) 피치 각도는 위를 볼 때는 양수 값으로 측정되고(기본 피치에서 직각으로 바로 위를 볼 때 +90도), 아래를 볼 때는 음수 값으로 측정됩니다(기본 피치에서 직각으로 바로 아래를 볼 때는 -90도).

StreetViewPov 객체는 스트리트 뷰 카메라의 시점을 판별하는 데 가장 흔히 사용됩니다. 또한, StreetViewPanorama.getPhotographerPov() 메서드로 사진사의 시점을 판별할 수도 있습니다. 대개 사진사는 보통 차량이나 트라이크를 마주보고 있습니다.

다음 코드는 맨 처음 펜웨이 공원을 보여주는 보스턴 지도를 표시합니다. 펙맨을 선택하고 지도에서 지원되는 위치로 끌면 스트리트 뷰 파노라마가 바뀝니다.

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

예시 보기(streetview-simple.html).

모바일 기기에서 모션 추적

API는 기기 방향 이벤트를 지원하는 기기에서 기기 움직임에 따라 스트리트 뷰 시점을 변경할 수 있는 기능을 제공합니다. 사용자는 기기를 움직이면서 주변을 둘러볼 수 있습니다. 이러한 기능을 모션 추적 또는 기기 회전 추적이라고 합니다.

앱 개발자는 다음과 같이 기본 동작을 변경할 수 있습니다.

  • 모션 추적 기능을 활성화/비활성화합니다. 기본적으로 모션 추적을 지원하는 기기는 이 기능이 활성화되어 있습니다. 다음 샘플은 모션 추적을 비활성화하지만 모션 추적 컨트롤은 보이게 합니다. (사용자가 컨트롤을 눌러서 모션 추적을 켤 수 있습니다.)
    var panorama = new google.maps.StreetViewPanorama(
        document.getElementById('pano'), {
          position: {lat: 37.869260, lng: -122.254811},
          pov: {heading: 165, pitch: 0},
          motionTracking: false
        });
    
  • 모션 추적 컨트롤을 숨기거나 표시합니다. 기본적으로 모션 추적을 지원하는 기기는 컨트롤이 보입니다. 사용자는 컨트롤을 눌러서 모션 추적 기능을 켜거나 끌 수 있습니다. 기기가 모션 추적을 지원하지 않으면 motionTrackingControl 값과 관계없이 컨트롤이 절대 나타나지 않습니다.

    다음 샘플은 모션 추적과 모션 추적 컨트롤을 모두 비활성화합니다. 이 경우, 사용자가 모션 추적을 켤 수 없습니다.

    var panorama = new google.maps.StreetViewPanorama(
        document.getElementById('pano'), {
          position: {lat: 37.869260, lng: -122.254811},
          pov: {heading: 165, pitch: 0},
          motionTracking: false,
          motionTrackingControl: false
        });
    
  • 모션 추적 컨트롤의 기본 위치를 변경합니다. 기본적으로 컨트롤은 파노라마 오른쪽 아래(RIGHT_BOTTOM 위치)에 나타납니다. 다음 샘플은 컨트롤 위치를 왼쪽 아래로 설정합니다.
    var panorama = new google.maps.StreetViewPanorama(
        document.getElementById('pano'), {
          position: {lat: 37.869260, lng: -122.254811},
          pov: {heading: 165, pitch: 0},
          motionTrackingControlOptions: {
            position: google.maps.ControlPosition.LEFT_BOTTOM
          }
        });
    

모션 추적이 작동하는 모습을 보려면 모바일 기기(또는 기기 방향 이벤트를 지원하는 모든 기기)에서 다음 샘플을 확인하세요.


새 페이지에서 예시 보기(streetview-embed.html).

스트리트 뷰 내의 오버레이

기본 StreetViewPanorama 객체는 지도 오버레이의 기본 디스플레이를 지원합니다. 일반적으로 오버레이는 LatLng 위치에 고정된 "도로 수준"에서 나타납니다. (예를 들어, 마커는 스트리트 뷰 파노라마 내 위치의 수평면에 꼬리가 고정된 채로 나타납니다.)

현재 스트리트 뷰 파노라마에서 지원되는 오버레이 유형은 Marker, InfoWindow, 사용자 지정 OverlayView로 제한됩니다. 지도에 표시하는 오버레이는 파노라마를 Map 객체를 대체하는 것으로 간주하고, setMap()을 호출하여 지도 대신 StreetViewPanorama를 인수로 전달하는 방식으로 스트리트 뷰 파노라마에 표시할 수 있습니다. 마찬가지로 정보 창은 open()을 호출하여 지도 대신 StreetViewPanorama()를 전달하는 방식으로 스트리트 뷰 파노라마 안에서 열 수 있습니다.

또한, 기본 StreetViewPanorama로 지도를 생성할 때 지도에서 생성된 마커는 지도와 연결된 스트리트 뷰 파노라마가 표시되는 경우 자동으로 공유됩니다. 기본 스트리트 뷰 파노라마를 검색하려면 Map 객체의 getStreetView()를 호출합니다. 지도의 streetView 속성을 생성된 객체의 StreetViewPanorama로 명시적으로 설정할 경우, 기본 파노라마를 재정의하고 자동 오버레이 공유를 비활성화합니다.

다음 예시는 뉴욕 시 애스터 플레이스 주변의 다양한 위치를 나타내는 마커를 보여줍니다. 디스플레이를 스트리트 뷰로 전환하여 StreetViewPanorama 내에 표시된 공유 마커를 보여줍니다.

var panorama;

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

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

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

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

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

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

function toggleStreetView() {
  var toggle = panorama.getVisible();
  if (toggle == false) {
    panorama.setVisible(true);
  } else {
    panorama.setVisible(false);
  }
}
<div id="floating-panel">
  <input type="button" value="Toggle Street View" onclick="toggleStreetView();"></input>
</div>
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}
#floating-panel {
  margin-left: -100px;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
var panorama;

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

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

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

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

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

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

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

예시 보기(streetview-overlays.html).

스트리트 뷰 이벤트

스트리트 뷰를 탐색하고 방향을 조작할 때, StreetViewPanorama의 상태 변화를 나타내는 여러 가지 이벤트를 모니터링하고 싶을 수 있습니다.

  • pano_changed는 개별 파노라마 ID가 바뀔 때마다 실행됩니다. 이 이벤트가 발생했더라도 파노라마 내의 관련 데이터(예: 링크)가 그 시점에서 변경되지 않았을 수 있습니다. 이 이벤트는 파노라마 ID가 변경되었다는 것만 나타냅니다. 파노라마 ID(이 파노라마를 참조하는 데 사용 가능)는 현재 브라우저 세션 내에서만 안정적입니다.
  • position_changed는 파노라마의 기본(LatLng) 위치가 바뀔 때마다 실행됩니다. 파노라마를 회전해도 이 이벤트가 발생하지 않습니다. API는 가장 가까운 파노라마 ID를 파노라마 위치에 자동으로 연결하므로, 관련된 파노라마 ID를 변경하지 않더라도 파노라마의 기본 위치를 변경할 수 있습니다.
  • pov_changedStreetViewPov가 변경될 때마다 실행됩니다. 위치와 파노라마 ID가 안정적일 때도 이 이벤트가 발생할 수 있습니다.
  • links_changed는 스트리트 뷰 링크가 변경되면 실행됩니다. 이 이벤트는 pano_changed를 통해 나타난 파노라마 ID가 변경된 후에 비동기적으로 실행될 수 있습니다.
  • visible_changed는 스트리트 뷰의 가시성이 변경될 때마다 실행됩니다. 이 이벤트는 pano_changed를 통해 나타난 파노라마 ID가 변경된 후에 비동기적으로 실행될 수 있습니다.

다음 코드는 기본 StreetViewPanorama에 관한 데이터를 수집하도록 이 이벤트를 처리하는 방법을 보여줍니다.

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

  panorama.addListener('pano_changed', function() {
      var panoCell = document.getElementById('pano-cell');
      panoCell.innerHTML = panorama.getPano();
  });

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

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

  panorama.addListener('pov_changed', function() {
      var headingCell = document.getElementById('heading-cell');
      var pitchCell = document.getElementById('pitch-cell');
      headingCell.firstChild.nodeValue = panorama.getPov().heading + '';
      pitchCell.firstChild.nodeValue = panorama.getPov().pitch + '';
  });
}
<div id="pano"></div>
<div id="floating-panel">
<table>
  <tr>
    <td><b>Position</b></td><td id="position-cell">&nbsp;</td>
  </tr>
  <tr>
    <td><b>POV Heading</b></td><td id="heading-cell">270</td>
  </tr>
  <tr>
    <td><b>POV Pitch</b></td><td id="pitch-cell">0.0</td>
  </tr>
  <tr>
    <td><b>Pano ID</b></td><td id="pano-cell">&nbsp;</td>
  </tr>
  <table id="links_table"></table>
</table>
</div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}
#pano {
  width: 50%;
  height: 100%;
  float: left;
}
#floating-panel {
  width: 45%;
  height: 100%;
  float: right;
  text-align: left;
  overflow: auto;
  position: static;
  border: 0px solid #999;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initPano">
</script>
function initPano() {
  var panorama = new google.maps.StreetViewPanorama(
      document.getElementById('pano'), {
        position: {lat: 37.869, lng: -122.255},
        pov: {
          heading: 270,
          pitch: 0
        },
        visible: true
  });

  panorama.addListener('pano_changed', function() {
      var panoCell = document.getElementById('pano-cell');
      panoCell.innerHTML = panorama.getPano();
  });

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

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

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

예시 보기(streetview-events.html).

스트리트 뷰 컨트롤

StreetViewPanorama를 표시할 때 기본적으로 파노라마에서 다양한 컨트롤이 나타납니다. StreetViewPanoramaOptions 내에서 적절한 필드를 true 또는 false로 설정하여 컨트롤을 활성화/비활성화할 수 있습니다.

  • panControl은 파노라마를 회전하는 방법을 제공합니다. 기본적으로 이 컨트롤은 표준 통합 나침반과 팬 컨트롤로 나타납니다. panControlOptions 필드 내에서 PanControlOptions을 제공하여 컨트롤 위치를 변경할 수 있습니다.
  • zoomControl은 이미지 내에서 확대/축소하는 방법을 제공합니다. 기본적으로 이 컨트롤은 파노라마 오른쪽 아래 근처에 나타납니다. zoomControlOptions 필드 내에서 ZoomControlOptions를 제공하여 컨트롤의 모양을 변경할 수 있습니다.
  • addressControl은 연결된 위치의 주소를 나타내는 텍스트 오버레이를 제공하고, Google 지도에서 위치를 여는 링크를 제공합니다. addressControlOptions 필드 내에서 StreetViewAddressControlOptions를 제공하여 컨트롤의 모양을 변경할 수 있습니다.
  • fullScreenControl은 전체 화면 모드에서 스트리트 뷰를 여는 옵션을 제공합니다. fullScreenControlOptions 필드 내에서 FullScreenAddressControlOptions를 제공하여 컨트롤의 모양을 변경할 수 있습니다.
  • motionTrackingControl은 모바일 기기에서 모션 추적을 활성화/비활성화하는 옵션을 제공합니다. 이 컨트롤은 기기 방향 이벤트를 지원하는 기기에서만 나타납니다. 기본적으로 컨트롤은 기기 오른쪽 아래 부근에 나타납니다. MotionTrackingControlOptions을 제공하여 컨트롤 위치를 변경할 수 있습니다. 자세한 내용은 모션 추적 옵션을 참조하세요.
  • linksControl은 인근 파노라마 이미지로 이동하기 위한 이미지의 안내 화살표를 제공합니다.
  • 닫기 컨트롤은 사용자가 스트리트 뷰 뷰어를 닫을 수 있게 해줍니다. enableCloseButtontrue 또는 false로 설정하면 닫기 컨트롤을 활성화/비활성화할 수 있습니다.

다음 예시는 연결된 스트리트 뷰에 표시된 컨트롤을 변경하고 뷰의 링크를 제거합니다.

이 예시를 전체 화면으로 보세요.

function initPano() {
  // Note: constructed panorama objects have visible: true
  // set by default.
  var panorama = new google.maps.StreetViewPanorama(
      document.getElementById('map'), {
        position: {lat: 42.345573, lng: -71.098326},
        addressControlOptions: {
          position: google.maps.ControlPosition.BOTTOM_CENTER
        },
        linksControl: false,
        panControl: false,
        enableCloseButton: false
  });
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initPano">
</script>
function initPano() {
  // Note: constructed panorama objects have visible: true
  // set by default.
  var panorama = new google.maps.StreetViewPanorama(
      document.getElementById('map'), {
        position: {lat: 42.345573, lng: -71.098326},
        addressControlOptions: {
          position: google.maps.ControlPosition.BOTTOM_CENTER
        },
        linksControl: false,
        panControl: false,
        enableCloseButton: false
  });
}

예시 보기(streetview-controls.html).

스트리트 뷰 데이터에 직접 액세스

지도/파노라마를 직접 조작하지 않고 스트리트 뷰 데이터의 가용성을 프로그래밍 방식으로 판별하거나 특정 파노라마에 관한 정보를 반환하고 싶을 수 있습니다. 이러한 경우 Google 스트리트 뷰 서비스에 저장된 데이터에 인터페이스를 저장하는 StreetViewService 객체를 사용하면 됩니다.

스트리트 뷰 서비스 요청

Google Maps API는 외부 서버를 호출해야 하므로 스트리트 뷰 서비스 액세스는 비동기식입니다. 그러므로 콜백 메서드를 전달하여 요청이 완료되면 실행해야 합니다. 이 콜백 메서드가 결과를 처리합니다.

두 가지 유형의 StreetViewService 요청을 시작할 수 있습니다.

  • StreetViewPanoRequest로 요청하면, 파노라마를 고유하게 식별하는 참조 ID에 따라 파노라마 데이터를 반환합니다. 이 참조 ID는 해당 파노라마 이미지가 유지되는 동안만 안정적입니다.
  • StreetViewLocationRequest로 요청하면, LatLng에 따라 주어진 영역 위에서 파노라마 데이터를 검색합니다.

스트리트 뷰 서비스 응답

함수 getPanorama()는 스트리트 뷰 서비스에서 결과를 검색할 때 실행할 콜백 함수가 필요합니다. 이 콜백 함수는 StreetViewPanoramaData 객체와 요청의 상태를 나타내는 StreetViewStatus 코드에서 이 순서에 따라 파노라마 데이터 집합을 반환합니다.

StreetViewPanoramaData 객체 사양에는 다음 형식의 스트리트 뷰 파노라마에 관한 메타데이터가 포함됩니다.

{
  "location": {
    "latLng": LatLng,
    "description": string,
    "pano": string
  },
  "copyright": string,
  "links": [{
      "heading": number,
      "description": string,
      "pano": string,
      "roadColor": string,
      "roadOpacity": number
    }],
  "tiles": {
    "worldSize": Size,
    "tileSize": Size,
    "centerHeading": number
  }
}

이 데이터 객체는 StreetViewPanorama 객체가 아니라는 점에 유의하세요. 이 데이터를 사용하여 스트리트 뷰 객체를 생성할 때는 StreetViewPanorama를 생성하고 setPano()를 호출하여, 반환된 location.pano 필드에 기록된 ID에 이를 전달해야 합니다.

status 코드는 다음 값 중 하나를 반환합니다.

  • OK는 서비스가 일치하는 파노라마를 찾았음을 나타냅니다.
  • ZERO_RESULTS는 서비스가 전달된 기준에 맞는 파노라마를 찾지 못했음을 나타냅니다.
  • UNKNOWN_ERROR는 스트리트 뷰 요청을 처리할 수 없지만, 정확한 이유는 알 수 없음을 나타냅니다.

다음 코드는 클릭했을 때 해당 위치의 StreetViewPanorama를 표시하는 마커를 생성하는 방식으로, 지도에서 사용자 클릭에 반응하는 StreetViewService를 생성합니다. 이 코드는 서비스에서 반환된 StreetViewPanoramaData의 콘텐츠를 사용합니다.

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

var map;
var panorama;

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

  panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'));

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

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

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

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

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

    marker.addListener('click', function() {
      var markerPanoID = data.location.pano;
      // Set the Pano to use the passed panoID.
      panorama.setPano(markerPanoID);
      panorama.setPov({
        heading: 270,
        pitch: 0
      });
      panorama.setVisible(true);
    });
  } else {
    console.error('Street View data not found for this location.');
  }
}
<div id="map" style="width: 45%; height: 100%;float:left"></div>
<div id="pano" style="width: 45%; height: 100%;float:left"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
/*
 * Click the map to set a new location for the Street View camera.
 */

var map;
var panorama;

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

  panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'));

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

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

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

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

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

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

예시 보기(streetview-service.html).

사용자 지정 스트리트 뷰 파노라마 제공

Google Maps JavaScript API는 StreetViewPanorama 객체에서 사용자 지정 파노라마 표시를 지원합니다. 사용자 지정 파노라마를 사용하면, 건물 내부를 표시하거나, 경치가 좋은 위치를 보거나, 여러분이 상상하는 다양한 기능을 제공할 수 있습니다. 사용자 지정 파노라마를 Google의 기존 스트리트 뷰 파노라마와 링크할 수도 있습니다.

사용자 지정 파노라마 이미지 집합을 설정하려면 다음 단계를 따릅니다.

  • 각 사용자 지정 파노라마에 기본 파노라마 이미지를 생성합니다. 이 기본 이미지는 이미지를 확대했을 때 최대 해상도 이미지여야 합니다.
  • (선택 항목이지만 권장) 기본 이미지에서 다양한 확대/축소 수준으로 파노라마 타일 집합을 생성합니다.
  • 사용자 지정 파노라마 간의 링크를 생성합니다.
  • (선택 항목) Google의 기존 스트리트 뷰 이미지 내에 "진입" 파노라마를 지정하고 사용자 지정 집합과 표준 집합의 링크를 사용자 지정합니다.
  • StreetViewPanoramaData 객체 내에서 각 파노라마 이미지의 메타데이터를 정의합니다.
  • 사용자 지정 파노라마 데이터와 이미지를 판별하는 메서드를 구현하고, 해당 메서드를 StreetViewPanorama 객체 내에서 사용자 지정 핸들러로 지정합니다.

다음 섹션은 이 과정을 설명합니다.

사용자 지정 파노라마 생성

스트리트 뷰의 각 파노라마는 단일 이미지 또는 이미지 집합이며, 단일 위치에서 완전한 360도 뷰를 제공합니다. StreetViewPanorama 객체는 정방형(Plate Carrée) 프로젝션을 준수하는 이미지를 사용합니다. 이러한 프로젝션에는 360도 가로 뷰(완전한 래핑)와180도 세로 뷰(위에서 아래로 수직)가 포함됩니다. 이 시야각은 가로 세로 비가 2:1인 이미지를 나타냅니다. 아래는 전체 래핑 파노라마입니다.

일반적으로 파노라마 이미지는 한 위치에서 여러 사진을 찍어서 파노라마 소프트웨어로 붙이는 방식으로 만듭니다. (자세한 정보는 Wikipedia의 사진 스티칭 애플리케이션 비교를 참조하세요.) 이런 이미지는 각 파노라마 이미지를 촬영한 하나의 "카메라" 중심을 공유해야 합니다. 그 결과 얻어지는 360도 파노라마는 이미지가 구체의 2차원 표면에 래핑된 프로젝션을 정의할 수 있습니다.

직선 좌표계로 파노라마를 구체 위의 프로젝션으로 처리하는 방식은 이미지를 직선 타일로 나누고 계산된 타일 좌표를 기반으로 이미지를 제공할 때 유용합니다.

사용자 지정 파노라마 타일 생성

스트리트 뷰는 기본 뷰에서 확대/축소할 수 있는 확대/축소 컨트롤을 사용하여 다양한 수준의 이미지 상세정보를 지원합니다. 일반적으로 스트리트 뷰는 주어진 파노라마 이미지에 대해 5가지 수준의 확대/축소 해상도를 제공합니다. 단일 파노라마 이미지를 사용하여 모든 확대/축소 수준을 제공한 경우, 이러한 이미지는 용량이 상당히 커서 애플리케이션 속도를 크게 저하시키거나, 해상도가 낮아서 확대/축소 수준을 올리면 심하게 모자이크화된 이미지를 제공할 가능성이 높습니다. 그러나 다행히도 다양한 확대/축소 수준에서 Google의 지도 타일을 제공하는 데 사용했던 것과 유사한 디자인 패턴으로 각 확대/축소 수준의 파노라마에 적절한 해상도의 이미지를 제공할 수 있습니다.

먼저 StreetViewPanorama를 로드하면, 기본적으로 확대/축소 수준 1에서 파노라마 수평 너비의 25%(호의 90도)로 구성된 이미지를 표시합니다. 1. 이 뷰는 보통 사람의 시야와 대략 일치합니다. 기본적으로 이 기본 뷰에서 "축소"하면 호가 더 넓어지고 , 확대하면 시야각이 더 작은 호로 줄어듭니다. StreetViewPanorama는 선택된 확대/축소 수준에서 적절한 시야를 자동으로 계산하고, 수평 시야각의 치수와 대략적으로 일치하는 타일 집합을 선택하여 그 해상도에 가장 적합한 이미지를 선택합니다. 다음은 스트리트 뷰 확대/축소 수준에 대한 시야각 지도입니다.

스트리트 뷰 확대/축소 수준 시야각(도)
0 180
1(기본값) 90
2 45
3 22.5
4 11.25

스트리트 뷰에서 표시하는 이미지 크기는 전적으로 스트리트 뷰 컨테이너의 화면 크기(너비)에 따라 달라집니다. 더 넓은 컨테이너를 제공하면 서비스는 그 해상도에 더욱 적합한 타일을 선택할 수 있지만, 계속 주어진 확대/축소 수준에 대해 동일한 시야각을 제공할 것입니다.

각 파노라마는 정방형 프로젝션으로 구성되므로, 파노라마 타일을 생성하는 것은 비교적 쉽습니다. 시야각이 정사각형이기 때문에 정사각형 타일이 정사각형 지도에서 더 나은 성능을 제공할 수 있지만, 프로젝션이 가로세로 비율이 2:1인 이미지를 제공하므로, 2:1 비율인 타일을 사용하기가 더 쉽습니다.

2:1 타일의 경우, 전체 파노라마를 포괄하는 단일 이미지가 확대/축소 수준 0에서 전체 파노라마 "세계"(기본 이미지)를 나타내고, 확대/축소 수준이 올라갈 때마다 4zoomLevel 타일을 제공합니다. (예를 들어, 확대/축소 수준 2에서 전체 파노라마는 16개 타일로 구성됩니다.) 참고: 스트리트 뷰 타일링에서 확대/축소 수준은 스트리트 뷰 컨트롤을 사용하여 제공되는 확대/축소 수준과 정확히 일치하지 않습니다. 대신 스트리트 뷰 컨트롤 확대/축소 수준은 시야각(FoV)을 선택하고, 여기서 적절한 타일이 선택됩니다.

일반적으로 프로그래밍 방식으로 선택할 수 있도록 이미지 타일에 이름을 부여하는 것이 좋습니다. 이러한 이름 지정 구성표는 아래의 사용자 지정 파노라마 요청 처리에 설명되어 있습니다.

사용자 지정 파노라마 요청 처리

사용자 지정 파노라마 사용은 StreetViewPanoramaOptions panoProvider 필드에 사용자 지정 파노라마 메서드를 등록하거나 StreetViewPanorama.registerPanoProvider()를 명시적으로 호출하여 나타냅니다. 파노라마 제공자 메서드는 StreetViewPanoramaData 객체를 반환하는 함수이고, 다음 서명을 포함합니다.

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

StreetViewPanoramaData는 다음 형식의 객체입니다.

{
  copyright: string,
  location: {
    description: string,
    latLng: google.maps.LatLng,
    pano: string
  },
  tiles: {
    tileSize: google.maps.Size,
    worldSize: google.maps.Size,
    heading: number,
    getTileUrl: Function
  },
  links: [
    description: string,
    heading: number,
    pano: string,
    roadColor: string,
    roadOpacity: number
  ]
}

StreetViewPanoramapano 속성을 사용자 지정 값으로 설정하고 panoProvider를 설정합니다. 그 다음 사용자 지정 파노라마 제공자 메서드에서 해당 사용자 지정 pano 값을 처리하고 StreetViewPanoramaData 객체를 생성한 뒤 반환하면 사용자 지정 파노라마를 표시할 수 있습니다.

참고: 사용자 지정 파노라마를 표시하고자 할 때 StreetViewPanorama에서 직접 position을 설정하지 마십시오. 이렇게 위치를 지정하면 스트리트 뷰 서비스가 해당 위치에 가까운 기본 스트리트 뷰 이미지를 요청합니다. 그 대신, 사용자 지정 StreetViewPanoramaDatalocation.latLng 필드에서 위치를 설정합니다.

다음 예시는 Google 시드니 사무소의 사용자 지정 파노라마를 표시합니다. 여기서는 지도(또는 기본 스트리트 뷰 이미지)를 전혀 사용하지 않았습니다.

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

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

// Construct the appropriate StreetViewPanoramaData given
// the passed pano IDs.
function getCustomPanorama(pano, zoom, tileX, tileY) {
  if (pano === 'reception') {
    return {
      location: {
        pano: 'reception',
        description: 'Google Sydney - Reception'
      },
      links: [],
      // The text for the copyright control.
      copyright: 'Imagery (c) 2010 Google',
      // The definition of the tiles for this panorama.
      tiles: {
        tileSize: new google.maps.Size(1024, 512),
        worldSize: new google.maps.Size(1024, 512),
        // The heading in degrees at the origin of the panorama
        // tile set.
        centerHeading: 105,
        getTileUrl: getCustomPanoramaTileUrl
      }
    };
  }
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initPano">
</script>
function initPano() {
  // Set up Street View and initially set it visible. Register the
  // custom panorama provider function. Set the StreetView to display
  // the custom panorama 'reception' which we check for below.
  var panorama = new google.maps.StreetViewPanorama(
    document.getElementById('map'), {
      pano: 'reception',
      visible: true,
      panoProvider: getCustomPanorama
  });
}

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

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

예시 보기(streetview-custom-simple.html).

이전 예시에서 하나의 이미지만 반환했고, 그 이미지를 사용하여 확대하면 해상도가 낮아졌다는 점에 유의하세요. 대신, 타일 이미지를 생성하고 panoProvider를 수정해서 전달된 파노라마 ID와 확대/축소 수준, 파노라마 타일 좌표에 따라 적절한 타일을 반환하는 방식으로 타일 집합을 제공할 수 있었습니다.

이미지 선택은 이러한 전달된 값에 따라 달라지므로, pano_zoom_tileX_tileY.png 등의 전달된 값에 따라 프로그래밍 방식으로 선택할 수 있는 이미지 이름을 지정하면 유용합니다.

다음 예시는 두 가지 확대/축소 수준을 포함하기 위해 약간 보완했습니다. 또한, 기본 스트리트 뷰 탐색 화살표와 더불어 이미지에 다른 화살표를 추가합니다. 이 화살표는 Google 시드니를 가리키고 사용자 지정 이미지에 링크됩니다.

var panorama;

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

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

function initPanorama() {
  panorama = new google.maps.StreetViewPanorama(
      document.getElementById('street-view'),
      {
        pano: outsideGoogle.location.pano,
        // Register a provider for our custom panorama.
        panoProvider: function(pano) {
          if (pano === 'reception') {
            return getReceptionPanoramaData();
          }
        }
      });

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

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

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

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

function initPanorama() {
  panorama = new google.maps.StreetViewPanorama(
      document.getElementById('street-view'),
      {
        pano: outsideGoogle.location.pano,
        // Register a provider for our custom panorama.
        panoProvider: function(pano) {
          if (pano === 'reception') {
            return getReceptionPanoramaData();
          }
        }
      });

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

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

예시 보기(streetview-custom-tiles.html).

다음에 대한 의견 보내기...

Google Maps JavaScript API
Google Maps JavaScript API
도움이 필요하시나요? 지원 페이지를 방문하세요.