() translation by (you can also view the original English article)
Melihat photo sphere (foto 360°) terasa seperti hampir berdiri di tempat di mana gambar tersebut diambil, tetapi sebagai bentuk baru dari gambar digital, sharing foto sphere menjadi hal yang masih sedikit rumit.
Dalam tutorial ini, saya akan menunjukkan cara menyematkan (embed) foto 360° Google ke halaman web. Jika ini merupakan kali pertama Anda memasukkan code ke halaman web, jangan khawatir. Kami sudah sediakan untuk Anda: kita hanya perlu mengumpulkan tiga elemen dan menyatukannya. Anda akan membutuhkan program text editor yang terbuka selama proses ini untuk paste dan mengedit teks atau cuplikan kode saat Anda menyatukannya.
Temukan atau Buat Foto Sphere.
Anda dapat mencari melalui Google Street View dan menemukan foto 360° (photo sphere) dari seluruh dunia dan menyematkannya ke blog Anda. Atau Anda dapat membuat photo sphere menggunakan smartphone atau DSLR Anda dan berkontribusi ke Google Maps. Lihat tutorial saya tentang membuat foto 360° dengan smartphone atau DSLR.
PanoramaBuat Photo Sphere dengan Kamera DSLR Anda
PanoramaGettin 'Round: Cara Membuat Gambar Spherical dengan Google Camera
Temukan Panorama ID Number
Temukan foto sphere atau panorama di Google Maps dan klik untuk melihatnya. Salin dan paste URL tersebut ke text editor Anda. Anda akan melihat bahwa URL sangat panjang dan dipecah menjadi segmen yang berbeda yang sesuai dengan bit data yang berbeda. Di suatu tempat URL panjang ini disebut Pano ID. Lihat melalui URL sampai Anda menemukan expression data =. Ini adalah petunjuk di mana untuk mulai mencari. Pano ID terletak setelah expression ini dan antara karakter !1s dan yang berikutnya ! tanda seru. Misalnya, dalam data string dalam string berikut data=!3m6!1e1!3m4!1sWijofm0bDHKz2mc4rSk-dg!2e0!7i13312!8i6656, karakter Wijofm0bDHKz2mc4rSk-dg adalah Pano ID. Salin karakter-karakter ini ke text editor Anda untuk digunakan sebagai Pano ID.
Anda juga dapat mengekstrak Pano ID menggunakan javascript. Untungnya, beberapa orang telah membuat tool online sederhana untuk kita gunakan untuk mengambil Pano ID. Panoid tool memungkinkan Anda men-drag pegman ke suatu tempat di Google Maps dan mengembalikan Pano ID di sudut kiri bawah. Salin Pano ID dan paste ke text editor Anda.
Dapatkan code Embed
Buka Google Maps Embed API dan klik pada tab Show Street View or a custom panorama.
Tempatkan Pano ID dalam kotak Custom panorama ID. Setelah Anda mengklik keluar dari kotak itu, photo sphere Anda akan muncul di preview. Jika tidak muncul, periksa kembali Pano ID.
Foto sphere harus approved dan ditambahkan ke Google Maps untuk mendapat Pano ID yang kemudian dapat digunakan.
Ketika preview foto sphere benar, salin kode embed di bagian bawah halaman dan paste ke text editor Anda.
Dapatkan API Key
Masih di Google Maps API, klik tombol Looks Good. Kemudian klik tombol Register di halaman berikutnya. Daftarkan untuk sebuah API dengan registering, reviewing, dan agreeing terhadap syarat dan ketentuan. Setelah Anda menyetujui terms-nya, project baru akan dibuat untuk Anda dan API Key akan dibuat. Anda juga akan dibawa ke developer’s console.
Di developer’s console, klik pada browser key Anda. Anda akan dibawa ke Halaman Browser API Key. Di halaman ini, salin API Key dan paste ke text editor Anda.
Ada satu kolom lagi untuk diisi sebelum Anda dapat menggunakan key Anda. Anda harus mengatur referrers (perujuk) di bidang terakhir. Referrer Anda akan menjadi situs web Anda dengan karakter wildcard (*) sebelum dan sesudahnya. Sebagai contoh: *.yoursite.com/* Ini akan memberi tahu API bahwa setiap halaman di www.yoursite.com diizinkan untuk menggunakan API tersebut. Hal ini juga membatasi situs lain menggunakan API Key Anda kecuali mereka ditambahkan di sini.
Tambahkan API Key Anda ke Embed code dengan mengganti ... di key=... dari kode Embed Anda dengan API Key Anda.
Gunakan Code Snippet untuk Embed
Jika Anda menggunakan content manager seperti Wordpress, buat laman baru atau blog post. Kemudian, klik pada tombol switch to HTML. Setelah dalam mode ini, Anda dapat memasukkan kode HTML custom. Paste kode embed dan klik tombol save. Anda dapat kembali ke mode reguler nantinya untuk menambahkan teks atau elemen lain yang Anda inginkan.
Silakan dan lihat halaman Anda. Jika photo sphere Anda muncul, bagus sekali Anda telah melakukannya! Jika tidak muncul, Anda akan melihat pesan peringatan. Pesan peringatan akan memberi tahu Anda jika Anda memiliki masalah dengan Pano ID atau dengan API Key. Jika tidak ada foto sphere atau peringatan yang muncul, masalahnya mungkin ada di code snippet-nya. Copy lagi dan paste ke halaman web Anda.
Jika Anda menggunakan Adobe Muse, klik pada menu Object dan pilih Insert HTML. Kemudian paste code snippet Anda ke dalam kotak dialog dan klik OK. Drah kotak ke lokasi yang diinginkan di halaman Anda dan ubah ukurannya menjadi 600 x 450 pixel. Untuk melihat foto sphere, Anda harus mempublikasikan situs tersebut ke web. Jadi lanjutkan dan klik Publish. Setelah dipublikasikan, menuju ke halaman dengan foto sphere tersebut untuk melihatnya.
Berikut ini adalah tampilan kode embed saya yang saya paste ke halaman saya:
<iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/streetview?pano=2k2pvtUuhek5-r110sW2Lg&key=AIzaSyB7cbSbriZYV2eW..." allowfullscreen>
Alternatif Sederhana
Cara sederhana untuk embed atau menyematkan foto sphere adalah dengan embed Google+ post di situs Anda. Poskan foto sphere Anda ke Google+. Cara ini akan menampilkannya sebagai foto sphere dan memungkinkan siapa saja yang mengeklik gambar untuk mendapatkan pengalaman foto sphere atau foto 360° yang imersif.
Arahkan kursor ke postingan tersebut dan klik menu panah. Dari menu ini pilih Embed Post. Layar akan muncul dengan kode embed. Cukup salin dan paste ke salah satu halaman situs web Anda. Kemudian. Postingan Anda yang berisi photosphere Anda sekarang akan ditampilkan di halaman web Anda.
Dengan langkah-langkah sederhana ini, Anda dapat menanamkan foto sphere yang imersif di halaman web atau blog apa pun dengan menggunakan Google Maps Embed API. Foto sphere memberikan pengalaman foto unik untuk viewers Anda dan membantu menghadirkan dunia ke halaman web Anda.
