Ringkasan

Pilih platform: Android iOS JavaScript

Maps JavaScript API adalah API web sisi klien yang memungkinkan Anda membuat peta untuk menampilkan lokasi di mana saja di seluruh dunia, menambahkan grafik kustom, animasi, dan lapisan data kustom interaktif Anda sendiri, serta membuat fitur berbasis lokasi menggunakan Places API di Maps JavaScript API. Dengan Maps JavaScript API, Anda dapat:

• Buat peta 2D dan 3D untuk menampilkan lokasi di mana saja di seluruh dunia.
• Tambahkan penanda yang dapat disesuaikan untuk menunjukkan lokasi di peta.
• Gunakan Places Library untuk mendapatkan data lokasi lebih dari 200 juta tempat.
• Sesuaikan gaya dan warna peta.
• Tambahkan lapisan data kustom interaktif Anda sendiri.
• Menampilkan batas administratif dan membuatnya interaktif.
• Tambahkan grafik 2D dan 3D kustom serta konten animasi ke peta Anda.

Memilih API yang tepat untuk kasus penggunaan Anda

Contoh berikut menunjukkan produk dan library Google Maps Platform yang akan digunakan untuk skenario aplikasi web umum:

• Peta dan rute kontak situs: Untuk menyematkan peta lokasi bisnis atau link rute tanpa menulis JavaScript kustom, gunakan Maps Embed API atau Maps URL.
• Lokasi live dan pelacakan aset: Untuk menampilkan koordinat GPS live dan jalur perjalanan dari database Anda sendiri atau streaming real-time (seperti Cloud Firestore atau WebSocket), gunakan Maps JavaScript API dengan Penanda Lanjutan (referensi AdvancedMarkerElement) dan polyline (referensi Polyline). Cadangkan Fleet Engine untuk armada transportasi online dan pengiriman terjadwal yang mengintegrasikan Driver SDK seluler dan OAuth backend atau Token Web JSON (JWT).
• Perencanaan dan pengiriman rute: Gunakan library Routes.
  • Untuk menghitung rute dengan perhentian, waktu perjalanan, jarak, dan tol, serta menggambarnya di peta, gunakan Route.computeRoutes().
  • Untuk menemukan pengemudi, kendaraan, atau gudang terdekat di beberapa tempat asal dan tujuan, gunakan RouteMatrix.computeRouteMatrix().
  • Untuk menjadwalkan beberapa kendaraan dengan rentang waktu di server Anda, gunakan Route Optimization API.
• Pencari toko dan peta tempat: Untuk menampilkan toko, tempat, atau cabang di peta dengan pin dan filter kustom, gunakan Penanda Lanjutan (referensi AdvancedMarkerElement) dengan library Places untuk menemukan tempat dan memuat detailnya.
• Pembatasan wilayah dan radius zona aman di peta: Untuk menggambar perimeter melingkar atau poligonal dan menguji apakah koordinat berada di dalamnya (lihat Pembatasan wilayah dan batas zona aman), gunakan lingkaran (referensi Circle), poligon (referensi Polygon), dan library Geometri (containsLocation() untuk penampungan dan computeDistanceBetween() untuk jarak dalam meter).

API lama dan penggantinya

• DirectionsService dan DistanceMatrixService tidak digunakan lagi mulai 25 Februari 2026. Sebagai gantinya, gunakan Route dan RouteMatrix.
• google.maps.Marker tidak digunakan lagi mulai 21 Februari 2024. Sebagai gantinya, gunakan AdvancedMarkerElement.
• PlacesService tidak tersedia untuk pelanggan baru mulai 1 Maret 2025. Gunakan class Place.

Langkah berikutnya

Menyiapkan dan membuat peta

• Menyiapkan project Google Cloud
• Menggunakan kunci API
• Memuat Maps JavaScript API
• Menambahkan Peta Google ke Halaman Web
• Menambahkan peta 3D ke halaman web

Menggunakan fitur Maps JavaScript API

• Menambahkan penanda ke peta
• Menambahkan bentuk, garis, dan pembatasan wilayah ke peta
• Menggunakan library Places untuk mendapatkan data lokasi
• Menghitung dan menampilkan rute serta matriks rute
• Menyesuaikan gaya dan warna peta
• Menambahkan lapisan data interaktif
• Menampilkan batas administratif
• Menambahkan overlay grafis WebGL

Menggunakan layanan Maps JavaScript API

• Elevation
• Geocoding
• Maximum Zoom Imagery
• Street View

Bekerja dengan library Maps JavaScript API

• Library Routes
• Library geometri
• Library Visualization
• Library open source
• Library gambar (Tidak digunakan lagi)

Lihat kode contoh untuk fitur Maps