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 (lihat langkah-langkah di bawah).
  2. Ubah google.maps.Marker menjadi google.maps.marker.AdvancedMarkerElement; jika pernyataan impor Anda mendeklarasikan AdvancedMarker, Anda dapat menghilangkan jalur yang memenuhi syarat.
  3. Tambahkan ID peta ke kode inisialisasi peta Anda. Misalnya, gunakan mapId: 'DEMO_MAP_ID' untuk tujuan pengujian jika Anda 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 impor library 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

// Import the needed libraries.
// Not required if the legacy direct script loading tag is in use.
const { Map } = await.google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

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

const map = new 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 AdvancedMarkerElement({
    map,
    position: position,
    title: 'Uluru/Ayers Rock',
});

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: