Mulai

Dalam tutorial ini, Anda akan dipandu untuk membuat program JavaScript pertama 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. 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>

Menambahkan JavaScript

Selanjutnya, Anda akan menambahkan kode JavaScript untuk memuat peta. Kode ini berisi dua elemen:

  • gmp-map-3d berisi parameter yang digunakan untuk melakukan inisialisasi 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" range="2000" tilt="75" heading="330"></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-nya, 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 Maps JavaScript API Google.

Langkah berikutnya

  • Buat pengalaman peta 3D yang lebih rumit menggunakan contoh Google yang ada.
  • Temukan potensi penuh Peta 3D di Maps JavaScript API dengan membaca dokumentasi referensi.