Memulai

Dalam tutorial ini, Anda akan memandu diri Anda membuat program JavaScript pertama Anda menggunakan Peta 3D Fotorealistik di Maps JavaScript: jendela sederhana yang menampilkan tampilan atas Jembatan Golden Gate dengan Marin Headlands di latar belakang.

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.

  1. Buka editor teks pilihan Anda.
  2. Membuat file baru dan menyimpannya 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 ini 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 mengganti YOUR_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>

Menjalankan program

Untuk menjalankan program dan melihat output, ikuti langkah-langkah berikut:

  1. Simpan file HTML yang Anda buat.
  2. Buka file di browser web (Anda dapat mengklik dua kali file, menariknya ke jendela browser, atau mengklik kanan dan menggunakan "Buka dengan").
  3. Anda akan melihat peta di jendela browser.

Selamat! Anda baru saja menulis program menggunakan peta 3D fotorealistik Google Maps JavaScript API.

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.