Bermigrasi ke penanda lanjutan

Mulai 21 Februari 2024 (v3.56), google.maps.Marker dihentikan. Sebaiknya Anda beralih ke class google.maps.marker.AdvancedMarkerElement yang baru. Penanda lanjutan memberikan peningkatan substansial dibandingkan dengan class google.maps.Marker yang lama.

Pelajari penghentian ini lebih lanjut

Untuk memperbarui penanda lama menjadi penanda lanjutan, lakukan langkah-langkah berikut:

  1. Tambahkan kode untuk mengimpor library penanda. Perhatikan bahwa penanda versi sebelumnya (google.maps.Marker) tidak memiliki persyaratan ini.
  2. Ubah google.maps.Marker menjadi google.maps.marker.AdvancedMarkerElement
  3. Tambahkan ID peta ke kode inisialisasi peta Anda. Misalnya, mapId: 'DEMO_MAP_ID'. Anda boleh menggunakan "DEMO_MAP_ID" jika belum memiliki ID peta.

Menambahkan library Penanda Lanjutan

Metode yang Anda gunakan untuk memuat library bergantung pada cara halaman web Anda memuat Maps JavaScript API.

  • Jika halaman web Anda menggunakan pemuatan skrip dinamis, tambahkan library penanda dan impor AdvancedMarkerElement (dan jika perlu PinElement) saat runtime, seperti yang ditunjukkan di sini.

    const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");

  • Jika halaman web Anda menggunakan tag pemuatan skrip langsung lama, tambahkan libraries=marker ke skrip pemuatan, seperti yang ditunjukkan dalam cuplikan berikut.

    <script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly&libraries=marker"
defer
></script>

Pelajari lebih lanjut cara memuat Maps JavaScript API

Contoh

Contoh kode berikut menampilkan kode untuk menambahkan penanda lama, diikuti dengan kode untuk contoh yang sama menggunakan penanda lanjutan:

Sebelum migrasi

// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };

const map = new google.maps.Map(document.getElementById("map"), {
  zoom: 4,
  center: position,
});

// The marker, positioned at Uluru
const marker = new google.maps.Marker({
  map: map,
  position: position,
  title: 'Uluru',
});

Setelah migrasi

  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };

  const map = new google.maps.Map(document.getElementById("map"),  {
    zoom: 4,
    center: position,
    mapId: "DEMO_MAP_ID", // Map ID is required for advanced markers.
  });

    // The advanced marker, positioned at Uluru
    const marker = new google.maps.marker.AdvancedMarkerElement({
        map,
        position: position,
        title: 'Uluru',
    });

Menjelajahi fitur penanda lanjutan

Penanda lanjutan dapat disesuaikan dengan beberapa cara baru. Kini Anda dapat menyesuaikan ukuran (skala) penanda, serta mengubah warna latar belakang, batas, dan glyph. Gambar grafik kustom lebih mudah digunakan, dan penanda kustom kini dapat dibuat menggunakan HTML dan CSS. Pelajari lebih lanjut semua hal yang dapat Anda lakukan dengan penanda lanjutan: