Membuat penanda agar dapat ditarik

Saat kemampuan penanda untuk dapat ditarik diaktifkan, pengguna dapat menariknya pada peta menggunakan mouse atau tombol panah. Untuk membuat penanda dapat ditarik, tetapkan properti AdvancedMarkerElement.gmpDraggable ke true.

Peta contoh berikut menunjukkan penanda yang dapat ditarik. Di sini, terlihat posisi penanda yang diperbarui saat penarikan selesai (peristiwa dragend diaktifkan):

Untuk menarik penanda dengan keyboard:

  1. Tekan tombol tab sampai penanda difokuskan.
  2. Gunakan tombol panah untuk berpindah ke penanda yang diinginkan.
  3. Untuk mengaktifkan penarikan, tekan Option + Spasi atau Option + Enter (Mac), Alt + Spasi atau Alt + Enter (Windows).
  4. Gunakan tombol panah untuk memindahkan penanda.
  5. Untuk menempatkan penanda di lokasi barunya, tekan Spasi atau Enter. Tindakan ini juga akan menonaktifkan penarikan.
  6. Untuk menonaktifkan penarikan dan mengembalikan penanda ke posisi sebelumnya, tekan Esc.

Melihat kode

TypeScript

async function initMap() {
    // Request needed libraries.
    const { Map, InfoWindow } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

    const map = new Map(document.getElementById('map') as HTMLElement, {
        center: {lat: 37.39094933041195, lng: -122.02503913145092},
        zoom: 14,
        mapId: '4504f8b37365c3d0',
    });

    const infoWindow = new InfoWindow();

    const draggableMarker = new AdvancedMarkerElement({
        map,
        position: {lat: 37.39094933041195, lng: -122.02503913145092},
        gmpDraggable: true,
        title: "This marker is draggable.",
    });
    draggableMarker.addListener('dragend', (event) => {
        const position = draggableMarker.position as google.maps.LatLng;
        infoWindow.close();
        infoWindow.setContent(`Pin dropped at: ${position.lat}, ${position.lng}`);
        infoWindow.open(draggableMarker.map, draggableMarker);
    });

}

initMap();
index.ts

JavaScript

async function initMap() {
  // Request needed libraries.
  const { Map, InfoWindow } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
  const map = new Map(document.getElementById("map"), {
    center: { lat: 37.39094933041195, lng: -122.02503913145092 },
    zoom: 14,
    mapId: "4504f8b37365c3d0",
  });
  const infoWindow = new InfoWindow();
  const draggableMarker = new AdvancedMarkerElement({
    map,
    position: { lat: 37.39094933041195, lng: -122.02503913145092 },
    gmpDraggable: true,
    title: "This marker is draggable.",
  });

  draggableMarker.addListener("dragend", (event) => {
    const position = draggableMarker.position;

    infoWindow.close();
    infoWindow.setContent(`Pin dropped at: ${position.lat}, ${position.lng}`);
    infoWindow.open(draggableMarker.map, draggableMarker);
  });
}

initMap();
index.js

Menetapkan teks deskriptif

Untuk menetapkan teks deskriptif bagi penanda yang dapat dibaca oleh pembaca layar, gunakan atribut AdvancedMarkerElement.title, seperti yang ditampilkan di sini:

    const markerView = new google.maps.marker.AdvancedMarkerElement({
        map,
        position: { lat: 37.4239163, lng: -122.0947209 },
        title: "Some descriptive text.",
    });

Saat atribut title ditetapkan, teks akan terlihat pada pembaca layar, dan akan muncul saat mouse diarahkan ke penanda.