google maps api 3 - Change advancedMarkerELement position on drag event in order to be moved on a straight a line - Stack Overfl

I have changed from markers to AdvancedMarkerElement in google maps api. I want to drag the marker in a straight line and I achieved this with the old Markers.

The logic is to calculate and reset position on drag event. But the drag event moves the advancedMarkerElement where the cursor goes without reposition to a straight line

let ruler4 = new google.maps.marker.AdvancedMarkerElement({
map: map,
position: finalLatLng,
content: pinTextGlyph.element,
gmpClickable: true,
gmpDraggable:true,
});

ruler4.addListener('drag', (event) => {
finalLatLng = getFinalPoint(azimuth, localDistance, ruler2.position);

ruler4.position = finalLatLng;
});

Edit

Here is a fiddle in order the code to be tested fiddle

I have changed from markers to AdvancedMarkerElement in google maps api. I want to drag the marker in a straight line and I achieved this with the old Markers.

The logic is to calculate and reset position on drag event. But the drag event moves the advancedMarkerElement where the cursor goes without reposition to a straight line

let ruler4 = new google.maps.marker.AdvancedMarkerElement({
map: map,
position: finalLatLng,
content: pinTextGlyph.element,
gmpClickable: true,
gmpDraggable:true,
});

ruler4.addListener('drag', (event) => {
finalLatLng = getFinalPoint(azimuth, localDistance, ruler2.position);

ruler4.position = finalLatLng;
});

Edit

Here is a fiddle in order the code to be tested fiddle

• google-maps-api-3
• position
• google-maps-advanced-marker-element

Share Improve this question Follow edited Mar 11 at 22:23 vagelis asked Jan 21 at 9:56 vagelisvagelis 47666 silver badges2020 bronze badges 1

• Any idea about that?? – vagelis Commented Mar 11 at 9:42

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

The click event works fine and changes position to advancedMarkerElement but on drag event the change of position seems that confuses functionality

Here is a fiddle in order to test it
https://jsfiddle.net/nz1ow5et/

let map;

async function initMap() {
  const { Map } = await google.maps.importLibrary("maps");
let startLatlng = { lat: 40.596948, lng: 22.987563 };

  map = new Map(document.getElementById("map"), {
    zoom: 11, center: startLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    backgroundColor: 'none',
    draggableCursor: 'default',
    mapId: "DEMO_MAP_ID"
});
  
  const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");

let pinTextGlyph = new google.maps.marker.PinElement({
    glyph: '1'
});
let repositionedLatLng=startLatlng;
let ruler4 = new google.maps.marker.AdvancedMarkerElement({
    map: map,
    position: startLatlng,
    content: pinTextGlyph.element,
    gmpClickable: true,
    gmpDraggable:true,
    });
   let defaultLatlng = { lat: 15.596948, lng: 22.987563 };
    ruler4.addListener('drag', (event) => {
      
        ruler4.position = defaultLatlng ;
    });
    ruler4.addListener('dragend', (event) => {
    
        ruler4.position = defaultLatlng ;
    });
    ruler4.addListener('click', (event) => {
    
        ruler4.position = defaultLatlng ;
    });
}

initMap();