AdvancedMarkerElement: making drag behaviour more like legacy Marker

With the legacy Marker, when dragging a marker there is a nice little crosshair to give the impression of a precise positioning movement, and this crosshair disappears automatically at the end of the drag… see this example.

Relevant code:

async function initMap() {
  const { Map } = await google.maps.importLibrary("maps");
    const { Marker } = await google.maps.importLibrary("marker");

    const myLatLng = {
    lat: -34.397,
    lng: 150.644
  };

    const map = new Map(document.getElementById("map"), {
    center: myLatLng,
    zoom: 8
  });
  
  const marker = new Marker({
    map,
    position: myLatLng,
    draggable: true
  });

  google.maps.event.addListener(marker, 'dragend', function() {
    const position = marker.getPosition();
    alert('dragend at ' + position);
  });
}

initMap();

Compare this to the new AdvancedMarkerElement… no crosshair, and instead some bounding box that IMHO is unnecessary and looks plain ugly… see this example.

Not only that, but the bounding box remains after the end of the drag… at the very least how so we ensure that focus is removed from the marker at the end of the drag?

Relevant code:

async function initMap() {
  const { Map } = await google.maps.importLibrary("maps");
    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

    const myLatLng = {
    lat: -34.397,
    lng: 150.644
  };

    const map = new Map(document.getElementById("map"), {
    center: myLatLng,
    zoom: 8,
    mapId: "DEMO_MAP_ID", // Map ID is required for advanced markers.
  });
  
  const marker = new AdvancedMarkerElement({
    map,
    position: myLatLng,
    gmpDraggable: true
  });

  marker.addListener('dragend', function(event) {
    const position = marker.position;
    alert(`dragend at (${position.lat}, ${position.lng})`);
  });
}

initMap();