Make markers clickable and accessible

When a marker is clickable or draggable, it can respond to keyboard and mouse input. You can use the mouse or keyboard to move between markers, and to move a marker if it's draggable. Text specified in the title option is readable by screen readers.

  • To make a marker clickable, add a click event handler.
  • To make a marker draggable, set the AdvancedMarkerElement.gmpDraggable property to true.
  • To set descriptive text for a marker, use the AdvancedMarkerElement.title option.

Make a marker clickable

The following example shows a map with five clickable, focusable markers:

To navigate markers using the keyboard:

  1. Use the tab key to focus on the first marker; if there are multiple markers on the same map, use the arrow keys to cycle through the markers.
  2. If the marker is clickable, press the enter key to "click". If a marker has an info window, you can open it by clicking, or by pressing the enter key or space bar. When the info window closes, focus will return to the associated marker.
  3. Press tab again to continue moving through the rest of the map controls.

See the code

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

To make a marker unclickable again, remove the click event listener:

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

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

Make a marker draggable

When draggability is enabled, users can drag markers on the map using the mouse or the arrow keys. To make a marker draggable, set the AdvancedMarkerElement.gmpDraggable property to true.

The following example map shows a draggable marker that displays its updated position when dragging is finished (the dragend event is fired):

To drag a marker with the keyboard:

  1. Press the tab key until markers are focused.
  2. Use the arrow key to move to the desired marker.
  3. To activate dragging, press Option + Space or Option + Enter (Mac), ALT + Space or Alt + Enter (Windows).
  4. Use the arrow keys to move the marker.
  5. To drop the marker at its new location, press Space or Enter. This will also turn dragging off.
  6. To turn dragging off and return the marker to its previous position, press Esc.

See the code

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

Set descriptive text

To set descriptive text for a marker, which can be read by screen readers, use the AdvancedMarkerElement.title attribute, as shown here:

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

When the title attribute is set, the text is visible to screen readers, and will appear when the mouse hovers over the marker.

Set marker scale

Increasing the size of markers reduces the precision required to interact with it across all devices — especially touchscreen devices — and improves accessibility. Default markers meet the WCAG AA minimum size standard but for developers aiming to comply with the WCAG AAA target size standard the marker size should be increased. See basic marker customization to learn how to use a PinElement and change the scale of a marker to increase its size.

Here is an example of creating a larger marker by using a scaled up PinElement:

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