MarkerWithLabel - a drag event works like a click event

Question

I set the marker when I click on the map. I am using MarkerWithLabel.

I use a draggable marker.

If I drag the marker, it works fine. But if I drag the shortcut, it works with the click event on the map.

How can I use labels and drag a shortcut without a click event?

In my example, when I drag a marker, JS creates a new marker.

google.maps.event.addListener(map, 'click', function(event) { addMarker(event.latLng) }); function addMarker(latLng) { var marker = new MarkerWithLabel({ position: latLng, map: map, draggable: true, labelContent: "example", labelAnchor: new google.maps.Point(30, 0), labelClass: "labels", // the CSS class for the label labelStyle: {opacity: 0.75} }); google.maps.event.addListener(marker, 'dragend', function(e) { alert(2); }) } 

JSFIDDLE

Answer 1

You can try something like this ( Example ) if you have no other solution:

 var map, dragended; // ... google.maps.event.addListener(map, 'click', function(event) { if(!dragended) { addMarker(event.latLng); } dragended = false; }); google.maps.event.addListener(marker, 'dragend', function(e) { var target = e.target || e.srcElement; if(target && target.className == 'labels') { dragended = true; } alert(2); }); 

The click event fires when dragged ( Check this ). This is a dirty hack using a global variable, but it works if there is no other solution.

Answer 2

Their example page shows what you are looking for in action.

 function your_function(e) { //Callback function console.log("Drag: " + e.latLng.toString()); } //Create map using the #map_canvas element var map = new google.maps.Map(document.getElementById('map_canvas'), { zoom: 12, center: new google.maps.LatLng(49.47805, -123.84716), mapTypeId: google.maps.MapTypeId.ROADMAP }); //Create new MarkerWithLabel (enhanced version of a Marker) var marker = new MarkerWithLabel({ position: new google.maps.LatLng(49.47805, -123.84716), draggable: true, raiseOnDrag: true, map: map, //Attach to map labelContent: "example", labelAnchor: new google.maps.Point(22, 0), labelClass: "labels" // the CSS class for the label }); //Finally add a listener to the marker to call your_function when "drag" event has occurred. google.maps.event.addListener(marker, "drag", your_function ); 

To everything you need you need.

---

Edit: After further exploring your violin, I noticed a leak of event bubbles from the marker label to the map. Since there is no known way to stop the propagation of an event from bubbles to another type, you can set a variable to track this scenario and clear it after it runs. Related SO question . You can optionally just set the actual local variable in the same area as the map, any of them will work.

JSFiddle .

Answer 3

try using markerwithlabel.js to change your code to change in markerwithlabel.js. Thanks to this, you can avoid or ignore clicking on a shortcut using a plate with markers or shortcuts.