Dalam tutorial ini, Anda akan memandu pembuatan program JavaScript pertama Anda menggunakan Peta 3D Fotorealistik di Maps JavaScript: jendela sederhana yang menampilkan tampilan overhead Jembatan Golden Gate dengan latar belakang Marin Headlands.
Setelah menyelesaikan tutorial, Anda akan melihat peta berikut di lingkungan pengembangan:
Menyiapkan lingkungan Anda
Sebelum mulai menulis kode, Anda harus menyiapkan lingkungan yang menjalankan JavaScript. Untuk tutorial ini, Anda akan menggunakan browser web sebagai lingkungan Anda. Semua browser web modern memiliki dukungan bawaan untuk JavaScript, sehingga Anda tidak perlu menginstal software tambahan apa pun.
- Buka editor teks pilihan Anda.
- Buat file baru dan simpan dengan ekstensi
.html
(misalnya,hello-p3djs.html
).
Menulis halaman HTML
Untuk memulai, Anda akan membuat halaman web dengan struktur HTML dasar:
<!DOCTYPE html>
<html>
<head>
<title>Hello Photorealistic 3D Maps in Maps JavaScript</title>
</head>
<body>
<!-- Your JavaScript code will go here -->
</body>
</html>
Tambahkan JavaScript
Berikutnya, Anda akan menambahkan kode JavaScript untuk memuat peta. Kode berisi dua elemen:
gmp-map-3d
berisi parameter yang digunakan untuk menginisialisasi posisi dan tampilan kamera awal.script
berisi panggilan untuk memuat Maps JavaScript API. Pastikan untuk menggantiYOUR_KEY
dengan kunci API Anda.
<!DOCTYPE html>
<html>
<head>
<title>Hello Photorealistic 3D Maps in Maps JavaScript</title>
<style>
html,
body {
height:100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<gmp-map-3d center="37.841157, -122.551679" tilt="67.5"></gmp-map-3d>
<script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_KEY>&v=alpha&libraries=maps3d"></script>
</body>
</html>
Jalankan program
Untuk menjalankan program dan melihat output, ikuti langkah-langkah berikut:
- Simpan file HTML yang Anda buat.
- Buka file di browser web (Anda dapat mengklik dua kali file, menariknya ke jendela browser, atau mengklik kanan dan menggunakan "Open with").
- Anda akan melihat peta di jendela browser Anda.
Selamat! Anda baru saja menulis program menggunakan peta 3D fotorealistik Maps JavaScript API dari Google.
Langkah berikutnya
- Buat pengalaman peta 3D yang lebih rumit menggunakan contoh Google yang sudah ada.
- Temukan potensi penuh Maps 3D di Maps JavaScript API dengan membaca dokumentasi referensi.