Memulai

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.

  1. Buka editor teks pilihan Anda.
  2. 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 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>

Jalankan 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 "Open with").
  3. 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.