1. Sebelum memulai
Codelab ini ditujukan untuk membantu Anda memahami cara membuat Peta 3D pertama menggunakan Peta 3D Fotorealistik di Maps JavaScript. Anda akan mempelajari dasar-dasar tentang memuat komponen Maps JavaScript API yang tepat, menampilkan Peta 3D pertama, dan menggambar fitur di atasnya.
Yang akan Anda buat.
Dalam codelab ini, Anda akan mem-build aplikasi web 3D yang melakukan hal berikut:
- Memuat Maps JavaScript API secara dinamis.
- Menampilkan Peta 3D yang berpusat di CN Tower di Toronto.
- Menampilkan batas di sekitar lokasi.
- Menonaktifkan lokasi menarik di Peta 3D.
- Mengekstrusi batas untuk mencakup lokasi.
Yang akan Anda pelajari
- Memulai Google Maps Platform.
- Memuat Maps JavaScript API secara dinamis dari kode JavaScript menggunakan Dynamic Library Import.
- Memuat Peta 3D menggunakan class Map3DElement.
- Menggunakan poligon dan ekstrusi untuk menggambar di peta.
2. 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
Ya, hanya itu yang diperlukan untuk menambahkan Peta 3D ke halaman Anda, tidak ada yang lain, sangat mudah!
Persyaratan Lainnya 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 dan mengedit file yang akan dilihat
- Browser web untuk melihat file saat Anda bekerja
3. 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.
4. Memuat Maps JavaScript API
Setelah mengikuti semua langkah di bagian penyiapan, Anda siap untuk mulai membuat Peta 3D pertama.
Buat halaman web paling sederhana yang dapat Anda bayangkan.
Pertama, kita akan membuat halaman web yang sangat mendasar untuk menghosting semua kode kita. Anda dapat melakukannya di editor atau platform pilihan Anda.
<!DOCTYPE html>
<html>
<head>
<title>3D Maps Codelab</title>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
</body>
</html>
Tambahkan kode dan simpan file ke lokasi yang dapat diakses menggunakan nama seperti 3dmap.html, lalu buka di browser web untuk melihat status halaman saat ini dan melihat apakah ada error.
Seperti Peta 2D, dasar Peta 3D adalah Maps JavaScript API, jadi Anda harus memuat Maps JavaScript API terlebih dahulu.
Hal ini dapat dilakukan dengan beberapa cara, yang dapat Anda temukan di bagian Memuat Maps JavaScript API dalam dokumentasi.
Dalam demonstrasi ini, kita akan menggunakan metode Impor Library Dinamis yang lebih modern karena metode ini memungkinkan Anda mengontrol hanya elemen yang perlu dimuat, sehingga menghemat ukuran download dan waktu startup.
Menambahkan loader dinamis
Untuk menggunakan loader dinamis, pastikan Anda menambahkan tag skrip berikut ke halaman web, dengan menambahkan KUNCI API Anda sendiri di tempat yang sesuai (yang Anda peroleh di langkah 2). Tempatkan tag skrip ini di antara bagian isi halaman web dasar.
<script async defer>
(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: "YOUR_API_KEY",
v: "alpha",
});
</script>
Perhatikan bahwa pada tahap rilis produk ini, kami menggunakan cabang alfa API untuk mendapatkan akses ke Peta 3D. Versi ini berisi fitur paling eksperimental dari produk dan memungkinkan Anda menguji kode akses awal saat sedang dikembangkan sehingga Anda dapat siap menggunakannya pada waktu rilis.
Sekarang Anda akan memiliki halaman web dasar yang berisi loader dinamis (jika Anda membuka halaman, tampilannya akan kosong, tetapi tidak akan ada error). Sekarang kita siap untuk menambahkan Peta 3D.
Jika karena alasan tertentu kode Anda tidak berfungsi, Anda dapat membuka Langkah 6 dan membandingkannya dengan hasil akhir untuk melihat apa yang salah.
Untuk mengetahui alasan halaman mungkin tidak berfungsi, lihat konsol error di browser Anda untuk men-debug alasannya. Halaman error memberikan petunjuk tentang cara melakukannya untuk berbagai browser dan juga menjelaskan berbagai pesan error serta memberikan beberapa alasan umum mengapa API mungkin tidak berfungsi. Ini adalah referensi yang baik untuk digunakan selama pengembangan untuk mengetahui apa yang mungkin salah dengan implementasi apa pun.
5. Menampilkan peta
Jadi, sekarang kita siap untuk menambahkan Peta 3D pertama ke halaman.
Peta 3D dibuat menggunakan class google.maps.maps3d.Map3DElement, yang memungkinkan kita membuat dan menggunakan instance Peta 3D. Dalam codelab ini, kita akan menggunakan objek Peta 3D secara langsung, bukan melalui tag HTML.
Membuat Fungsi Inisialisasi dan memuat library
Pertama, kita akan membuat fungsi yang memuat elemen ke dalam halaman. Lihat kodenya, pertama-tama kita membuat fungsi asinkron, yang memungkinkan kita memastikan bahwa seluruh elemen dimuat sebelum melanjutkan dengan kode lainnya. Kemudian, kita menjalankan fungsi init saat halaman dimuat.
Tambahkan ini setelah skrip pemuatan dalam bagian isi halaman.
<script>
async function init() {
const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");
}
init();
</script>
Perhatikan bahwa kita menggunakan ekspresi await untuk memastikan library dimuat sebelum melanjutkan.
Membuat elemen peta 3D dan menentukan lokasi
Selanjutnya, kita perlu menentukan lokasi yang ingin memiliki tampilan peta. Untuk Peta 3D, ada sejumlah parameter berbeda yang dapat Anda gunakan untuk menetapkan tampilan. Ini mengacu pada parameter kamera virtual yang menjelaskan apa yang Anda lihat dalam tampilan.
Mari kita buat tampilan CN Tower yang terlihat seperti ini.
Pertama, kita perlu menentukan koordinat yang ingin dilihat. Tampilan ini terdiri dari dua tampilan yang berbeda
- Titik yang ingin kita lihat, termasuk ketinggiannya.
- Jarak dan arah kamera virtual yang melihat titik.
Jika melihat gambar berikut, Anda bisa mendapatkan gambaran tentang cara kerja setelan ini.
Pusat elemen adalah titik yang Anda lihat, sedangkan rentang adalah jarak Anda dari objek dan kemiringan adalah sudut saat Anda melihat gambar. Anda juga dapat menetapkan heading dan roll objek jika ingin mengontrolnya juga, tetapi kita tidak menggunakannya di sini.
Sekarang kita akan membuat Peta 3D di halaman, tambahkan kode berikut ke halaman di bagian init setelah library diimpor.
const map3DElement = new Map3DElement({
center: { lat: 43.6425, lng: -79.3871, altitude: 400 },
range: 1000,
tilt: 60,
mode: MapMode.HYBRID,
});
document.body.append(map3DElement);
Pertama, kita membuat elemen dan menetapkan parameter lokasi yang sesuai, lalu menambahkan komponen di halaman (kita dapat menetapkannya ke div yang ada jika ada).
Kode Anda sekarang akan terlihat seperti contoh di sini:
<!DOCTYPE html>
<html>
<head>
<title>3D Maps Codelab</title>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script async defer>
(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: "YOUR_API_KEY",
v: "alpha",
});
</script>
<script>
async function init() {
const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");
const map3DElement = new Map3DElement({
center: { lat: 43.6425, lng: -79.3871, altitude: 400 },
range: 1000,
tilt: 60,
mode: MapMode.HYBRID
});
document.body.append(map3DElement);
}
init();
</script>
</body>
</html>
Sekarang kita dapat menyimpan file dan membuka halaman di browser untuk melihatnya berfungsi. Kita akan melihat kamera yang mengarah ke bawah pada menara seperti yang ditunjukkan pada gambar. Bermainlah sebelum melanjutkan dan menambahkan kotak di atas menara.
6. Menambahkan dan mengekstrud fitur
Jadi, setelah kita memiliki Peta 3D, mari kita lanjutkan dan tandai objek kepada pengguna bahwa objek tersebut adalah item yang menarik. Dalam hal ini, kita akan menggunakan poligon dan fungsi ekstrusi untuk membuat kotak di sekitar Menara CN, sehingga terlihat seperti tampilan berikut.
Menyembunyikan media yang tak teratur
Hal pertama yang mungkin Anda perhatikan adalah kami telah menonaktifkan lokasi menarik. Dalam peta ini, kita ingin fokusnya adalah menara itu sendiri sehingga kita perlu menghapus elemen visual lainnya.
Untuk melakukannya, kita perlu menambahkan perubahan kode untuk menyembunyikan label. Perbarui mode garis peta ke SATELLITE untuk menyembunyikan titik.
mode: MapMode.SATELLITE,
Menetapkan properti ini akan menonaktifkan label pada peta, yang tidak hanya mencakup lokasi menarik, tetapi juga jalan dan garis batas serta membuat tampilan lokasi yang "bersih".
Menambahkan dan menata gaya poligon
Langkah berikutnya adalah menambahkan poligon ke halaman. Hal ini dapat dilakukan dalam dua langkah. Pertama, kita perlu memuat fungsi yang berisi informasi yang diperlukan, lalu menentukan detail gaya visual poligon, seperti warnanya atau apakah poligon ditampilkan di belakang fitur lain.
Pertama, kita menambahkan class yang diperlukan ke halaman, menggunakan baris kode berikut.
const { Polygon3DElement, AltitudeMode } = await google.maps.importLibrary("maps3d");
Tindakan ini akan memuat class Polygon3DElement dan AltitudeMode ke dalam halaman, yang diperlukan untuk menambahkan objek poligon ke dalam tampilan.
Poligon dapat memiliki sejumlah setelan berbeda yang dapat mengontrol tampilan, mulai dari lebar goresan, warna (baik berdasarkan nama maupun nilai heksadesimal) dan opasitas setelan batas dan isi, untuk mengontrol apakah poligon ditampilkan di belakang fitur atau bangunan lain, misalnya : menggambar segmen yang terhalang. Anda dapat menemukan detail selengkapnya dalam dokumentasi untuk class Polygon3DElement.
Fitur lain yang perlu kita tetapkan adalah agar Poligon digambar dengan cara diekstrusi. Artinya, menggambar poligon pada ketinggian yang ditetapkan, lalu memperluasnya ke tanah. Hal ini memberi poligon jumlah tinggi seperti kotak (yang dapat Anda lihat pada gambar di atas). Hal ini juga mengharuskan kita menetapkan mode ketinggian pada poligon, itulah sebabnya kita perlu memuat konstanta AltitudeMode di atas. Untuk mengekstrud poligon, nilai ini harus disetel ke ABSOLUTE atau RELATIVE_TO_GROUND guna mendapatkan posisi yang benar dari ketinggian pada vertex poligon.
Kode ini membuat objek literal yang berisi properti ini yang kemudian dapat digunakan untuk membuat objek Polygon3DElement seperti yang ditunjukkan:
const polygonOptions = {
strokeColor: "#EA433580",
strokeWidth: 4,
fillColor: "#0000FF80",
altitudeMode: "ABSOLUTE",
extruded: true,
drawsOccludedSegments: true,
}
const towerPolygon = new google.maps.maps3d.Polygon3DElement(polygonOptions);
Sekarang kita telah membuat objek poligon dan kita juga harus menetapkan koordinat geografisnya. Poligon dapat memiliki koordinat dalam dan luar, bergantung pada cara poligon direpresentasikan. innerCoordinates memberikan bentuk potongan dalam poligon dan outerCoordinates menentukan batas luar poligon. Karena ini adalah poligon, bukan garis, koordinat harus dimulai dan diakhiri pada titik yang sama untuk memberikan bentuk yang lengkap.
Anda dapat menentukan koordinat menggunakan array objek atau literal LatLng atau LatLngAltitude dan kita dapat melihatnya untuk poligon dasar.
towerPolygon.outerCoordinates = [
{ lat: 43.6427196, lng: -79.3876802, altitude: 600 },
{ lat: 43.6421742, lng: -79.3869184, altitude: 600 },
{ lat: 43.643001, lng: -79.3866475, altitude: 600 },
{ lat: 43.6427196, lng: -79.3876802, altitude: 600 }
];
Setelah menyiapkan gaya dan koordinat untuk poligon, kita siap menambahkannya ke halaman. Poligon adalah elemen turunan dari Elemen Peta dan perlu ditambahkan ke objek peta yang ada di halaman. Tambahkan kode berikut ke halaman.
map3DElement.append(towerPolygon);
Setelah itu, kita akan memiliki implementasi lengkap berikut, seperti yang ditunjukkan di sini (kecuali akan memiliki kunci API Anda sendiri). Kita siap menjalankan halaman dan melihat hasilnya.
<!DOCTYPE html>
<html>
<head>
<title>3D Maps Codelab</title>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script async defer>
(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: "YOUR_API_KEY",
v: "alpha",
});
</script>
<script>
async function init() {
const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");
const map3DElement = new Map3DElement({
center: { lat: 43.6425, lng: -79.3871, altitude: 400 },
range: 1000,
tilt: 60,
mode: MapMode.SATELLITE,
});
const { Polygon3DElement, AltitudeMode } = await google.maps.importLibrary("maps3d");
const polygonOptions = {
strokeColor: "#EA433580",
strokeWidth: 4,
fillColor: "#0000FF80",
fillOpacity: 0.2,
altitudeMode: "ABSOLUTE",
extruded: true,
drawsOccludedSegments: true,
}
const towerPolygon = new google.maps.maps3d.Polygon3DElement(polygonOptions);
towerPolygon.outerCoordinates = [
{ lat: 43.6427196, lng: -79.3876802, altitude: 600 },
{ lat: 43.6421742, lng: -79.3869184, altitude: 600 },
{ lat: 43.643001, lng: -79.3866475, altitude: 600 },
{ lat: 43.6427196, lng: -79.3876802, altitude: 600 }
];
map3DElement.append(towerPolygon);
document.body.append(map3DElement);
}
init();
</script>
</body>
</html>
Jika kodenya benar, Anda akan melihat halaman dengan Peta 3D dan poligon berikut.
Anda telah berhasil membuat peta 3D pertama Anda menggunakan Google Maps Platform, termasuk memuat Maps JavaScript API, membuat peta 3D, dan menambahkan poligon yang diekstrusi.
7. Apa langkah selanjutnya?
Dalam codelab ini, Anda telah mempelajari apa saja yang dapat Anda lakukan dengan Maps JavaScript API. Selanjutnya, coba tambahkan beberapa fitur berikut ke peta:
- Tambahkan tombol untuk mengaktifkan dan menonaktifkan lokasi menarik.
- Tambahkan beberapa garis yang menunjukkan rute ke dan dari berbagai tempat.
- Tetapkan beberapa batasan batas untuk mengontrol tempat pengguna dapat memindahkan tampilan.
- Lihat library tambahan yang tersedia untuk Maps JavaScript API yang mengaktifkan layanan tambahan, seperti Places atau Directions.
Untuk terus mempelajari lebih lanjut cara menggunakan Google Maps Platform dan 3D di web, buka link berikut: