CODEWITHSUNDEEP
javascriptgoogle-maps-markersdraggable
moi
moi

Reputation: 45

Mousedown on google map to create marker and drag it immediately without releasing mouse button

What I want to do is suppose to be simple, but I can't sort it out ... The steps of the operation are as follow: 1- Mousedown => create marker 2- Be able to drag this marker immediatly WITHOUT RELEASING MOUSE BUTTON. This is point I don't find a solution for ...

My code looks something like this :

 var listenerHandle = google.maps.event.addListener(map, 'mousedown', function(e) {

           marker = new google.maps.Marker({
              position: latLng,
              map: map,
              draggable: true
           });

google.maps.event.removeListener(listenerHandle); // to remove the listener 
google.maps.event.trigger(map, 'mouseup'); // this is because the click was first on        the map

// now try to trigger mousedown event because the mouse button must not be released          which should allow the user to move the marker immediatly after having created it.

google.maps.event.trigger(marker, 'mousedown', function(event){
           // process marker mouvements
});

});

This doesn't work as I have to release mouse button and mousedown the marker to be able to move it. Any solution to that ? Many thxs for your help

Upvotes: 1

Views: 2587

Answers (3)

Ivan Pavlak
Ivan Pavlak

Reputation: 24

The solution would be to have additional listener for mousemove to update marker position, but also have a third listener for mouseup which will remove all unnecessary listeners and reset map options:

var listenerHandle = google.maps.event.addListener(map, 'mousedown', function(e) {

        var latLng = e.latLng;

        marker = new google.maps.Marker({
            position: latLng,
            map: map,
            draggable: true
        });
        
        // map should not be deaggable while you move the marker
        map.setOptions({draggable: false});
    
        mousemoveHandle = google.maps.event.addListener(map, 'mousemove', function(e) {
            // update marker position (move marker)
            marker.setPosition(e.latLng);
        });

        mouseupHandle = google.maps.event.addListener(map, 'mouseup', function(e) {
            // remove listeners from map
            google.maps.event.removeListener(listenerHandle);
            google.maps.event.removeListener(mousemoveHandle);
            google.maps.event.removeListener(mouseupHandle);

            // make map draggable again
            map.setOptions({draggable: true});
        });

});

Make sure to have Handle variables declared globally.

Upvotes: 0

Gaurav Gupta
Gaurav Gupta

Reputation: 373

You may get the marker on mouse down. But, to drag the marker you need to take a second click to grab the marker and drag it.

Upvotes: 0

Anto Jurković
Anto Jurković

Reputation: 11258

One possible solution is to create additional event handler for mouse move event which update marker positon:

    var listenerHandle = 
            google.maps.event.addListener(map, 'mousedown', function(e) {

        var latLng = e.latLng;

        marker = new google.maps.Marker({
            position: latLng,
            map: map,
            draggable: true
        });

        // to get data about mouse position
        mMoveHandler = google.maps.event.addListener(map, 'mousemove', function(e) {
            marker.setPosition(e.latLng);
        });


        google.maps.event.removeListener(listenerHandle);
    });

Additionally, map has to be set to draggable: false because on mousedown map starts to move around. See example at jsbin

Upvotes: 2

Related Questions