Google Map Api v3 : faire glisser un événement sur la carte

Question

J'utilise l'api google map v3. J'ai besoin de détecter l'événement de glisser sur la carte. Qu'il s'agisse d'un glissement sur la carte pour se déplacer vers un emplacement géographique proche ou d'un glissement sur le marqueur. J'ai besoin d'une fonction javascript à exécuter lorsque l'un des événements se produit.

Answer 1

Les objets Carte et Marqueur ont tous deux drag bien que vous souhaitiez probablement dragend afin de pouvoir agir lorsque l'utilisateur a fini de faire glisser le curseur, plutôt que de faire quelque chose pendant que l'utilisateur fait glisser le curseur.

Vous pourriez donc faire quelque chose comme ça :

google.maps.event.addListener(map, 'dragend', function() { alert('map dragged'); } );
google.maps.event.addListener(marker, 'dragend', function() { alert('marker dragged'); } );

Answer 2

google.maps.event.addListener(map, "mouseover", function (e) {
    google.maps.event.addListener(map, "dragend", function () {
        setTimeout(() => {
           console.log(e); // this contains the information about the coordinates
        });
    });
});

Answer 3

En 2021, vous pouvez suivre les conseils officiels https://developers.google.com/maps/documentation/javascript/events#ShapeEvents

const marker = new google.maps.Marker({
    position: myLatlng,
    map,
    title: "Click to zoom",
  });

  map.addListener("center_changed", () => {
    // 3 seconds after the center of the map has changed, pan back to the
    // marker.
    window.setTimeout(() => {
       console.log('position has change')
    }, 3000);
  });

Answer 4

Event.latLng.lat() et event.latLng.lng() vous donneront les coordonnées (pas en pixels, mais en GPS).

function initMapModalAdd() {

    function handleMarkerDrag(event) {
        $('#formAddWell input[name=coordinates]').val(`${event.latLng.lat()}, ${event.latLng.lng()}`);
    }

    const mapCenterPos = {lat: -22.232916, lng: -43.109969};

    window.googleMapAdd = new google.maps.Map(document.getElementById('modal-map-add'), {
        zoom: 8, 
        streetViewControl: false, 
        center: mapCenterPos
    });

    const marker = new google.maps.Marker({draggable: true, position: mapCenterPos, map: window.googleMapAdd});
    marker.addListener('drag', (event) => handleMarkerDrag(event));
    marker.addListener('dragend', (event) => handleMarkerDrag(event));
}