Ringkasan

Peta 3D di Maps JavaScript membantu Anda menciptakan pengalaman peta 3D yang imersif. Library ini menyediakan alat untuk menyesuaikan gaya peta, meningkatkan aksesibilitas, dan meningkatkan kegunaan, sehingga memungkinkan pengembangan aplikasi yang menarik dan interaktif.

Berikut contoh tindakan yang dapat Anda lakukan dengan Peta 3D di Maps JavaScript API:

Alasan menggunakan Peta 3D di Maps JavaScript

Peta 3D di Maps JavaScript menyediakan class Map3DElement (<gmp-map-3d>) di library maps3d sehingga Anda dapat menggunakan gambar 3D Google di seluruh aplikasi Anda. Peta 3D memberikan pengalaman rendering 3D bawaan, sehingga Anda dapat menggabungkan atau bereksperimen dengan lingkungan dunia nyata, pemandangan kota, dan tur tempat terkenal dalam tampilan 3D.

Gunakan <gmp-map-3d> 3D (Map3DElement di library maps3d) untuk tampilan atas rentang, arah, kemiringan kamera, dan medan 3D, bangunan 3D yang dimunculkan, dan objek 3D seperti Marker3DElement (<gmp-marker-3d>). Untuk peta jalan 2D datar, pin AdvancedMarkerElement 2D standar, dan gaya visual vektor 2D, gunakan <gmp-map> 2D (MapElement atau google.maps.Map di library maps).

Apa yang dapat Anda lakukan dengan Peta 3D di Maps JavaScript?

• Buat pengalaman peta dunia nyata: Render citra udara 3D fotorealistis kota, medan, dan tempat terkenal dalam mode SATELLITE atau HYBRID (yang menempatkan label peta dasar di atas citra satelit), atau tampilkan peta dasar 3D bergaya dalam mode ROADMAP menggunakan properti mode. Untuk mengetahui informasi selengkapnya, lihat Mengubah mode peta.
• Sesuaikan gaya peta:
  • Gaya visual peta berbasis cloud 3D: Mengontrol visibilitas dan gaya visual lokasi menarik (POI) dan jalan di peta dasar. Untuk mengetahui informasi selengkapnya, lihat Menyesuaikan peta 3D.
  • Penanda, popover, polyline, dan poligon kustom: Identifikasi lokasi dan gambar rute atau batas 3D di peta menggunakan MarkerElement, Marker3DElement, Marker3DInteractiveElement, PopoverElement, Polyline3DElement, dan Polygon3DElement. Untuk mengetahui informasi selengkapnya, lihat Penanda, Popover, serta Bentuk dan garis.
  • Model 3D dan aset glTF: Tambahkan model 3D glTF PBR kustom untuk bangunan, tempat terkenal, atau objek pada koordinat dunia nyata menggunakan Model3DElement. Untuk mengetahui informasi selengkapnya, lihat Model.
• Membangun peta imersif:
  • Jalur kamera preset: Pandu pengguna menjelajahi peta 3D Anda dengan flyover kamera dan animasi orbital yang telah ditentukan menggunakan flyCameraTo dan flyCameraAround. Untuk mengetahui informasi selengkapnya, lihat Menganimasikan jalur kamera.
  • Mengontrol interaksi pengguna: Sesuaikan kontrol dan gerakan kamera yang tersedia untuk pengguna Anda. Untuk mengetahui informasi selengkapnya, lihat Kontrol dan eksplorasi peta 3D, Membatasi tampilan dan batas kamera, dan Mengontrol posisi kamera.

Contoh singkat

Untuk memuat library maps3d dan merender elemen <gmp-map-3d> dengan mode="HYBRID", center (lat,lng,altitude), range, tilt, dan heading, gunakan cuplikan berikut:

<gmp-map-3d
  style="height: 400px; width: 100%;"
  mode="HYBRID"
  center="40.7484,-73.9857,200"
  range="900"
  tilt="67"
  heading="35">
</gmp-map-3d>
<script async
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=beta&libraries=maps3d">
</script>

Ganti YOUR_API_KEY dengan kunci API Google Maps Platform Anda.

Cara menggunakan Peta 3D di Maps JavaScript

Cakupan

Mesh bangunan 3D dan tempat terkenal fotorealistik tersedia di area metropolitan tertentu di seluruh negara dan wilayah yang didukung. Di wilayah tanpa cakupan mesh 3D (seperti India), <gmp-map-3d> merender citra satelit atau peta jalan 2D yang ditempatkan di atas elevasi medan 3D tanpa bangunan 3D yang diekstrusi. Untuk menampilkan tempat terkenal di area tanpa cakupan mesh 3D, Anda dapat menempatkan model 3D glTF kustom pada koordinatnya menggunakan Model3DElement, atau menggunakan <gmp-map> 2D. Untuk mengetahui ketersediaan per negara (di kolom Maps JavaScript 3D), lihat Detail Cakupan Google Maps Platform.

Langkah berikutnya

• Baca panduan Memulai untuk membuat peta 3D "Halo Dunia".
• Coba codelab pengantar untuk mempelajari cara menambahkan fitur ke peta.
• Perluas pengetahuan Anda tentang penanda dan animasi di codelab berikutnya.
• Jelajahi koleksi contoh peta Google untuk menemukan contoh peta yang sesuai dengan kasus penggunaan Anda.