Penanda

Gunakan penanda untuk menarik perhatian pengguna ke suatu lokasi di peta. Panduan ini menunjukkan cara menggunakan dan menyesuaikan penanda dalam peta 3D. Anda dapat mengontrol bentuk, ukuran, dan warna penanda, selain ketinggian tempat penanda muncul. Contoh berikut menunjukkan penanda dasar:

Peta 3D di Maps JavaScript menyediakan dua class penanda yang berbeda, yang masing-masing dioptimalkan untuk penggunaan tertentu. Tabel berikut menunjukkan perbedaan dan pertimbangan antara dua class yang tersedia:

Kemampuan MarkerElement Marker3DElement
Penyesuaian Tinggi (Mendukung elemen HTML kustom, API animasi inti, dll.) Rendah (Kurang dapat disesuaikan)
Performa Performa interaksi yang lebih rendah (FPS menurun dengan sejumlah besar penanda) Performa interaksi yang lebih tinggi (Dioptimalkan untuk merender set data besar)
Kapasitas yang direkomendasikan Performa interaksi yang andal hingga sekitar 1.000 penanda Direkomendasikan untuk menangani lebih dari 1.000 penanda

Menyesuaikan warna, skala, dan gambar ikon

Sesuaikan latar belakang, glyph, warna batas, dan ukuran penanda default.

Penanda kustom

Ganti ikon penanda default dengan aset SVG kustom.

Penanda dengan grafik

Menetapkan ketinggian penanda

Anda dapat menetapkan ketinggian penanda dengan mengekstrusi penanda dan menetapkan ketinggian.

Penanda yang diekstrusi

Membuat penanda merespons peristiwa klik dan keyboard

Buat penanda merespons klik dan peristiwa keyboard dengan menambahkan pemroses peristiwa click.

function initMap() {
  const map = new Map3DElement({
    center: { lat: 37.4690, lng: -122.1074, altitude: 0 },
    tilt: 67.5,
    range: 45000,
    mode: MapMode.HYBRID
  });

  const interactiveMarker = new google.maps.marker.Marker3DInteractiveElement({
    map,
    position: {lat: 37.4239163, lng: -122.0947209},
  });

  interactiveMarker.addEventListener('gmp-click', (event) => {
    // Handle the click event.
    // ...
  });
}

Menetapkan perilaku penanda saat tumpang-tindih

Tentukan perilaku penanda saat tumpang-tindih dengan penanda atau label peta lainnya.

const marker = new Marker3DElement({
    position: {lat, lng},
    collisionBehavior: google.maps.CollisionBehavior.REQUIRED
});

Performa penanda

Penanda HTML kustom (MarkerElement) menawarkan performa yang lebih rendah daripada penanda 3D standar (Marker3DElement). Untuk aplikasi dengan lebih dari 1.000 penanda, sangat disarankan untuk menggunakan Marker3dElement class guna memastikan performa yang optimal.

Langkah berikutnya