1. Sebelum memulai
Tutorial ini membahas cara menambahkan dan menata gaya penanda 3D di aplikasi Anda. Anda juga akan mempelajari cara menganimasikan aplikasi dengan terbang ke dan di sekitar lokasi tertentu.
Tutorial ini dibuat berdasarkan konsep yang dibahas dalam codelab pertama. Jika belum, selesaikan codelab tersebut untuk mendapatkan pengetahuan dasar yang diperlukan untuk aplikasi ini.
Yang akan Anda lakukan
Aplikasi ini memberikan ringkasan tentang kantor Google utama di Eropa. Pengguna dapat memilih kantor, terbang ke dalam dan di sekitarnya untuk menjelajahi, lalu memperkecil untuk kembali ke tampilan umum. Fitur ini, yang biasanya ditemukan di aplikasi perjalanan dan eksplorasi, menawarkan pengalaman yang lebih imersif bagi pengguna.
Dalam codelab ini, Anda akan membuat aplikasi web 3D yang melakukan hal berikut:
- Memuat Maps JavaScript API secara dinamis.
- Menambahkan Penanda 3D ke peta.
- Menata gaya penanda menggunakan SVG.
- Menambahkan kemampuan untuk terbang ke dan di sekitar penanda.
- Mengabstrak lokasi dari kode ke dalam array.
Yang akan Anda pelajari
- Cara kerja penanda.
- Cara menata gaya penanda.
- Cara kerja animasi dengan fungsi bawaan.
- Menempatkan lokasi kamera versus lokasi titik untuk mendapatkan framing yang lebih baik.
- Hack yang berguna untuk mengambil parameter kamera agar dapat membingkai item dengan lebih baik.
Prasyarat
Anda harus mempelajari item di sini untuk menyelesaikan Codelab ini. Jika Anda sudah terbiasa menggunakan Google Maps Platform, langsung buka Codelab.
Produk Google Maps Platform yang diperlukan
Dalam Codelab ini, Anda akan menggunakan produk Google Maps Platform berikut:
- Maps JavaScript API
Persyaratan lain untuk codelab ini
Untuk menyelesaikan codelab ini, Anda memerlukan akun, layanan, dan alat berikut:
- Akun Google Cloud dengan penagihan diaktifkan.
- Kunci API Google Maps Platform dengan Maps JavaScript API diaktifkan.
- Pengetahuan dasar tentang JavaScript, HTML, dan CSS.
- Editor teks atau IDE pilihan Anda, untuk menyimpan file yang telah diedit untuk dilihat.
- Browser web untuk melihat file saat Anda bekerja.
2. Memulai persiapan
Menyiapkan Google Maps Platform
Jika Anda belum memiliki akun Google Cloud Platform dan project dengan penagihan diaktifkan, lihat panduan Memulai Google Maps Platform untuk membuat akun penagihan dan project.
- Di Cloud Console, klik menu drop-down project lalu pilih project yang ingin Anda gunakan untuk codelab ini.
- Aktifkan API dan SDK Google Maps Platform yang diperlukan untuk codelab ini di Google Cloud Marketplace. Untuk melakukannya, ikuti langkah-langkah dalam video ini atau dokumentasi ini.
- Buat kunci API di halaman Kredensial di Cloud Console. Anda dapat mengikuti langkah-langkah dalam video ini atau dokumentasi ini. Semua permintaan ke Google Maps Platform memerlukan kunci API.
3. Globe sederhana
Untuk mulai mem-build aplikasi, Anda harus menyiapkan penyiapan dasar. Tindakan ini akan menghasilkan tampilan "marmer biru" Bumi dalam bentuk yang paling mendasar, seperti yang ditunjukkan pada gambar:
Menambahkan kode untuk halaman awal
Untuk menambahkan globe ke situs, Anda harus menambahkan kode berikut ke halaman. Tindakan ini akan menambahkan bagian untuk loader Maps JavaScript API dan fungsi init yang membuat elemen Peta 3D dalam halaman tempat Anda akan menambahkan kode untuk penanda.
Pastikan Anda menambahkan kunci Anda sendiri (yang dibuat di bagian penyiapan) ke halaman. Jika tidak, elemen 3D tidak akan dapat diinisialisasi.
<!DOCTYPE html>
<html>
<head>
<title>Step 1 - Simple Globe</title>
<style>
body {
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<script>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "<INSERT API KEY>",
v: "alpha",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script>
let map3D = null;
async function init() {
const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");
map3D = new Map3DElement({
mode: MapMode.HYBRID,
});
document.body.append(map3D);
}
init();
</script>
</body>
</html>
Setelah selesai, Anda siap untuk mulai membingkai lokasi yang menarik, yang akan Anda lakukan di langkah berikutnya.
4. Tampilan frame pertama
Setelah membuat peta dengan tampilan globe, langkah penerapan Anda berikutnya adalah membingkai lokasi awal yang benar. Hal ini memungkinkan pengguna Anda mendapatkan ringkasan instan tentang tempat mereka bekerja.
Meskipun contoh ini berfokus pada kantor Google di Eropa, Anda dapat menerapkan pendekatan ini ke lokasi mana pun di seluruh dunia—dari seluruh negara hingga satu blok kota. Kecepatan dan fleksibilitas produk memungkinkan Anda menskalakan aplikasi dari global ke lokal dengan perubahan kode minimal.
Anda akan memulai dengan framing awal untuk membuat Peta 3D terlihat seperti ini:
Bingkai kamera di Eropa
Untuk mendapatkan tampilan seperti yang ditampilkan, Anda harus membingkai tampilan dengan benar seolah-olah Anda memosisikan kamera di ruang yang melihat ke bawah ke lokasi.
Untuk melakukannya, sejumlah parameter pada kontrol peta dapat digunakan untuk menetapkan detail kamera. Anda dapat melihat bagaimana parameter berinteraksi di dunia "nyata" yang ditampilkan dalam diagram. Secara khusus, ada titik tengah yang dilihat kamera dan jarak dari tempat Anda melihat (rentang). Anda juga perlu menetapkan kemiringan perspektif kamera (jika tidak, Anda akan melihat langsung ke bawah ke Bumi).
Setelan terakhir, heading, menentukan arah kamera. Nilai ini diukur sebagai offset dari utara sejati. Nilai ini diterapkan ke elemen Peta 3D sebagai objek untuk menyiapkan tampilan awal. Anda dapat melihatnya dalam kode dengan konstruktor Elemen 3D yang diperbarui.
map3D = new Map3DElement({
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
mode: MapMode.HYBRID
});
Mengambil parameter kamera
Membingkai tampilan di peta 3D memerlukan penempatan kamera yang akurat, yang mungkin sulit dicapai hanya melalui kode. Untuk menyederhanakan proses ini, gunakan hack yang berguna ini: tambahkan fungsi ke halaman yang mengambil parameter kamera saat Anda mengklik tampilan yang diperlukan. Parameter akan menghasilkan output ke konsol, siap disalin ke setelan kamera objek Anda.
Anda dapat menemukan kode yang mungkin ingin digunakan nanti, kode tersebut ditambahkan ke contoh halaman ini yang ditampilkan, meskipun tidak akan ada di contoh halaman berikutnya karena tidak diperlukan untuk codelab, tetapi ini adalah sesuatu yang perlu diingat jika Anda ingin membuat demo yang lebih imersif melalui pemosisian kamera yang lebih baik.
map3D.addEventListener('gmp-click', (event) => {
console.log("camera: { center: { lat: " + map3D.center.lat + ", lng : " + map3D.center.lng + ", altitude: " + map3D.center.altitude + " }, range: " + map3D.range + ", tilt: " + map3D.tilt + " ,heading: " + map3D.heading + ", }");
console.log("{ lat: " + event.position.lat + ", lng : " + event.position.lng + ", altitude: " + event.position.altitude + " }");
// Stop the camera animation when the map is clicked.
map3D.stopCameraAnimation();
});
Perhatikan penggunaan fungsi stopCameraAnimation. Jika halaman diperbesar atau diputar, sebaiknya Anda dapat menghentikan animasi yang terjadi sehingga Anda dapat mengambil lokasi di layar pada saat itu. Potongan kode ini memungkinkan Anda melakukannya. Detail selengkapnya ada dalam dokumentasi untuk stopCameraAnimation.
Contoh output dari klik, seperti yang ditampilkan di konsol.
camera: { center: { lat: 51.39870122020001, lng : -0.08573187165829443, altitude: 51.66845062662254 }, range: 716.4743880553578, tilt: 50.5766672986501 ,heading: -1.048260134782318, }
step2.html:40 { lat: 51.398158351120536, lng : -0.08561139388593597, altitude: 51.860469133677626 }
Teks kamera dapat digunakan sebagai input json di berbagai objek di Peta 3D, output kedua adalah lokasi titik sebenarnya tempat klik terjadi, yang juga berguna untuk membuat titik atau apa pun untuk pemosisian penanda.
Setelah halaman dibingkai dengan benar, Anda kini dapat menambahkan penanda. Lanjutkan ke langkah berikutnya untuk mempelajari caranya.
Solusi bagian
Untuk langkah ini, halaman yang telah selesai disediakan sebagai solusi untuk memverifikasi penerapan Anda. (Jika menyalin, pastikan Anda menggunakan kunci API Anda sendiri).
<!DOCTYPE html>
<html>
<head>
<title>Step 2 - Europe View</title>
<style>
body {
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<script>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "<INSERT API KEY>",
v: "alpha",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script>
let map3D = null;
async function init() {
const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");
map3D = new Map3DElement({
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
mode: MapMode.HYBRID,
});
map3D.addEventListener('gmp-click', (event) => {
console.log("camera: { center: { lat: " + map3D.center.lat + ", lng : " + map3D.center.lng + ", altitude: " + map3D.center.altitude + " }, range: " + map3D.range + ", tilt: " + map3D.tilt + " ,heading: " + map3D.heading + ", }");
console.log("{ lat: " + event.position.lat + ", lng : " + event.position.lng + ", altitude: " + event.position.altitude + " }");
map3D.stopCameraAnimation();
});
document.body.append(map3D);
}
init();
</script>
</body>
</html>
5. Penanda sederhana
Di bagian ini, Anda akan mempelajari cara menambahkan penanda pertama. Pertama, Anda akan mempelajari detail umum tentang penanda.
Peta 3D mendukung pembuatan dua class penanda yang berbeda, class Marker3DElement dan class Marker3DInteractiveElement, yang pilihannya ditentukan oleh apakah Anda ingin mengaktifkan klik penanda atau tidak. Selain itu, keduanya pada dasarnya sama, jadi Anda akan membuat Marker3DElement terlebih dahulu, lalu "mengupgrade"nya ke Marker3DInteractiveElement pada langkah berikutnya.
Anda dapat melihat solusi lengkap untuk langkah ini di sini:
Menambahkan tinggi ke penanda
Hal pertama yang perlu diketahui adalah penanda bersifat 3D seperti semua yang ada di Peta 3D. Artinya, lokasi dapat memiliki ketinggian (ketinggian) dan ketinggian tersebut dapat mewakili posisi yang relatif terhadap permukaan laut, tanah, mesh, atau ditetapkan untuk dijepit ke tanah dan mengabaikan lokasi ketinggian. Anda dapat melihat detail selengkapnya di bagian Konstanta ketinggian dalam dokumentasi untuk AltitudeMode.
Anda juga dapat menetapkan apakah penanda diekstrusi atau tidak menggunakan nilai extruded. Ini akan menentukan apakah penanda akan memiliki garis kecil yang digambar ke tanah untuk membantu menampilkan posisi sebenarnya sehubungan dengan ketinggian, yang berguna untuk memilih titik di tanah. Anda dapat melihat contohnya dengan lokasi Google UK. Keduanya diekstrusi dan posisinya ditetapkan ke Ketinggian absolut. Yang pertama pada 75 meter dan yang kedua pada 125 m.
|
|
Ketinggian 75 meter. | Ketinggian 125 meter. |
Menyembunyikan atau menampilkan penanda dengan oklusi dan tabrakan
Meskipun mungkin tidak penting dalam demonstrasi kami, karena posisinya cukup jauh, untuk penanda yang mungkin tumpang-tindih satu sama lain atau mungkin berada di belakang bangunan, Anda dapat mengontrol apa yang terjadi pada penanda tersebut dengan nilai collisionBehavior atau drawsWhenOccluded.
Untuk perilaku tabrakan, Anda memiliki opsi berikut:
REQUIRED: (default) Selalu menampilkan penanda terlepas dari konflik yang terjadi.OPTIONAL_AND_HIDES_LOWER_PRIORITYMenampilkan penanda hanya jika tidak tumpang-tindih dengan penanda lainnya. Jika dua penanda dengan jenis ini akan tumpang-tindih, penanda denganzIndexyang lebih tinggi akan ditampilkan. Jika memilikizIndexyang sama, penanda dengan posisi layar vertikal bawah akan ditampilkan.REQUIRED_AND_HIDES_OPTIONALSelalu menampilkan penanda terlepas dari tumpang-tindih yang terjadi, dan menyembunyikan setiap penanda atau labelOPTIONAL_AND_HIDES_LOWER_PRIORITYyang akan tumpang-tindih dengan penanda.
Perbedaan cara penanda ditampilkan berdasarkan perilaku tabrakan yang ditentukan ditampilkan dalam gambar. Semua penanda ditampilkan saat menetapkan REQUIRED, tetapi jika Anda menggunakan REQUIRED_AND_HIDES_OPTIONAL, dalam hal ini penanda yang lebih rendah di layar akan ditampilkan (Anda dapat bermain dengan zIndex untuk membuat penanda lain ditampilkan di atas jika Anda suka).
|
|
WAJIB | REQUIRED_AND_HIDES_OPTIONAL |
Untuk oklusi, Anda dapat memilih untuk menggambar penanda di belakang bangunan atau tidak. Hal ini ditunjukkan dalam gambar berikut. Jika drawsWhenOccluded ditetapkan ke true, penanda akan sedikit redup saat digambar di belakang bangunan. Jika ditetapkan ke false, penanda akan disembunyikan saat berada di belakang bangunan. Detail selengkapnya dapat ditemukan di tabel berikut:
|
|
|
|
Seperti yang disebutkan, penanda yang disembunyikan oleh tabrakan akan ditampilkan redup jika gambar penanda yang terhalang diizinkan. Pada gambar, Anda dapat melihat beberapa penanda yang tersembunyi oleh bangunan dan beberapa penanda yang tersembunyi oleh penanda lain.
Lihat contoh perilaku tabrakan di peta 2D untuk mengetahui detail selengkapnya.
Menghapus kanvas
Sekarang saatnya membuat penanda pertama Anda. Untuk memastikan pengguna berfokus pada penanda, Anda dapat menonaktifkan label default di peta 3D.
Tetapkan nilai mode elemen peta 3D ke SATELLITE.
Untuk mengetahui informasi selengkapnya, lihat mode.
map3D = new Map3DElement({
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
mode: MapMode.SATELLITE
});
Tindakan ini akan menghasilkan peta 3D berikut:
Menambahkan penanda pertama
Dengan kanvas yang bersih, Anda kini dapat menambahkan penanda pertama. Parameter utama mencakup posisi dan label.
Untuk menambahkan penanda, tetapkan posisi penanda. Anda juga dapat menyertakan label, yang muncul di atas penanda, dan elemen lainnya seperti yang dijelaskan dalam dokumentasi Marker3DElement.
Untuk menambahkan penanda, Anda akan menambahkan kode berikut setelah baris yang menyembunyikan label default seperti yang ditunjukkan:
const marker = new Marker3DElement({
position: { lat: 51.5332, lng: -0.1260, altitude: 75 },
label: 'Google UK',
altitudeMode: 'ABSOLUTE',
extruded: true,
});
map3D.append(marker);
Setelah membuat penanda, tambahkan ke peta 3D menggunakan metode tambahan. Ingat bahwa penanda disimpan sebagai array elemen turunan dalam peta 3D. Untuk mengubah penanda, Anda harus mengaksesnya melalui array ini.
Pastikan Marker3DElement dimuat dari Maps JavaScript API dengan menambahkannya ke daftar library saat memuat API.
const { Map3DElement, MapMode, Marker3DElement } = await google.maps.importLibrary("maps3d");
Sekarang, saat halaman dimuat, seluruh Eropa akan terlihat dengan penanda di atas kantor London. Seperti yang ditunjukkan dalam animasi, Anda dapat memperbesar secara manual untuk melihat penanda di atas lokasi yang dibuat.
Setelah memuat penanda pertama, langkah berikutnya adalah membuatnya terlihat lebih bagus.
Solusi bagian
Untuk langkah ini, halaman yang telah selesai disediakan sebagai solusi untuk memverifikasi penerapan Anda. (Jika menyalin, pastikan Anda menggunakan kunci API Anda sendiri).
<!DOCTYPE html>
<html>
<head>
<title>Step 3 - Simple Marker</title>
<style>
body {
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<script>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "<INSERT API KEY>",
v: "alpha",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script>
let map3D = null;
async function init() {
const { Map3DElement, MapMode, Marker3DElement } = await google.maps.importLibrary("maps3d");
map3D = new Map3DElement({
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
mode: MapMode.SATELLITE,
});
const marker = new Marker3DElement({
position: { lat: 51.5332, lng: -0.1260, altitude: 75 },
label: 'Google UK',
altitudeMode: 'ABSOLUTE',
extruded: true,
});
map3D.append(marker);
document.body.append(map3D);
}
init();
</script>
</body>
</html>
6. Penanda SVG
Pada langkah ini, Anda akan membuat penanda terlihat lebih menarik dengan mengubah penanda untuk menambahkan bendera ke penanda guna mewakili negara tempat penanda berada. Mari kita lihat cara melakukannya dan untuk itu, Anda perlu memahami PinElement.
Pada akhirnya, Anda akan memiliki tampilan baru seperti yang ditunjukkan:
Penyesuaian dasar dengan PinElement
Salah satu elemen yang dibagikan di antara penanda di Javascript API, baik peta 2D maupun 3D, adalah PinElement. Saat menambahkan Marker3DElement ke Map3DElement , Anda menambahkan PinElement ke Marker3DElement sebagai turunan ke elemen tersebut.
PinElement berisi kemampuan, pada tingkat dasar, untuk mengubah Penanda normal guna menetapkan warna batas, warna titik interior (atau glyph), dan warna latar belakangnya. Anda dapat melihatnya pada gambar yang menampilkan Penanda 2D.
Anda juga dapat menetapkan ukuran penanda melalui elemen dengan menetapkan nilai skalanya (>1 lebih besar dari normal dan <1 lebih kecil sebagai proporsi).
Anda juga dapat mengganti Glyph dengan file gambar atau svg jika ingin memberikan tampilan yang lebih kustom, tetapi tetap mempertahankan tampilan pin peta PinElement standar.
Di Luar PinElements
Untuk langkah ini, Anda akan memperbarui PinElement standar dengan flag svg dan warna yang berbeda, tetapi sebaiknya Anda juga mengetahui bahwa Anda dapat mengubah tampilan Penanda sepenuhnya sehingga tidak terlihat seperti Pin peta. Dalam Penanda, Anda juga dapat memasukkan grafik baru melalui penggunaan template, seperti HTMLImageElement dan SVGElement. Anda dapat mengetahui detail selengkapnya tentang cara melakukannya di dokumentasi Marker3DElement-Slots.
Untuk melihat apa yang sepenuhnya dapat dilakukan, lihat contoh berikut yang menunjukkan contoh penataan gaya Penanda menggunakan sejumlah teknik yang berbeda.
|
|
Penanda dengan penyesuaian dasar melalui PinElement, lihat contoh. | Penanda dengan penyesuaian kompleks melalui template melalui SVG dan Gambar, lihat contoh. |
Tambahkan PinElement
Untuk mengubah tampilan penanda, hal pertama yang perlu dilakukan adalah memastikan library PinElement telah ditambahkan ke halaman. Hal ini dilakukan dengan menambahkan baris kode berikut setelah library maps3d diimpor:
const { Map3DElement, MapMode, Marker3DElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');
Sekarang elemen dimuat, PinElement dapat direferensikan dan dibuat. Lihat kode, tambahkan di antara tempat penanda dibuat dan tambahkan penanda ke Peta 3D.
const marker = new Marker3DElement({
position: { lat: 51.5332, lng: -0.1260, altitude: 75 },
label: 'Google UK',
altitudeMode: 'ABSOLUTE',
extruded: true,
});
const base = document.location.href.substr(0, document.location.href.lastIndexOf("/"));
const markerPin = new PinElement({
"background": 'white',
"glyph": new URL(base + '/images/gb.svg'),
"scale": 1.0,
});
marker.append(markerPin);
map3D.append(marker);
Karena Anda tidak hanya memuat pin dasar, ada sejumlah hal yang perlu dilakukan selain menyiapkan PinElement, dengan warna dan skala latar belakang yang terkait.
Pertama, referensi gambar svg untuk ikon bendera harus dibuat, dalam hal ini Union Jack. Anda bisa mendapatkannya dari koleksi seperti ini di https://flagicons.lipis.dev/.
Setelah memiliki ikon, Anda dapat menempatkannya di tempat yang dapat ditemukan situs. Dalam hal ini, Anda dapat melakukan hard code lokasi gambar atau menggunakan lokasi situs saat ini sebagai stub direktori, seperti yang ditunjukkan di sini dengan variabel dasar. Kemudian, Anda dapat menautkan ini ke lokasi di server ke flag yang tepat, yang di sini berada di bagian '/images/gb.svg'.
Tindakan ini akan membuat PinElement yang terlihat seperti yang ditampilkan:
Jadi, setelah menempatkan tanda di tempat yang tepat dan memasukkan kode di tempat yang tepat, Anda akan memiliki Peta 3D yang terlihat seperti ini:
Sekarang penanda kita sudah siap, penanda juga dapat diubah agar dapat diklik untuk memungkinkan interaktivitas ditambahkan. Hal ini akan dilakukan pada langkah berikutnya.
Solusi bagian
Untuk langkah ini, halaman yang telah selesai disediakan sebagai solusi untuk memverifikasi penerapan Anda. (Jika menyalin, pastikan Anda menggunakan kunci API Anda sendiri).
Jangan lupa juga bahwa Anda harus mendapatkan file svg bendera (atau file png pilihan Anda) dan menyimpannya di direktori yang dapat ditemukan oleh halaman Anda (di sini file disimpan di folder gambar).
<!DOCTYPE html>
<html>
<head>
<title>Step 4 - SVG Marker</title>
<style>
body {
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<script>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "<INSERT API KEY>",
v: "alpha",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script>
let map3D = null;
async function init() {
const { Map3DElement, MapMode, Marker3DElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');
map3D = new Map3DElement({
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
mode: MapMode.SATELLITE,
});
const marker = new Marker3DElement({
position: { lat: 51.5332, lng: -0.1260, altitude: 75 },
label: 'Google UK',
altitudeMode: 'ABSOLUTE',
extruded: true,
});
const base = document.location.href.substr(0, document.location.href.lastIndexOf("/"));
const markerPin = new PinElement({
"background": 'white',
"glyph": new URL(base + '/images/gb.svg'),
"scale": 1.0,
});
marker.append(markerPin);
map3D.append(marker);
document.body.append(map3D);
}
init();
</script>
</body>
</html>
7. Penanda interaktif
Pada langkah terakhir, penanda telah ditambahkan ke halaman, tetapi selain terlihat bagus, penanda ini tidak banyak berfungsi dan Anda masih harus berinteraksi dengan Peta 3D dengan cara yang sama. Langkah berikutnya adalah menambahkan kemampuan untuk melakukan sesuatu dengan penanda saat Anda mengkliknya, sehingga penanda dapat bereaksi terhadap interaksi pengguna.
Agar fitur ini dapat ditambahkan, Anda perlu melakukan transformasi Marker3DElement menjadi Marker3DInteractiveElement. Pada akhirnya, Anda akan memiliki halaman yang terlihat serupa, tetapi dengan mengklik penanda, sekarang akan muncul pemberitahuan dan akan terlihat seperti ini:
Pertama, ubah class penanda
Untuk menambahkan interaktivitas ke penanda, Anda harus memastikan penanda tersebut menggunakan class yang tepat. Marker3DInteractiveElement adalah yang diperlukan, tetapi karena merupakan ekstensi dari Marker3DElement, Anda tidak perlu melakukan apa pun selain memuat class baru dan mengubah nama class pada konstruktor.
const { Map3DElement, MapMode, Marker3DInteractiveElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');
map3D = new Map3DElement({
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
mode: MapMode.SATELLITE,
});
const marker = new Marker3DInteractiveElement({
position: { lat: 51.5332, lng: -0.1260, altitude: 75 },
label: 'Google UK',
altitudeMode: 'ABSOLUTE',
extruded: true,
});
Kedua, tambahkan peristiwa klik ke penanda
Selanjutnya, tambahkan peristiwa klik ke penanda untuk menangani interaksi pengguna dan merespons. Dalam cuplikan, Anda dapat melihat peristiwa klik ditambahkan ke penanda. Dalam hal ini, pemberitahuan diaktifkan dan menampilkan teks yang menampilkan label dari penanda, yang diperoleh dari target peristiwa yang diaktifkan yang memungkinkan kita mengakses properti label. Tambahkan kode berikut ke aplikasi Anda tepat setelah penanda dibuat.
marker.addEventListener('gmp-click', (event) => {
alert('You clicked on : ' + event.target.label);
event.stopPropagation();
});
Perhatikan bahwa peristiwa stopPropagation digunakan untuk memastikan bahwa pemroses klik lainnya dalam stack diaktifkan pada objek pokok seperti kanvas utama Peta 3D.
Jadi, saat menjalankan aplikasi, Anda akan mendapatkan hasil berikut:
Dengan kemampuan untuk melakukan sesuatu saat penanda diklik, Anda kini dapat menambahkan beberapa animasi ke halaman di langkah berikutnya.
Solusi bagian
Untuk langkah ini, halaman yang telah selesai disediakan sebagai solusi untuk memverifikasi penerapan Anda. (Jika menyalin, pastikan Anda menggunakan kunci API Anda sendiri).
<!DOCTYPE html>
<html>
<head>
<title>Step 5 - Interactive Marker</title>
<style>
body {
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<script>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "<INSERT API KEY>",
v: "alpha",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script>
let map3D = null;
async function init() {
const { Map3DElement, MapMode, Marker3DInteractiveElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');
map3D = new Map3DElement({
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
mode: MapMode.SATELLITE,
});
const marker = new Marker3DInteractiveElement({
position: { lat: 51.5332, lng: -0.1260, altitude: 75 },
label: 'Google UK',
altitudeMode: 'ABSOLUTE',
extruded: true,
});
marker.addEventListener('gmp-click', (event) => {
alert('You clicked on : ' + event.target.label);
event.stopPropagation();
});
const base = document.location.href.substr(0, document.location.href.lastIndexOf("/"));
const markerPin = new PinElement({
"background": 'white',
"glyph": new URL(base + '/images/gb.svg'),
"scale": 1.0,
});
marker.append(markerPin);
map3D.append(marker);
document.body.append(map3D);
}
init();
</script>
</body>
</html>
8. Terbang ke
Pada langkah ini, Anda akan menggunakan kemampuan untuk mengklik penanda ke animasi yang ditambahkan untuk terbang ke lokasinya. Anda dapat melihat cara kerjanya di sini.
Menganimasikan dengan flyCameraTo
Untuk menambahkannya ke halaman, Anda akan menggunakan metode flyCameraTo Peta 3D, tempat kamera menganimasikan antara lokasi kamera yang Anda tempati ke lokasi kamera yang ingin Anda lihat, melakukan interpolasi di antara keduanya, dan menganimasikan penerbangan dalam Peta 3D.
Saat menggunakan flyCameraTo, Anda harus menentukan FlyToAnimationOptions yang memiliki dua properti, endCamera, yang merupakan lokasi tempat kamera harus mengarah di akhir animasi, dan durationMillis, yang merupakan durasi dalam milidetik yang diperlukan untuk melakukan transisi.
Dalam contoh, setel kamera untuk melihat gedung yang merupakan posisi penanda, dengan kemiringan 65 derajat, rentang 500 meter, dan mengarah ke Utara dengan arah 0 derajat. Tetapkan waktu animasi 12.500 milidetik (12,5 detik).
Ganti peristiwa pemberitahuan saat ini di halaman dengan cuplikan flyCameraTo:
marker.addEventListener('gmp-click', (event) => {
map3D.flyCameraTo({
endCamera: {
center: marker.position,
tilt: 65,
range: 500,
heading: 0,
},
durationMillis: 12500,
});
event.stopPropagation();
});
Selesai, sekarang Anda dapat memuat ulang halaman, mengklik penanda, dan beralih ke Google UK, seperti yang ditunjukkan dalam animasi:
Pada langkah ini, Anda menambahkan penanda yang dapat diklik yang mengarahkan kamera ke lokasi penanda. Pada langkah berikutnya, Anda akan menambahkan kemampuan untuk menggerakkan kamera di sekitar titik sehingga mengorbit lokasi.
Solusi bagian
Untuk langkah ini, halaman yang telah selesai disediakan sebagai solusi untuk memverifikasi penerapan Anda. (Jika menyalin, pastikan Anda menggunakan kunci API Anda sendiri).
<!DOCTYPE html>
<html>
<head>
<title>Step 6 - Zoom To</title>
<style>
body {
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<script>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "<INSERT API KEY>",
v: "alpha",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script>
let map3D = null;
async function init() {
const { Map3DElement, MapMode, Marker3DInteractiveElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');
map3D = new Map3DElement({
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
mode: MapMode.SATELLITE,
});
const marker = new Marker3DInteractiveElement({
position: { lat: 51.5332, lng: -0.1260, altitude: 75 },
label: 'Google UK',
altitudeMode: 'ABSOLUTE',
extruded: true,
});
marker.addEventListener('gmp-click', (event) => {
map3D.flyCameraTo({
endCamera: {
center: marker.position,
tilt: 65,
range: 500,
heading: 0,
},
durationMillis: 12500,
});
event.stopPropagation();
});
const base = document.location.href.substr(0, document.location.href.lastIndexOf("/"));
const markerPin = new PinElement({
"background": 'white',
"glyph": new URL(base + '/images/gb.svg'),
"scale": 1.0,
});
marker.append(markerPin);
map3D.append(marker);
document.body.append(map3D);
}
init();
</script>
</body>
</html>
9. Terbang
Elemen terakhir animasi kita adalah menggunakan metode flyCameraAround untuk menganimasikan orbit di sekitar bangunan. Pada akhirnya, Anda akan memiliki animasi yang akan terbang ke gedung, lalu terbang mengelilinginya seperti yang ditunjukkan dalam animasi. Contoh ini mungkin sedikit cepat untuk contoh nyata, tetapi berguna untuk menunjukkan cara kerja tindakan, tanpa terlalu lama, Anda dapat mencoba pengaturan waktu hingga mendapatkan nilai yang sesuai untuk Anda.
Mari kita terbang!
Metode flyCameraAround mirip dengan fungsi flyCameraTo karena menggunakan sejumlah opsi sebagai input yang mengontrol lokasi mana yang akan diorbit, sebagai parameter kamera dan waktu dalam milidetik yang diperlukan untuk mengorbit. Terakhir, Anda juga dapat menentukan jumlah rotasi yang dapat terjadi dalam waktu yang ditentukan. Anda dapat melihat semua opsi di sini di FlyAroundAnimationOptions
Tapi tunggu dulu!
Dalam animasi, Anda dapat melihat animasi terbang ke lokasi, lalu terbang di sekitarnya, dengan mengaitkan animasi. Untuk melakukannya, Anda menggunakan peristiwa gmp-animationend Maps 3D untuk memastikan animasi saat ini telah selesai sebelum memicu animasi berikutnya. Animasi ini hanya boleh terjadi sekali sebelum berhenti.
Lihat kode, masukkan setelah kode yang ditambahkan di bagian sebelumnya.
marker.addEventListener('gmp-click', (event) => {
map3D.flyCameraTo({
endCamera: {
center: marker.position,
tilt: 65,
range: 500,
heading: 0,
},
durationMillis: 5000,
});
map3D.addEventListener('gmp-animationend', () => {
map3D.flyCameraAround({
camera: {
center: marker.position,
tilt: 65,
range: 500,
heading: 0,
},
durationMillis: 5000,
rounds: 1
});
}, { once: true });
event.stopPropagation();
});
Menambahkan kemampuan untuk memproses peristiwa gmp-animationend memungkinkan peristiwa tersebut memanggil peristiwa flyCameraAround. Menetapkan titik awal yang sama dengan yang digunakan untuk kamera akhir metode fly to berarti transisi yang lancar (agar tidak menyebabkan gerakan yang mengejutkan ke lokasi baru). Sekali lagi, durationMillis ditetapkan untuk mengontrol durasi waktu yang diperlukan untuk melakukan animasi. Dalam hal ini, metode juga menggunakan opsi lain, rounds, dan ini ditetapkan ke 1.
Artinya, kamera akan berputar di sekitar titik tersebut sekali dalam 5 detik. Anda dapat bereksperimen dengan nilai ini sesuai kebutuhan untuk menemukan angka yang sesuai bagi Anda.
Pada tahap ini, animasi akan berakhir, tetapi karena Anda tidak ingin peristiwa gmp-animationend diaktifkan lagi dengan bit kode ini, yang akan menyebabkan orbit terjadi tanpa batas. Untuk menghindari hal ini, opsi untuk pemroses dengan setelan once harus sama dengan true. Artinya, peristiwa akan dihapus setelah selesai, sehingga menghindari loop tanpa akhir.
Setelah ditambahkan, Anda akan dapat menjalankan solusi dan melihat animasi yang sekarang terbang di sekitar penanda di akhir, seperti yang ditunjukkan dalam animasi:
Pada langkah ini, Anda telah menambahkan penanda yang dapat diklik, lalu kamera akan terbang ke dan di sekitar lokasi penanda. Pada tahap berikutnya, saatnya untuk mulai menambahkan lebih banyak titik dan memungkinkan kita berpindah di antara titik tersebut.
Solusi bagian
Untuk langkah ini, halaman yang telah selesai disediakan sebagai solusi untuk memverifikasi penerapan Anda. (Jika menyalin, pastikan Anda menggunakan kunci API Anda sendiri).
<!DOCTYPE html>
<html>
<head>
<title>Step 7 - Zoom Around</title>
<style>
body {
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<script>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "<INSERT API KEY>",
v: "alpha",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script>
let map3D = null;
const europeCamera = {
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
};
async function init() {
const { Map3DElement, MapMode, Marker3DInteractiveElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');
map3D = new Map3DElement({
...europeCamera,
mode: MapMode.SATELLITE,
});
const marker = new Marker3DInteractiveElement({
position: { lat: 51.5332, lng: -0.1260, altitude: 75 },
label: 'Google UK',
altitudeMode: 'ABSOLUTE',
extruded: true,
});
marker.addEventListener('gmp-click', (event) => {
map3D.flyCameraTo({
endCamera: {
center: marker.position,
tilt: 65,
range: 500,
heading: 0,
},
durationMillis: 5000,
});
map3D.addEventListener('gmp-animationend', () => {
map3D.flyCameraAround({
camera: {
center: marker.position,
tilt: 65,
range: 500,
heading: 0,
},
durationMillis: 5000,
rounds: 1
});
}, { once: true });
event.stopPropagation();
});
const base = document.location.href.substr(0, document.location.href.lastIndexOf("/"));
const markerPin = new PinElement({
"background": 'white',
"glyph": new URL(base + '/images/gb.svg'),
"scale": 1.0,
});
marker.append(markerPin);
map3D.append(marker);
document.body.append(map3D);
}
init();
</script>
</body>
</html>
10. Paris!
Meskipun London adalah kota yang bagus, kota ini terlihat sedikit sepi di halaman, jadi mari kita mulai menambahkan beberapa lokasi baru, dimulai dengan Paris. Untuk melakukannya, array dapat digunakan untuk menyimpan semua detail spesifik lokasi, lalu menggunakannya sebagai input ke fungsi dan variabel yang menetapkan parameter tampilan Penanda dan juga terbang ke dan di sekitar lokasi kamera. Yang seperti yang disebutkan mungkin perlu berbeda dengan lokasi titik penanda untuk tujuan membingkai gambar kamera yang lebih baik dari bangunan, misalnya.
Array Lokasi
Agar tidak perlu melakukan hard code pada semua detail tentang lokasi tertentu, seperti kamera tampilan, titik penanda, dan opsi tampilan, Anda dapat menggunakan array kecil objek JSON untuk menyimpan data ini. Hal ini kemudian dapat diterapkan saat penanda dibuat dan digunakan dalam aplikasi. Anda dapat melihat contoh ini dalam cuplikan kode, yang membuat variabel bernama officeLocations untuk menyimpan array.
Tambahkan kode berikut tepat sebelum fungsi init. Perhatikan juga bahwa variabel dasar telah dipindahkan ke luar fungsi init sehingga dapat diterapkan ke semua lokasi kantor.
const base = document.location.href.substr(0, document.location.href.lastIndexOf("/"));
const europeCamera = {
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
};
const officeLocations = [
{
"name": "Google France",
"camera": {
"center": { lat: 48.877276, lng: 2.329978, altitude: 48 },
"range": 178,
"tilt": 57.48,
"heading": -17,
},
"point": { lat: 48.8775183, lng: 2.3299791, altitude: 60 },
"pin": {
"background": 'white',
"glyph": new URL(base + '/images/fr.svg'),
"scale": 1.0,
},
},
{
"name": "Google UK",
"camera": {
"center": { lat: 51.5332, lng: -0.1260, altitude: 38.8 },
"range": 500,
"tilt": 56.21672368296945,
"heading": -31.15763027564165,
},
"point": { lat: 51.5332, lng: -0.1260, altitude: 75 },
"pin": {
"background": 'white',
"glyph": new URL(base + '/images/gb.svg'),
"scale": 1.0,
},
}]
const base = document.location.href.substr(0, document.location.href.lastIndexOf("/"));
Setiap lokasi kantor memiliki properti berikut:
- name : nama lokasi.
- camera : tampilan awal untuk melihat lokasi yang akan dituju dan dikelilingi.
- point : lokasi untuk menempatkan penanda.
- pin : detail warna pin penanda dan properti glyph
Sudut pandang yang berbeda
Anda mungkin melihat di sini bahwa untuk Inggris Raya, pusat kamera dan titik penanda sama (selain ketinggian), sedangkan untuk Prancis, kamera dan titiknya berbeda. Hal ini karena untuk lokasi di Prancis, penanda harus berada di lokasi yang berbeda dengan tampilan kamera awal, yang memberikan tampilan yang lebih baik dari seluruh bangunan saat terbang ke dan di sekitar bangunan daripada yang mungkin diberikan jika titik penanda digunakan.
Kembali ke Eropa
Salah satu fungsi memiliki lebih banyak titik adalah menambahkan persyaratan agar dapat berpindah di antara titik tersebut. Anda dapat menggunakan drop-down untuk memungkinkan pemilihan, tetapi dalam contoh ini, kamera akan kembali ke tampilan Eropa setiap kali pengguna memilih lokasi lain.
Untuk melakukannya, tampilan awal harus disimpan dalam variabel yang dapat digunakan untuk mereset kamera ke seluruh tampilan Eropa. Dalam contoh ini, tambahkan variabel baru bernama europeCamera untuk menyimpannya untuk digunakan nanti.
Memperbarui fungsi init
Pengeditan pertama yang perlu Anda lakukan adalah menggunakan objek europeCamera sebagai input saat membuat Map3DElement.
Pengeditan kedua yang perlu Anda lakukan adalah menggabungkan bagian pembuatan penanda dalam loop untuk memperbaruinya dengan parameter yang disimpan dalam variabel. Anda dapat melihatnya dalam kode yang ditampilkan:
- office.point : lokasi penanda.
- office.name : nama kantor yang digunakan untuk label penanda.
- office.camera : lokasi kamera awal.
- office.pin : opsi PinElement untuk perbedaan tampilan
Selain itu, jangan lupa untuk mendapatkan file atau gambar svg untuk bendera Prancis.
async function init() {
const { Map3DElement, MapMode, Marker3DInteractiveElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');
map3D = new Map3DElement({
...europeCamera,
mode: MapMode.SATELLITE,
});
officeLocations.forEach(office => {
const marker = new Marker3DInteractiveElement({
position: office.point,
label: office.name,
altitudeMode: 'ABSOLUTE',
extruded: true,
});
marker.addEventListener('gmp-click', (event) => {
map3D.flyCameraTo({
endCamera: office.camera,
durationMillis: 5000,
});
map3D.addEventListener('gmp-animationend', () => {
map3D.flyCameraAround({
camera: office.camera,
durationMillis: 5000,
rounds: 1
});
map3D.addEventListener('gmp-animationend', () => {
map3D.flyCameraTo({
endCamera: europeCamera,
durationMillis: 5000,
});
}, { once: true });
}, { once: true });
event.stopPropagation();
});
const markerPin = new PinElement(office.pin);
marker.append(markerPin);
map3D.append(marker);
});
document.body.append(map3D);
}
Perhatikan bahwa fungsi gmp-animationend kedua ditambahkan setelah animasi flyCameraAround untuk menangani kembali ke tampilan Eropa, menggunakan variabel europeCamera yang disimpan. Seperti yang ditunjukkan dalam animasi:
Pada tahap ini, aplikasi telah diperluas untuk memiliki dua lokasi dan kemampuan untuk terbang di antara keduanya menggunakan animasi dan array lokasi. Pada tahap berikutnya, lokasi kantor lainnya akan ditambahkan ke array.
Solusi bagian
Untuk langkah ini, halaman yang telah selesai disediakan sebagai solusi untuk memverifikasi penerapan Anda. (Jika menyalin, pastikan Anda menggunakan kunci API Anda sendiri).
Selain itu, jangan lupa bahwa Anda harus mendapatkan file svg bendera (atau file png pilihan Anda) dan menyimpannya di direktori yang dapat ditemukan oleh halaman Anda (di sini file disimpan di folder gambar).
<!DOCTYPE html>
<html>
<head>
<title>Step 8 - Paris!</title>
<style>
body {
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<script>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "<INSERT API KEY>",
v: "alpha",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script>
let map3D = null;
const base = document.location.href.substr(0, document.location.href.lastIndexOf("/"));
const europeCamera = {
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
};
const officeLocations = [
{
"name": "Google France",
"camera": {
"center": { lat: 48.877276, lng: 2.329978, altitude: 48 },
"range": 178,
"tilt": 57.48,
"heading": -17,
},
"point": { lat: 48.8775183, lng: 2.3299791, altitude: 60 },
"pin": {
"background": 'white',
"glyph": new URL(base + '/images/fr.svg'),
"scale": 1.0,
},
},
{
"name": "Google UK",
"camera": {
"center": { lat: 51.5332, lng: -0.1260, altitude: 38.8 },
"range": 500,
"tilt": 56.21672368296945,
"heading": -31.15763027564165,
},
"point": { lat: 51.5332, lng: -0.1260, altitude: 75 },
"pin": {
"background": 'white',
"glyph": new URL(base + '/images/gb.svg'),
"scale": 1.0,
},
}]
async function init() {
const { Map3DElement, MapMode, Marker3DInteractiveElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');
map3D = new Map3DElement({
...europeCamera,
mode: MapMode.SATELLITE,
});
officeLocations.forEach(office => {
const marker = new Marker3DInteractiveElement({
position: office.point,
label: office.name,
altitudeMode: 'ABSOLUTE',
extruded: true,
});
marker.addEventListener('gmp-click', (event) => {
map3D.flyCameraTo({
endCamera: office.camera,
durationMillis: 5000,
});
map3D.addEventListener('gmp-animationend', () => {
map3D.flyCameraAround({
camera: office.camera,
durationMillis: 5000,
rounds: 1
});
map3D.addEventListener('gmp-animationend', () => {
map3D.flyCameraTo({
endCamera: europeCamera,
durationMillis: 5000,
});
}, { once: true });
}, { once: true });
event.stopPropagation();
});
const markerPin = new PinElement(office.pin);
marker.append(markerPin);
map3D.append(marker);
});
document.body.append(map3D);
}
init();
</script>
</body>
</html>
11. Tempat lainnya
Meskipun aplikasi kini memiliki semua fitur yang diperlukan, Peta 3D masih terlihat agak jarang, jadi sekarang Anda akan menambahkan beberapa lokasi lagi untuk membuatnya sedikit lebih ramai. Dengan menggunakan array, Anda dapat dengan mudah terus mengisi lokasi baru, dengan penanda uniknya sendiri. Langkah terakhir adalah terus menambahkan penanda hingga muncul tampilan berikut.
Menambahkan penanda lainnya.
Google memiliki sejumlah kantor di banyak negara di Eropa, jadi mari kita tambahkan beberapa kantor tersebut ke peta. Anda hanya perlu memperbarui array. Data ini dapat bersumber dari layanan web atau ditayangkan dari file statis di suatu tempat. Dalam kasus kami, untuk memudahkan, data akan disimpan di halaman yang sama.
Anda dapat menambahkan penanda sebanyak yang diinginkan, yang diambil oleh halaman, lalu ditambahkan secara otomatis ke tampilan. Jangan lupa untuk mendapatkan flag yang benar dan menyimpannya di direktori gambar (atau di mana pun yang mudah).
const officeLocations = [
{
name: "Google France",
camera: {
center: { lat: 48.877276, lng: 2.329978, altitude: 48 },
range: 178,
tilt: 57.48,
heading: -17,
},
point: { lat: 48.8775183, lng: 2.3299791, altitude: 60 },
pin: {
background: 'white',
glyph: new URL(base + '/images/fr.svg'),
scale: 1.0,
},
},
{
name: "Google UK",
camera: {
center: { lat: 51.5332, lng: -0.1260, altitude: 38.8 },
range: 500,
tilt: 56.21672368296945,
heading: -31.15763027564165,
},
point: { lat: 51.5332, lng: -0.1260, altitude: 75 },
pin: {
background: 'white',
glyph: new URL(base + '/images/gb.svg'),
scale: 1.0,
},
},
{
name: "Google Belgium",
camera: {
center: { lat: 50.83930408436509, lng: 4.38052394507952, altitude: 64.38932203802196},
range: 466.62899893119175,
tilt: 43.61569474716178,
heading: 51.805907046332074,
},
point: { lat: 50.8392653, lng: 4.3808751, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/be.svg'),
scale: 1.0,
},
},
{
name: "Google Czechia",
camera: {
center: {
lat: 50.07004093853976,
lng: 14.402871475443956,
altitude: 223.39574818495532
},
range: 522.0365799222782,
tilt: 62.39511972890614,
heading: -39.150149539328304,
},
point: { lat: 50.0703122, lng: 14.402668199999999, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/cz.svg'),
scale: 1.0,
},
},
{
name: "Google Denmark",
details: "2, Sankt Petri Passage 5, 1165 København",
camera: {
center: {
lat: 55.680359539635866,
lng: 12.570460204526002,
altitude: 30.447654757346044
},
range: 334.8786935049066,
tilt: 55.38819319004654,
heading: 149.63867461295067,
},
point: { lat: 55.6804504, lng: 12.570279099999999, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/dk.svg'),
scale: 1.0,
},
},
,
{
name: "Google Greece",
camera: {
center: {
lat: 38.038634694028055,
lng: 23.802924946201266,
altitude: 196.45884670344995
},
range: 343.57226336076565,
tilt: 54.97375927639567,
heading: -33.26775344055724,
},
point: { lat: 38.038619, lng: 23.8031622, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/gr.svg'),
scale: 1.0,
},
},
{
name: "Google Germany",
camera: {
center: {
lat: 53.55397683312404,
lng: 9.986350507286808,
altitude: 44.83610870143956
},
range: 375.3474077822466,
tilt: 71.35078443829818,
heading: -160.76930098951416,
},
point: { lat: 53.5540227, lng: 9.9863, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/de.svg'),
scale: 1.0,
},
},
{
name: "Google Ireland",
camera: {
center: { lat: 53.339816899999995, lng: -6.2362644, altitude: 38.777415761228006 },
range: 500,
tilt: 56.21672368296945,
heading: -31.15763027564165,
},
point: { lat: 53.339816899999995, lng: -6.2362644, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/ie.svg'),
scale: 1.0,
},
},
{
name: "Google Italy",
camera: {
center: {
lat: 45.486361346538224,
lng: 9.18995496294455,
altitude: 138.55834058400072
},
range: 694.9398023590038,
tilt: 57.822470255679114,
heading: 84.10194883488619,
},
point: { lat: 45.4863064, lng: 9.1894762, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/it.svg'),
scale: 1.0,
},
},
{
name: "Google Lithuania",
camera: {
center: {
lat: 54.698040606567965,
lng: 25.30965338542576,
altitude: 111.80276944294413
},
range: 412.5808304977545,
tilt: 43.50793332082195,
heading: -29.181098269421028,
},
point: { lat: 54.6981204, lng: 25.3098617, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/at.svg'),
scale: 1.0,
},
},
{
name: "Google Netherlands",
camera: {
center: {
lat: 52.33773837150874,
lng: 4.871754560171063,
altitude: 53.68063996154723
},
range: 473.1982259177312,
tilt: 56.216523350388634,
heading: 71.78252318033718,
},
point: { lat: 52.337801, lng: 4.872065999999999, altitude: 100 },
pin: {
background: 'white',
glyph: new URL(base + '/images/nl.svg'),
scale: 1.0,
},
},
{
name: "Google Norway",
camera: {
center: { lat: 59.90991209999999, lng: 10.726020799999999, altitude: 38.777415761228006 },
range: 500,
tilt: 56.21672368296945,
heading: -31.15763027564165,
},
point: { lat: 59.90991209999999, lng: 10.726020799999999, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/no.svg'),
scale: 1.0,
},
},
{
name: "Google Poland",
camera: {
center: { lat: 52.22844380000001, lng: 20.9851819, altitude: 38.777415761228006 },
range: 500,
tilt: 56.21672368296945,
heading: -31.15763027564165,
},
point: { lat: 52.22844380000001, lng: 20.9851819, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/pl.svg'),
scale: 1.0,
},
},
{
name: "Google Portugal",
camera: {
center: {
lat: 38.7240122810727,
lng: -9.150628263172639,
altitude: 55.299662291551044
},
range: 337.7474313328639,
tilt: 56.79772652682846,
heading: 176.0722118222208,
},
point: { lat: 38.723915999999996, lng: -9.150629, altitude: 35 },
pin: {
background: 'white',
glyph: new URL(base + '/images/pt.svg'),
scale: 1.0,
},
},
{
name: "Google Romania",
camera: {
center: {
lat: 44.43076650172983,
lng: 26.109700164718586,
altitude: 125.57895810814505
},
range: 364.25249956711923,
tilt: 38.517539223834326,
heading: -38.81294924429363,
},
point: { lat: 44.4309897, lng: 26.1095719, altitude: 75 },
pin: {
background: 'white',
glyph: new URL(base + '/images/ro.svg'),
scale: 1.0,
},
},
{
name: "Google Spain",
camera: {
center: {
lat: 40.450078762608875,
lng: -3.6930085080020856,
altitude: 753.6446342341894
},
range: 845.7279793010093,
tilt: 46.752510050599746,
heading: 4.718779524265234,
},
point: { lat: 40.450294199999995, lng: -3.6927915, altitude: 175 },
pin: {
background: 'white',
glyph: new URL(base + '/images/es.svg'),
scale: 1.0,
},
},
{
name: "Google Sweden",
camera: {
center: {
lat: 59.33313751316038,
lng: 18.054618219238293,
altitude: 16.728213706832868
},
range: 377.5210725830039,
tilt: 63.59478230626709,
heading: 98.53138488367703,
},
point: { lat: 59.3332093, lng: 18.0536386, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/se.svg'),
scale: 1.0,
},
},
{
name: "Google Switzerland",
camera: {
center: {
lat: 47.365411056285275,
lng: 8.525063594405356,
altitude: 419.2348376754488
},
range: 166.74918737631742,
tilt: 59.31431457129067,
heading: -32.620415961949206,
},
point: { lat: 47.365452, lng: 8.5249253, altitude: 100 },
pin: {
background: 'white',
glyph: new URL(base + '/images/ch.svg'),
scale: 1.0,
},
}
]
Setelah Anda melakukannya, akan ada halaman lengkap seperti gambar yang ditampilkan, yang memungkinkan pengguna mengklik lokasi mana pun dan terbang ke dan di sekitar lokasi tersebut, lalu keluar.
Selamat, Anda telah menyelesaikan codelab. Mari kita selesaikan di bagian berikutnya dan cari hal baru lainnya untuk dicoba.
Solusi bagian
Untuk langkah ini, halaman yang telah selesai disediakan sebagai solusi untuk memverifikasi penerapan Anda. (Jika menyalin, pastikan Anda menggunakan kunci API Anda sendiri).
Selain itu, jangan lupa bahwa Anda harus mendapatkan file svg bendera (atau file png pilihan Anda) dan menyimpannya di direktori yang dapat ditemukan oleh halaman Anda (di sini file disimpan di folder gambar).
<!DOCTYPE html>
<html>
<head>
<title>Step 9 - More Places!</title>
<style>
body {
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<script>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "<INSERT API KEY>",
v: "alpha",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script>
let map3D = null;
const base = document.location.href.substr(0, document.location.href.lastIndexOf("/"));
const europeCamera = {
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
};
const officeLocations = [
{
name: "Google France",
details: "8 Rue de Londres, 75009 Paris, France",
camera: {
center: { lat: 48.877276, lng: 2.329978, altitude: 48 },
range: 178,
tilt: 57.48,
heading: -17,
},
point: { lat: 48.8775183, lng: 2.3299791, altitude: 60 },
pin: {
background: 'white',
glyph: new URL(base + '/images/fr.svg'),
scale: 1.0,
},
},
{
name: "Google UK",
details: "6 Pancras Square, London N1C 4AG, UK",
camera: {
center: { lat: 51.5332, lng: -0.1260, altitude: 38.8 },
range: 500,
tilt: 56.21672368296945,
heading: -31.15763027564165,
},
point: { lat: 51.5332, lng: -0.1260, altitude: 75 },
pin: {
background: 'white',
glyph: new URL(base + '/images/gb.svg'),
scale: 1.0,
},
},
{
name: "Google Belgium",
details: "Chau. d'Etterbeek 180, 1040 Brussel",
camera: {
center: { lat: 50.83930408436509, lng: 4.38052394507952, altitude: 64.38932203802196},
range: 466.62899893119175,
tilt: 43.61569474716178,
heading: 51.805907046332074,
},
point: { lat: 50.8392653, lng: 4.3808751, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/be.svg'),
scale: 1.0,
},
},
{
name: "Google Czechia",
details: "Stroupežnického 3191/17, 150 00 Praha 5-Smíchov",
camera: {
center: {
lat: 50.07004093853976,
lng: 14.402871475443956,
altitude: 223.39574818495532
},
range: 522.0365799222782,
tilt: 62.39511972890614,
heading: -39.150149539328304,
},
point: { lat: 50.0703122, lng: 14.402668199999999, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/cz.svg'),
scale: 1.0,
},
},
{
name: "Google Denmark",
details: "2, Sankt Petri Passage 5, 1165 København",
camera: {
center: {
lat: 55.680359539635866,
lng: 12.570460204526002,
altitude: 30.447654757346044
},
range: 334.8786935049066,
tilt: 55.38819319004654,
heading: 149.63867461295067,
},
point: { lat: 55.6804504, lng: 12.570279099999999, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/dk.svg'),
scale: 1.0,
},
},
,
{
name: "Google Greece",
details: "Fragkokklisias 6, Athina 151 25",
camera: {
center: {
lat: 38.038634694028055,
lng: 23.802924946201266,
altitude: 196.45884670344995
},
range: 343.57226336076565,
tilt: 54.97375927639567,
heading: -33.26775344055724,
},
point: { lat: 38.038619, lng: 23.8031622, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/gr.svg'),
scale: 1.0,
},
},
{
name: "Google Germany",
details: "ABC-Straße 19, 20354 Hamburg",
camera: {
center: {
lat: 53.55397683312404,
lng: 9.986350507286808,
altitude: 44.83610870143956
},
range: 375.3474077822466,
tilt: 71.35078443829818,
heading: -160.76930098951416,
},
point: { lat: 53.5540227, lng: 9.9863, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/de.svg'),
scale: 1.0,
},
},
{
name: "Google Ireland",
details: "Gordon House, 4 Barrow St, Grand Canal Dock, Dublin 4, D04 V4X7",
camera: {
center: { lat: 53.339816899999995, lng: -6.2362644, altitude: 38.777415761228006 },
range: 500,
tilt: 56.21672368296945,
heading: -31.15763027564165,
},
point: { lat: 53.339816899999995, lng: -6.2362644, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/ie.svg'),
scale: 1.0,
},
},
{
name: "Google Italy",
details: "Isola Building C, Via Federico Confalonieri, 4, 20124 Milano",
camera: {
center: {
lat: 45.486361346538224,
lng: 9.18995496294455,
altitude: 138.55834058400072
},
range: 694.9398023590038,
tilt: 57.822470255679114,
heading: 84.10194883488619,
},
point: { lat: 45.4863064, lng: 9.1894762, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/it.svg'),
scale: 1.0,
},
},
{
name: "Google Lithuania",
details: "Vilnius Tech Park, Antakalnis st. 17, 2nd building, LT-10312, Vilnius",
camera: {
center: {
lat: 54.698040606567965,
lng: 25.30965338542576,
altitude: 111.80276944294413
},
range: 412.5808304977545,
tilt: 43.50793332082195,
heading: -29.181098269421028,
},
point: { lat: 54.6981204, lng: 25.3098617, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/at.svg'),
scale: 1.0,
},
},
{
name: "Google Netherlands",
details: "Claude Debussylaan 34, 1082 MD Amsterdam",
camera: {
center: {
lat: 52.33773837150874,
lng: 4.871754560171063,
altitude: 53.68063996154723
},
range: 473.1982259177312,
tilt: 56.216523350388634,
heading: 71.78252318033718,
},
point: { lat: 52.337801, lng: 4.872065999999999, altitude: 100 },
pin: {
background: 'white',
glyph: new URL(base + '/images/nl.svg'),
scale: 1.0,
},
},
{
name: "Google Norway",
details: "Bryggegata 6, 0250 Oslo",
camera: {
center: { lat: 59.90991209999999, lng: 10.726020799999999, altitude: 38.777415761228006 },
range: 500,
tilt: 56.21672368296945,
heading: -31.15763027564165,
},
point: { lat: 59.90991209999999, lng: 10.726020799999999, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/no.svg'),
scale: 1.0,
},
},
{
name: "Google Poland",
details: "Rondo Daszynskiego 2, 00-843 Warsaw",
camera: {
center: { lat: 52.22844380000001, lng: 20.9851819, altitude: 38.777415761228006 },
range: 500,
tilt: 56.21672368296945,
heading: -31.15763027564165,
},
point: { lat: 52.22844380000001, lng: 20.9851819, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/pl.svg'),
scale: 1.0,
},
},
{
name: "Google Portugal",
details: "R. Duque de Palmela 37 Piso 4, 1250-097 Lisboa",
camera: {
center: {
lat: 38.7240122810727,
lng: -9.150628263172639,
altitude: 55.299662291551044
},
range: 337.7474313328639,
tilt: 56.79772652682846,
heading: 176.0722118222208,
},
point: { lat: 38.723915999999996, lng: -9.150629, altitude: 35 },
pin: {
background: 'white',
glyph: new URL(base + '/images/pt.svg'),
scale: 1.0,
},
},
{
name: "Google Romania",
details: "Bulevardul Corneliu Coposu 6-8, București 030167",
camera: {
center: {
lat: 44.43076650172983,
lng: 26.109700164718586,
altitude: 125.57895810814505
},
range: 364.25249956711923,
tilt: 38.517539223834326,
heading: -38.81294924429363,
},
point: { lat: 44.4309897, lng: 26.1095719, altitude: 75 },
pin: {
background: 'white',
glyph: new URL(base + '/images/ro.svg'),
scale: 1.0,
},
},
{
name: "Google Spain",
details: "Torre Picasso, Pl. Pablo Ruiz Picasso, 1, Tetuán, 28020 Madrid",
camera: {
center: {
lat: 40.450078762608875,
lng: -3.6930085080020856,
altitude: 753.6446342341894
},
range: 845.7279793010093,
tilt: 46.752510050599746,
heading: 4.718779524265234,
},
point: { lat: 40.450294199999995, lng: -3.6927915, altitude: 175 },
pin: {
background: 'white',
glyph: new URL(base + '/images/es.svg'),
scale: 1.0,
},
},
{
name: "Google Sweden",
details: "Kungsbron 2, 111 22 Stockholm",
camera: {
center: {
lat: 59.33313751316038,
lng: 18.054618219238293,
altitude: 16.728213706832868
},
range: 377.5210725830039,
tilt: 63.59478230626709,
heading: 98.53138488367703,
},
point: { lat: 59.3332093, lng: 18.0536386, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/se.svg'),
scale: 1.0,
},
},
{
name: "Google Switzerland",
details: "Brandschenkestrasse 110, 8002 Zürich",
camera: {
center: {
lat: 47.365411056285275,
lng: 8.525063594405356,
altitude: 419.2348376754488
},
range: 166.74918737631742,
tilt: 59.31431457129067,
heading: -32.620415961949206,
},
point: { lat: 47.365452, lng: 8.5249253, altitude: 100 },
pin: {
background: 'white',
glyph: new URL(base + '/images/ch.svg'),
scale: 1.0,
},
}
]
async function init() {
const { Map3DElement, MapMode, Marker3DInteractiveElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');
map3D = new Map3DElement({
...europeCamera,
mode: MapMode.SATELLITE,
});
officeLocations.forEach(office => {
const marker = new Marker3DInteractiveElement({
position: office.point,
label: office.name,
altitudeMode: 'RELATIVE_TO_GROUND',
extruded: true,
});
marker.addEventListener('gmp-click', (event) => {
map3D.flyCameraTo({
endCamera: office.camera,
durationMillis: 2000,
});
map3D.addEventListener('gmp-animationend', () => {
map3D.flyCameraAround({
camera: office.camera,
durationMillis: 2000,
rounds: 1
});
map3D.addEventListener('gmp-animationend', () => {
map3D.flyCameraTo({
endCamera: europeCamera,
durationMillis: 2000,
});
}, { once: true });
}, { once: true });
event.stopPropagation();
});
const markerPin = new PinElement(office.pin);
marker.append(markerPin);
map3D.append(marker);
});
document.body.append(map3D);
}
init();
</script>
</body>
</html>
12. Langkah Berikutnya
Dalam codelab ini, Anda telah mempelajari dasar-dasar fungsi 3D di Maps JavaScript API. Selanjutnya, coba tambahkan beberapa fitur berikut ke peta:
- Tambahkan menu drop-down untuk memungkinkan pemilihan kantor.
- Gunakan beberapa opsi gaya visual penanda lainnya untuk menampilkan lebih banyak efek.
- Lihat library tambahan yang tersedia untuk Maps JavaScript API yang mengaktifkan fitur tambahan, seperti Places untuk menampilkan rating setiap kantor menggunakan ID Tempatnya.
Untuk terus mempelajari lebih lanjut cara menggunakan Google Maps Platform dan 3D di web, buka link berikut: