ทําให้คลิกสามารถคลิกได้และเข้าถึง

เมื่อตัวทำเครื่องหมายคลิกหรือลากได้ เครื่องหมายจะตอบสนองต่อการป้อนข้อมูลด้วยแป้นพิมพ์และเมาส์ คุณสามารถใช้เมาส์หรือแป้นพิมพ์เพื่อเลื่อนไปมาระหว่างเครื่องหมายต่างๆ และเลื่อนเครื่องหมายถ้าสามารถลากได้ โปรแกรมอ่านหน้าจออ่านข้อความที่ระบุในตัวเลือก title ได้

• หากต้องการทำให้เครื่องหมายคลิกได้ ให้ตั้งค่าพร็อพเพอร์ตี้ AdvancedMarkerElement.gmpClickable เป็น true และเพิ่มเครื่องจัดการเหตุการณ์การคลิก
• หากต้องการทำให้เครื่องหมายลากได้ ให้ตั้งค่าพร็อพเพอร์ตี้ AdvancedMarkerElement.gmpDraggable เป็น true
• หากต้องการกำหนดข้อความอธิบายสำหรับตัวทำเครื่องหมาย ให้ใช้ตัวเลือก AdvancedMarkerElement.title

ทำให้เครื่องหมายคลิกได้

ตัวอย่างต่อไปนี้แสดงแผนที่ซึ่งมีเครื่องหมายที่สามารถคลิกได้และโฟกัสได้ 5 ตัว

วิธีไปยังส่วนต่างๆ ของเครื่องหมายโดยใช้แป้นพิมพ์

1. ใช้ปุ่ม Tab เพื่อโฟกัสที่เครื่องหมายแรก หากมีเครื่องหมายหลายตำแหน่งบนแผนที่เดียวกัน ให้ใช้ปุ่มลูกศรเพื่อวนผ่านเครื่องหมาย
2. หากเครื่องหมายสามารถคลิกได้ ให้กดแป้น Enter เพื่อ "คลิก" หากเครื่องหมายมีหน้าต่างข้อมูล คุณจะสามารถเปิดหน้าต่างได้โดยคลิกหรือกดแป้น Enter หรือแป้นเว้นวรรค เมื่อหน้าต่างข้อมูลปิดลง โฟกัสจะกลับไปที่เครื่องหมายที่เกี่ยวข้อง
3. กด Tab อีกครั้งเพื่อไปยังตัวควบคุมส่วนที่เหลือของแผนที่ต่อ

ดูรหัส

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

    const map = new Map(document.getElementById("map") as HTMLElement, {
        zoom: 12,
        center: { lat: 34.84555, lng: -111.8035 },
        mapId: '4504f8b37365c3d0',
    });

    // Set LatLng and title text for the markers. The first marker (Boynton Pass)
    // receives the initial focus when tab is pressed. Use arrow keys to
    // move between markers; press tab again to cycle through the map controls.
    const tourStops = [
        {
            position: { lat: 34.8791806, lng: -111.8265049 }, 
            title: "Boynton Pass"
        },
        {
            position: { lat: 34.8559195, lng: -111.7988186 }, 
            title: "Airport Mesa"
        },
        {
            position: { lat: 34.832149, lng: -111.7695277 }, 
            title: "Chapel of the Holy Cross"
        },
        {
            position: { lat: 34.823736, lng: -111.8001857 }, 
            title: "Red Rock Crossing"
        },
        {
            position: { lat: 34.800326, lng: -111.7665047 }, 
            title: "Bell Rock"
        },
    ];

    // Create an info window to share between markers.
    const infoWindow = new InfoWindow();

    // Create the markers.
    tourStops.forEach(({position, title}, i) => {
        const pin = new PinElement({
            glyph: `${i + 1}`,
        });

        const marker = new AdvancedMarkerElement({
            position,
            map,
            title: `${i + 1}. ${title}`,
            content: pin.element,
        });

        // Add a click listener for each marker, and set up the info window.
        marker.addListener('click', ({ domEvent, latLng }) => {
            const { target } = domEvent;
            infoWindow.close();
            infoWindow.setContent(marker.title);
            infoWindow.open(marker.map, marker);
        });
    });
}

initMap();
index.ts

async function initMap() {
  // Request needed libraries.
  const { Map, InfoWindow } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary(
    "marker",
  );
  const map = new Map(document.getElementById("map"), {
    zoom: 12,
    center: { lat: 34.84555, lng: -111.8035 },
    mapId: "4504f8b37365c3d0",
  });
  // Set LatLng and title text for the markers. The first marker (Boynton Pass)
  // receives the initial focus when tab is pressed. Use arrow keys to
  // move between markers; press tab again to cycle through the map controls.
  const tourStops = [
    {
      position: { lat: 34.8791806, lng: -111.8265049 },
      title: "Boynton Pass",
    },
    {
      position: { lat: 34.8559195, lng: -111.7988186 },
      title: "Airport Mesa",
    },
    {
      position: { lat: 34.832149, lng: -111.7695277 },
      title: "Chapel of the Holy Cross",
    },
    {
      position: { lat: 34.823736, lng: -111.8001857 },
      title: "Red Rock Crossing",
    },
    {
      position: { lat: 34.800326, lng: -111.7665047 },
      title: "Bell Rock",
    },
  ];
  // Create an info window to share between markers.
  const infoWindow = new InfoWindow();

  // Create the markers.
  tourStops.forEach(({ position, title }, i) => {
    const pin = new PinElement({
      glyph: `${i + 1}`,
    });
    const marker = new AdvancedMarkerElement({
      position,
      map,
      title: `${i + 1}. ${title}`,
      content: pin.element,
    });

    // Add a click listener for each marker, and set up the info window.
    marker.addListener("click", ({ domEvent, latLng }) => {
      const { target } = domEvent;

      infoWindow.close();
      infoWindow.setContent(marker.title);
      infoWindow.open(marker.map, marker);
    });
  });
}

initMap();
index.js

หากต้องการทําให้เครื่องหมายคลิกไม่ได้อีกครั้ง ให้นํา Listener กิจกรรมการคลิกออกโดยทำดังนี้

// Adding the listener.
const clickListener = markerView.addListener('click', () => {...});

// Removing the listener.
google.maps.event.removeListener(clickListener);

ทำให้เครื่องหมายลากได้

เมื่อเปิดใช้ความสามารถในการลาก ผู้ใช้จะสามารถลากเครื่องหมายบนแผนที่โดยใช้เมาส์หรือแป้นลูกศร หากต้องการทำให้เครื่องหมายลากได้ ให้ตั้งค่าพร็อพเพอร์ตี้ AdvancedMarkerElement.gmpDraggable เป็น true

ตัวอย่างแผนที่ต่อไปนี้แสดงเครื่องหมายที่ลากได้ซึ่งแสดงตำแหน่งที่อัปเดตเมื่อลากเสร็จแล้ว (เหตุการณ์ dragend เริ่มทำงาน)

วิธีลากเครื่องหมายด้วยแป้นพิมพ์

1. กดปุ่ม Tab จนกว่าตัวทำเครื่องหมายจะโฟกัส
2. ใช้ปุ่มลูกศรเพื่อเลื่อนไปยังเครื่องหมายที่ต้องการ
3. หากต้องการเปิดใช้งานการลาก ให้กด Option + Space หรือ Option + Enter (Mac), ALT + Space หรือ Alt + Enter (Windows)
4. ใช้ปุ่มลูกศรเพื่อย้ายเครื่องหมาย
5. หากต้องการวางเครื่องหมายในตำแหน่งใหม่ ให้กด Space หรือ Enter ซึ่งจะเป็นการปิดการลากด้วย
6. หากต้องการปิดการลากและกลับไปที่ตำแหน่งก่อนหน้า ให้กด Esc

ดูรหัส

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

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

ตั้งค่าข้อความอธิบาย

หากต้องการกำหนดข้อความอธิบายสำหรับตัวทำเครื่องหมายซึ่งโปรแกรมอ่านหน้าจออ่านได้ ให้ใช้แอตทริบิวต์ AdvancedMarkerElement.title ดังที่แสดงที่นี่

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

เมื่อตั้งค่าแอตทริบิวต์ title โปรแกรมอ่านหน้าจอจะเห็นข้อความ และจะปรากฏเมื่อวางเมาส์เหนือเครื่องหมาย

ตั้งค่าสเกลเครื่องหมาย

การเพิ่มขนาดของเครื่องหมายจะลดความแม่นยำในการโต้ตอบกับเครื่องหมายบนทุกอุปกรณ์ โดยเฉพาะอุปกรณ์หน้าจอสัมผัส ทั้งยังช่วยปรับปรุง การช่วยเหลือพิเศษอีกด้วย ตัวทำเครื่องหมายเริ่มต้นเป็นไปตามมาตรฐาน ขนาดต่ำสุดของ WCAG AA แต่สำหรับนักพัฒนาซอฟต์แวร์ที่ต้องการปฏิบัติตามขนาดเป้าหมาย WCAG AAA ควรเพิ่มขนาดเครื่องหมาย ดูการปรับแต่งเครื่องหมายพื้นฐานเพื่อเรียนรู้วิธีใช้ PinElement และเปลี่ยนมาตราส่วนของเครื่องหมายเพื่อเพิ่มขนาด

ตัวอย่างการสร้างเครื่องหมายขนาดใหญ่ขึ้นโดยใช้การขยายขนาด PinElement

    const pinScaled = new PinElement({
        scale: 2,
    });
    const markerScaled = new AdvancedMarkerElement({
        map,
        position: { lat: 37.419, lng: -122.02 },
        content: pinScaled.element,
    });