javascript - MarkerWithLabel - el evento de arrastrar funciona como el evento de clic

Coloco un marcador al hacer clic en el mapa. Utilizo MarkerWithLabel.

Uso un marcador arrastrable.

Si arrastro un marcador funciona bien. Pero si arrastro una etiqueta, funciona con el evento de clic en el mapa.

¿Cómo puedo usar etiquetas y arrastrar una etiqueta sin evento de clic?

En mi ejemplo, cuando arrastro un marcador, JS crea un nuevo marcador.

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

Respuesta #1

Puedes intentar algo como esto (Ejemplo) a menos que tengas otra solución:

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);
});

El evento click se dispara cuando comienzas a arrastrar (Revisa esto). Es un truco sucio usando una variable global, pero funciona si no hay otra solución.

Respuesta #2

Su página de ejemplo muestra lo que estás buscando en acción.

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 );

Supongo que esa es toda la magia que necesitas.

Editar: Tras una investigación más detallada de tu Fiddle, noté una fuga de burbuja del evento desde la etiqueta del marcador hacia el mapa. Dado que no hay una forma conocida de detener la propagación del evento para que no burbujee a un tipo diferente, puedes establecer una variable para llevar un seguimiento de este escenario y borrarla una vez que se active. Pregunta relacionada en SO. Opcionalmente, puedes simplemente establecer una variable local real en el mismo ámbito que el mapa, de cualquier manera funcionará.

JSFiddle.