Menampilkan Google Street View pada Website

Google Street View adalah sebuah fitur pada Google Maps yang diluncurkan tahun 2007 dan menyediakan pemandangan jalan 360° dan membolehkan pengguna melihat bagian dari kota pilihan mereka dan wilayah metropolitan sekitarnya pada tingkat dasar. Ketika diluncurkan tanggal 25 Mei 2007, hanya lima kota yang dimasukkan. Kemudian berkembang ke lebih dari 40 kota AS, dan meliputi pinggiran kota, dan kota-kota terdekat dan sekarang sudah sangat luas.

Google Map sendiri juga menyediakan layanan Street View untuk digunakan oleh para pengembang aplikasi dengan menggunakan API Google Map. Oleh karena itu sekarang kita akan coba menerapkan google street view pada sebuah halaman web.

Tentu sebelumnya kita wajib memiliki API KEY yang bisa didapatkan dengan mengikuti tutorial yang telah saya buat yang berjudul Cara mendapatkan API_KEY Google Map.

Jika sudah sekarang kita buat satu file dengan nama index.html lalu copy kode di bawah ini kedalamnya

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Street View</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #street-view {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="street-view"></div>
    <script>
      var panorama;
      function initialize() {
        panorama = new google.maps.StreetViewPanorama(
            document.getElementById('street-view'),
            {
              position: {lat: -6.169063, lng: 106.784694},
              pov: {heading: 165, pitch: 0},
              zoom: 1
            });
      }
    </script>
    <script async defer
         src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize">
    </script>
  </body>
</html>

Untuk menerapkan kode diatas kita perlu memberikan API_KEY yang harus diletakan pada tulisan YOUR_API_KEY yang ada diatas.

Baiklah teman-teman demikian artikel kali ini yang membahas tentang cara menampilkan google street view pada website.

baca juga artikel saya tentang fitur keren google map yang membuat kit bisa menampilkan navigasi pada halaman website kita dengan membaca artikel saya yang berjudul Cara membuat Penunjuk Jalan dengan API Google Map .

Semoga bermanfaat.

1 Agustus 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat