MarkerWithLabel - drag event works like click event

Question

I set a marker on click on the map. I use MarkerWithLabel.

I use draggable marker.

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

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

In my example - when I drag a marker JS creates 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

From documentation - click - This event is fired when the user clicks on the map (but not when they click on a marker or infowindow). But nothing about labels. — Nick, Apr 28 '14 at 14:19

score 5 · Answer 1 · answered Apr 30 '14 at 01:48

You may try something like this (Example) unless you have 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 is fired when you start dragging (Check this). It's a dirty hack using a global variable but it works if there is no other solution.

score 1 · Answer 2 · edited May 23 '17 at 12:10

1

Their example page shows what you're 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 );

That's all the magic you need, I guess.

Edit: Upon further investigation of your Fiddle, I noted a the event bubble leak from the marker label to map. Since there's no known way to stop the event propagation from bubbling into a different type, you can set a variable to keep track of this scenario and clear it once it's triggered. Related SO question. You can optionally just set an actual local variable in the same scope as map, either way will work.

JSFiddle.

edited May 23 '17 at 12:10

Community

1
1

answered Apr 30 '14 at 00:37

Sunny Patel

7,830
2
31
46

If you drag a label the map creates new marker. But the map shouldn't react to drag a label. – Nick Apr 30 '14 at 00:44
Because of `google.maps.event.addListener(map, 'click', function(event) { addMarker(event.latLng) });` – Sunny Patel Apr 30 '14 at 00:45
exactly. But I don't want it. I want to drag a markers and create it. Not a same time. From documentation - click - This event is fired when the user clicks on the map (but not when they click on a marker or infowindow). But it doesn't work for label. – Nick Apr 30 '14 at 00:48
Let me see if I can clean up this Fiddle a bit. – Sunny Patel Apr 30 '14 at 00:51
The problem was somewhere in the packer code you provided for MarkerWithLabel. I replaced it with another version that was compressed with [JSCompress](http://jscompress.com) and everything just worked. Updated [JSFiddle](http://jsfiddle.net/yV6xv/4181/). – Sunny Patel Apr 30 '14 at 01:00
I'm sorry, I'm not having issues with the updated code. On Chrome36 / Win7 x64. Checked in Firefox29 and IE10 too, all good. Can you be more specific about your problem? – Sunny Patel Apr 30 '14 at 01:11
Updated the [JSFiddle](http://jsfiddle.net/yV6xv/4183/) again. The issue was because of an odd event bubbling issue where letting go of the mouse button from dragging the label would trigger a click. I set a variable to help clear that as traditional methods to cancel won't work, [related SO question](http://stackoverflow.com/questions/17373677/google-maps-double-click-event-propagation). You can optionally just set an actual local variable in the same scope as map, either way will work. Updated my answer. – Sunny Patel Apr 30 '14 at 02:55
I just noticed [the other answer](http://stackoverflow.com/questions/23328828/markerwithlabel-drag-event-works-like-click-event/23378311#23378311). Ah well. Hope either way helped! – Sunny Patel Apr 30 '14 at 03:00

score 0 · Answer 3 · answered May 05 '14 at 05:34

0

try using markerwithlabel.js change, its a code for the change in markerwithlabel.js. Through this you can avoid or ignore the click on label with marker dragend or label dragend.

answered May 05 '14 at 05:34

Gaurav Gupta

364
8
15

MarkerWithLabel - drag event works like click event

3 Answers3