İşaretçileri tıklanabilir ve erişilebilir hale getirin

Bir işaretçi, tıklanabilir veya sürüklenebilir olduğunda klavye ve fare girişine yanıt verebilir. İşaretçiler arasında hareket etmek ve sürüklenebiliyorsa işaretçiyi taşımak için fare veya klavyeyi kullanabilirsiniz. title seçeneğinde belirtilen metin, ekran okuyucular tarafından okunabilir.

  • Bir işaretçiyi tıklanabilir hale getirmek için AdvancedMarkerElement.gmpClickable özelliğini true olarak ayarlayın ve bir tıklama etkinlik işleyicisi ekleyin.
  • Bir işaretçiyi sürüklenebilir hale getirmek için AdvancedMarkerElement.gmpDraggable özelliğini true olarak ayarlayın.
  • İşaretçi için açıklayıcı metin ayarlamak isterseniz AdvancedMarkerElement.title seçeneğini kullanın.

İşaretçiyi tıklanabilir yap

Aşağıdaki örnekte, beş tıklanabilir, odaklanılabilir işaretçinin bulunduğu bir harita gösterilmektedir:

Klavyeyi kullanarak işaretçiler arasında gezinmek için:

  1. İlk işaretçiye odaklanmak için sekme tuşunu kullanın. Aynı haritada birden fazla işaretçi varsa işaretçiler arasında geçiş yapmak için ok tuşlarını kullanın.
  2. İşaretçi tıklanabilirse "tıklamak" için enter tuşuna basın. Bir işaretçinin bilgi penceresi varsa, işaretçiyi tıklayarak veya Enter tuşuna ya da boşluk çubuğuna basarak açabilirsiniz. Bilgi penceresi kapatıldığında odak, ilişkili işaretçiye geri döner.
  3. Diğer harita denetimlerinde ilerlemeye devam etmek için sekme tuşuna tekrar basın.

Kodu inceleyin

TypeScript

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

JavaScript

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

Bir işaretçiyi tekrar tıklanamaz hale getirmek için tıklama etkinliği işleyiciyi kaldırın:

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

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

İşaretçiyi sürüklenebilir yap

Sürüklenebilirlik etkinleştirildiğinde kullanıcılar fareyi veya ok tuşlarını kullanarak işaretçileri harita üzerinde sürükleyebilir. Bir işaretçiyi sürüklenebilir hale getirmek için AdvancedMarkerElement.gmpDraggable özelliğini true olarak ayarlayın.

Aşağıdaki örnek haritada, sürükleme tamamlandığında güncellenmiş konumunu görüntüleyen sürüklenebilir bir işaretçi gösterilmektedir (dragend etkinliği tetiklenir):

Klavyeyle bir işaretçiyi sürüklemek için:

  1. İşaretçiler odaklanana kadar sekme tuşuna basın.
  2. İstediğiniz işaretçiye gitmek için ok tuşunu kullanın.
  3. Sürüklemeyi etkinleştirmek için Option + Boşluk veya Option + Enter (Mac), ALT + Boşluk veya Alt + Enter (Windows) tuşlarına basın.
  4. İşaretçiyi taşımak için ok tuşlarını kullanın.
  5. İşaretçiyi yeni konumuna bırakmak için Boşluk veya Enter tuşuna basın. Bu işlem, sürüklemeyi de kapatır.
  6. Sürüklemeyi kapatmak ve işaretçiyi önceki konumuna döndürmek için Esc tuşuna basın.

Kodu inceleyin

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

Açıklayıcı metin belirleyin

Bir işaretçi için ekran okuyucular tarafından okunabilen açıklayıcı metin ayarlamak amacıyla AdvancedMarkerElement.title özelliğini aşağıda gösterildiği gibi kullanın:

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

title özelliği ayarlandığında metin, ekran okuyucular tarafından görülebilir ve fare, işaretçinin üzerine getirildiğinde görünür.

İşaretçi ölçeğini ayarlayın

İşaretçilerin boyutunun büyütülmesi, tüm cihazlarda (özellikle dokunmatik ekranlı cihazlarda) etkileşimde bulunmak için gereken hassasiyeti azaltır ve erişilebilirliği iyileştirir. Varsayılan işaretçiler, WCAG AA minimum boyut standardını karşılar ancak WCAG AAA hedef boyutu standardına uymak isteyen geliştiriciler için işaretçi boyutu artırılmalıdır. PinElement özelliğini nasıl kullanacağınızı ve işaretçinin boyutunu büyütmek üzere ölçeğini nasıl değiştireceğinizi öğrenmek için temel işaretçi özelleştirme konusuna bakın.

Aşağıda, ölçeklendirilmiş PinElement kullanarak daha büyük bir işaretçi oluşturma örneği verilmiştir:

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