Rendre les repères déplaçables

Si la fonctionnalité de déplacement est activée, les utilisateurs peuvent faire glisser des repères sur la carte avec la souris ou les touches fléchées. Pour rendre un repère déplaçable, définissez la propriété AdvancedMarkerElement.gmpDraggable sur true.

L'exemple de carte suivant montre un repère déplaçable qui affiche sa nouvelle position une fois le déplacement terminé (l'événement dragend est déclenché) :

Pour faire glisser un repère à l'aide du clavier :

1. Appuyez sur la touche Tabulation jusqu'à ce que les repères soient sélectionnés.
2. Utilisez les touches fléchées pour accéder au repère souhaité.
3. Pour activer la fonction de déplacement, appuyez sur Option+Espace ou Option+Entrée (Mac), Alt+Espace ou Alt+Entrée (Windows).
4. Utilisez les touches fléchées pour déplacer le repère.
5. Pour placer le repère à son nouvel emplacement, appuyez sur Espace ou Entrée. La fonction de déplacement sera aussi désactivée.
6. Pour annuler le déplacement et replacer le repère à sa position précédente, appuyez sur Échap.

Voir le 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

Remarque : Consultez ce guide sur l'utilisation de TypeScript et Google Maps.

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

Définir un texte descriptif

Pour définir le texte descriptif d'un repère, qui peut être lu par les lecteurs d'écran, utilisez l'attribut AdvancedMarkerElement.title, comme indiqué ci-dessous :

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

Lorsque l'attribut title est défini, le texte peut être vu par les lecteurs d'écran et apparaît lorsque l'utilisateur pointe sur le repère avec la souris.