Anda sudah siap!

Untuk mulai mengembangkan, masuklah ke dokumentasi developer kami.

Aktifkan Google Maps JavaScript API

Untuk membantu Anda memulai, kami akan memandu Anda melalui Google Developers Console untuk melakukan beberapa hal terlebih dahulu:

  1. Buat atau pilih sebuah proyek
  2. Aktifkan Google Maps JavaScript API dan layanan terkait
  3. Buat kunci yang sesuai
Lanjutkan

Layanan Street View

Ringkasan

Google Street View menyediakan tampilan panorama 360 derajat dari jalan yang dipilih sampai area cakupan. Cakupan API Street View sama dengan cakupan untuk aplikasi Google Maps (https://maps.google.com/). Daftar kota yang saat ini didukung untuk Street View tersedia di situs web Google Maps.

Contoh gambar Street View ditampilkan di bawah ini.


Google Maps JavaScript API menyediakan layanan Street View untuk memperoleh dan memanipulasi gambar yang digunakan dalam Google Maps Street View. Layanan Street View ini didukung secara bawaan dalam browser.

Penggunaan Peta Street View

Meskipun bisa digunakan dalam elemen DOM mandiri, Street View paling berguna saat menunjukkan lokasi pada peta. Secara default, Street View diaktifkan pada peta, dan kontrol Pegman Street View akan muncul terintegrasi dalam navigasi kontrol (zoom dan pan). Anda bisa menyembunyikan kontrol ini dalam MapOptions peta dengan menyetel streetViewControl ke false. Anda juga bisa mengubah posisi default kontrol Street View dengan menyetel properti streetViewControlOptions.position dari Map ke ControlPosition yang baru.

Kontrol Pegman Street View memungkinkan Anda menampilkan panorama Street View secara langsung dalam peta. Bila pengguna mengeklik dan memegang Pegman, peta akan diperbarui dengan menampilkan garis luar biru di sekeliling jalan yang berkemampuan Street View, sehingga menawarkan pengalaman pengguna yang mirip dengan aplikasi Google Maps.

Bila pengguna meletakkan marker Pegman ke jalan, peta akan diperbarui dengan menampilkan panorama Street View dari lokasi yang ditunjukkan.

Panorama Street View

Gambar Street View didukung melalui penggunaan objek StreetViewPanorama, yang menyediakan antarmuka API ke "penampil" Street View. Setiap peta berisi panorama Street View default, yang bisa Anda ambil dengan memanggil metode getStreetView() peta. Bila Anda menambahkan kontrol Street View ke peta dengan menyetel opsi streetViewControl ke true, Anda secara otomatis menghubungkan kontrol Pegman ke panorama Street View default ini.

Anda juga bisa membuat objek StreetViewPanorama sendiri dan menyetel peta yang akan menggunakannya sebagai ganti default, dengan menyetel properti streetView peta secara eksplisit ke objek yang dibuat itu. Anda mungkin perlu mengesampingkan panorama default jika ingin memodifikasi perilaku default, seperti berbagi overlay otomatis antara peta dan panorama. (Lihat Overlay dalam Street View di bawah ini.)

Kontainer Street View

Sebagai gantinya, Anda mungkin perlu menampilkan StreetViewPanorama dalam elemen DOM terpisah, sering kali merupakan elemen <div>. Cukup teruskan elemen DOM dalam konstruktor StreetViewPanorama. Agar tampilan gambar optimal, kami menyarankan ukuran minimum 200 piksel kali 200 piksel.

Catatan: meskipun fungsionalitas Street View didesain untuk diguna bersama peta, penggunaan ini tidak diharuskan. Anda bisa menggunakan objek Street View yang berdiri sendiri tanpa peta.

Lokasi Street View dan Point-of-View (POV)

Konstruktor StreetViewPanorama juga memungkinkan Anda menyetel lokasi Street View dan sudut pandang menggunakan parameter StreetViewOptions. Anda bisa memanggil setPosition() dan setPov() pada objek setelah konstruksi untuk mengubah lokasinya dan POV.

Lokasi Street View mendefinisikan penempatan fokus kamera untuk sebuah gambar, namun tidak mendefinisikan orientasi kamera untuk gambar tersebut. Untuk keperluan itu, objek StreetViewPov mendefinisikan dua properti:

  • heading (default 0) mendefinisikan sudut rotasi sekeliling lokus kamera dalam derajat dari utara sebenarnya. Heading atau arah tujuan diukur searah jarum jam (90 derajat adalah timur sebenarnya).
  • pitch (default 0) mendefinisikan varian sudut "atas" atau "bawah" dari pitch default awal kamera, yang sering kali (namun tidak selalu) horizontal datar. (Misalnya, gambar yang diambil dari atas bukit kemungkinan akan menampilkan pitch default yang tidak horizontal.) Sudut pitch diukur dengan nilai-nilai positif yang mengarah ke atas (ke +90 derajat lurus ke atas dan ortogonal ke pitch default) dan nilai-nilai negatif mengarah ke bawah (ke -90 derajat lurus ke bawah dan ortogonal ke pitch default).

Objek StreetViewPov paling sering digunakan untuk menentukan sudut pandang kamera Street View. Anda juga bisa menentukan sudut pandang fotografer — biasanya arah menghadap mobil atau trike — dengan metode StreetViewPanorama.getPhotographerPov().

Kode berikut menampilkan peta Boston dengan tampilan awal dari Fenway Park. Memilih Pegman dan menyeretnya ke lokasi didukung pada peta akan mengubah panorama Street View:

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

Tampilkan contoh (streetview-simple.html).

Pelacakan gerak pada perangkat seluler

Pada perangkat yang mendukung kejadian orientasi perangkat, API menawarkan pengguna kemampuan untuk mengubah sudut pandang Street View berdasarkan pergerakan perangkat. Pengguna bisa melihat sekeliling mereka dengan menggerakkan perangkat. Ini disebut pelacakan gerak atau pelacakan rotasi perangkat.

Sebagai developer aplikasi, Anda bisa mengubah perilaku default sebagai berikut:

  • Mengaktifkan atau menonaktifkan fungsionalitas pelacakan gerak. Secara default, pelacakan gerak diaktifkan pada perangkat yang mendukungnya. Contoh berikut menonaktifkan pelacakan gerak, namun membiarkan kontrol pelacakan gerak tetap terlihat. (Perhatikan bahwa pengguna bisa mengaktifkan pelacakan gerak dengan mengetuk kontrol.)
    var panorama = new google.maps.StreetViewPanorama(
        document.getElementById('pano'), {
          position: {lat: 37.869260, lng: -122.254811},
          pov: {heading: 165, pitch: 0},
          motionTracking: false
        });
    
  • Menyembunyikan atau menampilkan kontrol pelacakan gerak. Secara default, kontrol akan ditampilkan pada perangkat yang mendukung pelacakan gerak. Pengguna bisa mengetuk kontrol untuk mengaktifkan atau menonaktifkan pelacakan gerak. Perhatikan bahwa kontrol tidak akan pernah muncul jika perangkat tidak mendukung pelacakan gerak, terlepas dari nilai motionTrackingControl.

    Contoh berikut menonaktifkan pelacakan gerak dan kontrol pelacakan gerak. Dalam hal ini, pengguna tidak bisa mengaktifkan pelacakan gerak pada:

    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
        });
    
  • Mengubah posisi default dari kontrol pelacakan gerak. Secara default, kontrol terlihat di bagian kanan bawah panorama (posisi RIGHT_BOTTOM). Contoh berikut menyetel posisi kontrol ke bagian kiri bawah:
    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
          }
        });
    

Untuk melihat pelacakan gerak beraksi, lihatlah contoh berikut pada perangkat seluler (atau perangkat yang mendukung kejadian orientasi perangkat):


Tampilkan contoh pada laman yang baru (streetview-embed.html).

Overlay dalam Street View

Objek StreetViewPanorama default mendukung tampilan bawaan overlay peta. Overlay biasanya muncul pada "tingkat jalan" yang ditambatkan pada posisi LatLng. (Misalnya, marker akan muncul dengan ekor ditambatkan ke bidang horizontal lokasi dalam panorama Street View.)

Saat ini, tipe overlay yang didukung pada panorama Street View terbatas pada Marker, InfoWindow dan OverlayView khusus. Overlay yang Anda tampilkan pada peta akan ditampilkan pada panorama Street View dengan memperlakukan panorama sebagai pengganti objek Map, dengan memanggil setMap() dan meneruskan StreetViewPanorama sebagai argumen yang menggantikan peta. Demikian pula, jendela info bisa dibuka dalam panorama Street View dengan memanggil open(), meneruskan StreetViewPanorama() sebagai ganti peta.

Selain itu, saat membuat peta dengan StreetViewPanorama default, setiap marker yang dibuat pada peta secara otomatis akan digunakan bersama panorama Street View yang telah dikaitkan dengan peta, asalkan panorama terlihat. Untuk mengambil panorama Street View default, panggil getStreetView() pada objek Map. Perhatikan, jika Anda secara eksplisit menyetel properti streetView peta ke StreetViewPanorama buatan sendiri, Anda akan menggantikan panorama default dan menonaktifkan penggunaan overlay bersama secara otomatis.

Contoh berikut menampilkan marker yang menunjukkan berbagai lokasi di sekitar Astor Place, New York City. Ubah tampilan ke Street View untuk menampilkan marker bersama yang ditampilkan dalam 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);
  }
}

Tampilkan contoh (streetview-overlays.html).

Kejadian Street View

Saat menyusuri Street View atau memanipulasi orientasinya, Anda mungkin perlu memantau beberapa kejadian yang menunjukkan perubahan status StreetViewPanorama:

  • pano_changed akan dipicu setiap kali ID panorama individual berubah. Kejadian ini tidak menjamin bahwa data terkait dalam panorama (seperti tautan) juga akan berubah pada saat kejadian ini dipicu; kejadian ini hanya menunjukkan ID panorama telah berubah. Perhatikan, ID panorama (yang bisa Anda gunakan untuk mereferensikan panorama ini) hanya stabil dalam sesi browser saat ini.
  • position_changed akan dipicu setiap kali posisi dasar (LatLng) panorama berubah. Memutar panorama tidak akan memicu kejadian ini. Perhatikan, Anda bisa mengubah posisi dasar panorama tanpa mengubah ID panorama yang dikaitkan, karena API akan secara otomatis mengaitkan ID panorama terdekat dengan posisi panorama.
  • pov_changed akan dipicu setiap kali StreetViewPov Street View berubah. Perhatikan, kejadian ini mungkin saja dipicu walaupun posisi, dan ID panorama, tetap stabil.
  • links_changed akan dipicu bila tautan Street View berubah. Perhatikan, kejadian ini mungkin terpicu secara asinkron setelah perubahan dalam ID panorama yang ditunjukkan melalui pano_changed.
  • visible_changed akan dipicu setiap kali visibilitas Street View berubah. Perhatikan, kejadian ini mungkin terpicu secara asinkron setelah perubahan dalam ID panorama yang ditunjukkan melalui pano_changed.

Kode berikut mengilustrasikan cara menangani kejadian ini untuk mengumpulkan data tentang StreetViewPanorama yang mendasarinya:

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

Tampilkan contoh (streetview-events.html).

Kontrol Street View

Saat menampilkan StreetViewPanorama, berbagai kontrol akan muncul pada panorama secara default. Anda bisa mengaktifkan atau menonaktifkan kontrol ini dengan menyetel bidang yang sesuai dalam StreetViewPanoramaOptions ke true atau false:

  • panControl menyediakan cara memutar panorama. Kontrol ini muncul secara default sebagai kompas standar yang terintegrasi dan kontrol pan. Anda bisa mengubah posisi kontrol dengan menyediakan PanControlOptions dalam bidang panControlOptions.
  • zoomControl menyediakan cara zoom dalam gambar. Kontrol ini muncul secara default dekat bagian kanan bawah panorama. Anda bisa mengubah penampilan kontrol dengan menyediakan ZoomControlOptions dalam bidang zoomControlOptions.
  • addressControl menyediakan overlay tekstual yang menunjukkan alamat lokasi terkait, dan menawarkan tautan untuk membuka lokasi tersebut di Google Maps. Anda bisa mengubah penampilan kontrol dengan menyediakan StreetViewAddressControlOptions dalam bidang addressControlOptions.
  • fullscreenControl menawarkan opsi untuk membuka Street View dalam mode layar penuh. Anda bisa mengubah penampilan kontrol dengan menyediakan FullscreenControlOptions dalam bidang fullscreenControlOptions.
  • motionTrackingControl menawarkan opsi untuk mengaktifkan atau menonaktifkan pelacakan gerak pada perangkat seluler. Kontrol ini hanya terlihat pada perangkat yang mendukung kejadian orientasi perangkat. Secara default, kontrol terlihat di bagian kanan bawah panorama. Anda bisa mengubah posisi kontrol dengan memberikan MotionTrackingControlOptions. Untuk informasi selengkapnya, lihat bagian pelacakan gerak.
  • linksControl menyediakan panah pemandu pada gambar untuk beralih ke gambar panorama yang bersebelahan.
  • Kontrol Close memungkinkan pengguna menutup penampil Street View. Anda bisa mengaktifkan atau menonaktifkan kontrol Close dengan menyetel enableCloseButton ke true atau false.

Contoh berikut mengubah kontrol yang ditampilkan dalam Street View terkait dan membuang tautan tampilan:

Tampilkan contoh ini selayar penuh.

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

Tampilkan contoh (streetview-controls.html).

Mengakses Data Street View Secara Langsung

Anda mungkin perlu menentukan ketersediaan data Street View lewat program, atau mengembalikan informasi tentang panorama tertentu, tanpa harus melakukan manipulasi langsung pada peta/panorama. Anda bisa melakukannya dengan menggunakan objek StreetViewService, yang menyediakan antarmuka ke data yang disimpan di layanan Google Street View.

Permintaan Layanan Street View

Akses layanan Street View bersifat asinkron, karena Google Maps API perlu membuat panggilan ke server eksternal. Karena itu, Anda perlu meneruskan metode callback untuk dieksekusi setelah permintaan diselesaikan. Metode callback ini akan memproses hasilnya.

Anda bisa membuat dua tipe permintaan ke StreetViewService:

  • Permintaan yang berisi StreetViewPanoRequest, ini mengembalikan data panorama dengan ID referensi yang secara unik mengidentifikasi panorama. Perhatikan, ID referensi ini hanya stabil selama penggunaan gambar panorama tersebut.
  • Permintaan yang berisi StreetViewLocationRequest, ini menelusuri data panorama pada area yang teretnua, yang diberikan dengan meneruskan LatLng.

Respons Layanan Street View

<Fungsi getPanorama() membutuhkan fungsi callback untuk dieksekusi saat pengambilan hasil dari layanan Street View. Fungsi callback ini mengembalikan satu set data panorama dalam objek StreetViewPanoramaData dan kode StreetViewStatus yang menunjukkan status permintaan, dalam urutan itu.

Spesifikasi objek StreetViewPanoramaData berisi metadata tentang panorama Street View dengan bentuk berikut:

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

Perhatikan, objek data ini bukan objek StreetViewPanorama itu sendiri. Untuk membuat objek Street View menggunakan data ini, Anda perlu membuat StreetViewPanorama dan memanggil setPano(), dengan meneruskan ID yang disebutkan dalam bidang location.pano yang dikembalikan.

Kode status mungkin mengembalikan salah satu nilai berikut:

  • OK menunjukkan layanan telah menemukan panorama yang cocok.
  • ZERO_RESULTS menunjukkan layanan tidak bisa menemukan panorama yang cocok dengan kriteria yang diteruskan.
  • UNKNOWN_ERROR menunjukkan permintaan Street View tidak bisa diproses, meskipun alasan yang sebenarnya tidak diketahui.

Kode berikut akan membuat StreetViewService yang merespons klik pengguna pada peta dengan membuat marker yang, bila diklik, akan menampilkan StreetViewPanorama lokasi itu. Kode ini menggunakan materi StreetViewPanoramaData yang dikembalikan dari layanan.

/*
 * 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.');
  }
}

Tampilkan contoh (streetview-service.html).

Menyediakan Panorama Street View Custom

Google Maps JavaScript API mendukung tampilan panorama khusus dalam objek StreetViewPanorama. Dengan panorama khusus, Anda bisa menampilkan interior bangunan, yang dilihat dari lokasi menarik, atau apa saja yang Anda bayangkan. Anda bahkan bisa menautkan panorama khusus ini ke panorama Street View Google yang ada.

Menyiapkan set gambar panorama khusus memerlukan langkah-langkah berikut:

  • Buat gambar panorama dasar untuk setiap panorama khusus. Gambar dasar ini harus berada pada gambar beresolusi tertinggi yang akan Anda gunakan untuk menyajikan gambar yang diperbesar.
  • (Opsional, namun disarankan) Buat satu rangkaian petak panorama pada tingkat zoom berbeda dari gambar dasar.
  • Buat tautan antar panorama khusus Anda.
  • (Opsional) Tentukan panorama "entri" dalam gambar Street View Google yang ada dan sesuaikan tautan ke/dari set khusus ke set standar.
  • Definisikan metadata untuk setiap gambar panorama dalam objek StreetViewPanoramaData.
  • Implementasikan metode yang menentukan data panorama serta gambar khusus dan tetapkan metode itu sebagai penangan khusus Anda dalam objek StreetViewPanorama.

Bagian berikut menjelaskan proses ini.

Membuat Panorama Khusus

Setiap panorama Street View adalah gambar, atau serangkaian gambar, yang memberikan tampilan penuh 360 derajat dari satu lokasi. Objek StreetViewPanorama menggunakan gambar yang sesuai dengan persyaratan proyeksi equirectangular (Plate Carrée). Proyeksi tersebut berisi tampilan horizontal 360 (satu putaran penuh) dan tampilan vertikal 180 derajat (dari lurus ke atas sampai lurus ke bawah). Bidang pandang ini menghasilkan sebuah gambar dengan rasio aspek 2:1. Panorama tampilan-penuh ditunjukkan di bawah ini.

Gambar panorama biasanya diperoleh dengan mengambil beberapa foto dari satu posisi dan menggabungnya menggunakan perangkat lunak panorama. (Lihat Wikipedia Perbandingan aplikasi penggabung foto untuk informasi selengkapnya.) Gambar-gambar tersebut harus menggunakan satu lokus "kamera", yang menjadi tempat pengambilan gambar panorama. Panorama 360 derajat yang dihasilkan kemudian bisa mendefinisikan proyeksi pada bola dunia dengan gambar yang dibalutkan ke permukaan bola dunia dua dimensi tersebut.

Menangani panorama sebagai proyeksi pada bola dunia dengan sistem koordinat garis lurus akan menguntungkan saat membagi gambar menjadi petak garis lurus, dan menyajikan gambar berdasarkan koordinat petak yang telah dihitung.

Membuat Petak Panorama Khusus

Street View juga mendukung berbagai tingkat detail gambar melalui penggunaan kontrol zoom, yang memungkinkan Anda memperbesar dan memperkecil dari tampilan default. Biasanya, Street View menyediakan lima tingkat resolusi zoom untuk setiap gambar panorama yang diberikan. Jika Anda mengandalkan satu gambar panorama untuk menyajikan semua tingkat zoom, gambar demikian akan sangat besar dan sangat memperlambat aplikasi Anda, atau akan memiliki resolusi yang rendah di tingkat zoom yang lebih tinggi sehingga gambar yang diperoleh akan mengalami pikselasi yang buruk. Akan tetapi, untung saja kita bisa menggunakan pola desain yang mirip dengan yang digunakan untuk menyajikan petak peta Google pada tingkat zoom berbeda untuk memberikan gambar resolusi yang sesuai bagi panorama di setiap tingkat zoom.

Saat StreetViewPanorama pertama kali dimuat, itu secara default akan menampilkan gambar yang terdiri dari 25% (90 derajat busur) dari luas horizontal panorama pada tingkat zoom 1. Tampilan ini kurang-lebih menyatakan bidang pandang manusia normal. "Memperbesar" dari tampilan default ini pada dasarnya akan memberikan busur yang lebih lebar, sedangkan bila diperkecil akan mempersempit bidang pandang ke busur yang lebih kecil. StreetViewPanorama secara otomatis menghitung bidang pandang yang sesuai untuk tingkat zoom yang dipilih, kemudian memilih gambar yang paling tepat untuk resolusi itu dengan memilih satu set petak yang kurang-lebih cocok dengan dimensi bidang pandang horizontal. Bidang pandang berikut ini dipetakan ke beberapa tingkat zoom Street View:

Tingkat zoom Street View Bidang pandang (derajat)
0 180
1 (default) 90
2 45
3 22,5
4 11,25

Perhatikan, ukuran gambar yang ditampilkan dalam Street View sepenuhnya bergantung pada ukuran layar (lebar) dari kontainer Street View. Jika Anda memberikan kontainer yang lebih luas, layanan tetap akan memberikan bidang pandang yang sama untuk setiap tingkat zoom yang diberikan, meskipun mungkin akan dipilih petak yang lebih sesuai bagi resolusi itu sebagai gantinya.

Karena setiap panorama terdiri dari proyeksi equirectangular, membuat petak panorama menjadi relatif mudah. Karena proyeksi menyediakan gambar dengan rasio aspek 2:1, petak dengan rasio 2:1 akan lebih mudah digunakan, meskipun petak segi empat bisa memberikan kinerja yang lebih baik pada peta segi empat (karena bidang pandang akan berbentuk persegi).

Untuk petak 2:1, gambar tunggal mencakup seluruh panorama yang menyatakan seluruh panorama "dunia" (gambar dasar) pada tingkat zoom 0, dengan setiap kenaikan tingkat zoom akan menawarkan 4 petak zoomLevel. (Mis. pada tingkat zoom 2, seluruh panorama terdiri dari 16 petak.) Catatan: tingkat zoom di petak Street View tidak dicocokkan langsung dengan tingkat zoom yang disediakan menggunakan kontrol Street View; sebagai gantinya, kontrol tingkat zoom Street View akan memilih Field of View (FoV), yang akan digunakan untuk pemilihan petak yang sesuai.

Biasanya, Anda perlu memberi nama petak gambar agar bisa dipilih lewat program. Skema penamaan tersebut dibahas di bawah ini dalam Menangani Permintaan Panorama Khusus.

Menangani Permintaan Panorama Khusus

Penggunaan Panorama khusus ditunjukkan dengan mendaftarkan metode panorama khusus dalam bidang StreetViewPanoramaOptions panoProvider atau secara eksplisit dengan memanggil StreetViewPanorama.registerPanoProvider(). Metode penyedia panorama adalah fungsi yang mengembalikan objek StreetViewPanoramaData dan memiliki tanda tangan berikut ini:

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

StreetViewPanoramaData adalah objek dengan bentuk berikut:

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

Anda bisa menampilkan panorama khusus cukup dengan menyetel properti pano StreetViewPanorama ke nilai khusus, menyetel panoProvider, kemudian menangani nilai pano khusus itu dalam metode penyedia panorama khusus, dengan membangun objek StreetViewPanoramaData dan mengembalikannya.

Catatan: jangan secara langsung menyetel position pada StreetViewPanorama bila Anda ingin menampilkan panorama khusus, karena posisi tersebut akan menginstruksikan layanan Street View untuk meminta gambar default Street View yang dekat dengan lokasi itu. Sebagai gantinya, setel posisi ini dalam bidang location.latLng pada StreetViewPanoramaData khusus.

Contoh berikut menampilkan Panorama khusus kantor Google di Sydney. Perhatikan, kita sama sekali tidak menggunakan peta (atau gambar Street View default) di sini:

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

Tampilkan contoh (streetview-custom-simple.html).

Perhatikan, kita hanya mengembalikan satu gambar dalam contoh sebelumnya dan perbesaran menggunakan gambar itu akan menghasilkan resolusi yang jelek. Sebagai gantinya, kita bisa menawarkan rangkaian petak dengan membuat gambar petak dan memodifikasi panoProvider untuk mengembalikan petak yang sesuai dengan ID panorama, tingkat zoom, dan koordinat petak panorama yang diberikan.

Karena pemilihan gambar bergantung pada nilai yang diteruskan, maka ada baiknya menamai gambar yang bisa dipilih lewat program melalui nilai yang diteruskan, seperti pano_zoom_tileX_tileY.png.

Contoh berikut sedikit ditambah untuk menyertakan dua tingkat zoom. Ini juga menambahkan panah lain ke gambar, sebagai tambahan untuk panah navigasi Street View default, yang menunjuk ke Google Sydney dan tautan ke gambar khusus:

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

Tampilkan contoh (streetview-custom-tiles.html).

Kirim masukan tentang...

Google Maps JavaScript API
Google Maps JavaScript API
Butuh bantuan? Kunjungi halaman dukungan kami.