google map v3 api drag and click event conflict

Question

i am developing the application in which as soon as user clicks on the map, marker will appear and user can insert his own information for that marker.

i searched alot to get the css positions where user clicked on the map but the api is not returning that information.

So i tried following code and worked as well.

$("#map").bind('click', function(event) {

        event.preventDefault();
        event.stopPropagation();
        $("#map .floatText").remove();

    var this = obj;
    var event = e;
    var myMap   =   this.map;

    var myMarker    =   this.marker;

    var posX = $(obj).position().left, posY = $(obj).position().top;

    var divAdd = "<div class='floatText'><input type='text' id='addText' name='addText'><button id='addTextButton'>Add</buton></div>";

    $("#map").append(divAdd);

    $("#map .floatText").css('position', 'absolute').css('left', (e.pageX - posX)).css('top', (e.pageY - posY)).css('z-index', "1000").css('background-color', "#fff").css('padding', "5px").css('width', "auto").css('border', '2px solid #00AC71');


    $("#addText").focus();

    $("#addTextButton").bind('click', function(event) {

        event.stopPropagation();

        var track = $(".markersUl li:last").attr('data-track');

         var chHtml = $("#addText").val();
         // add an infowindow
         var chInfoWindow = new google.maps.InfoWindow({
            content : chHtml
         });

         chInfoWindow.open(myMap, myMarker[track]);



        $("#map .floatText").remove();

    });

    $("#addText").bind('click', function(event) {

        event.stopPropagation();

    });

    });

so this looks like as follows

enter image description here

now the problem is, as soon as i drag the map, click event occurs when i release the left mouse button.

any solutions on this?

Why reinvent wheel. Use infowindow see https://developers.google.com/maps/documentation/javascript/reference#InfoWindow — david strachan, Sep 22 '12 at 19:30
yes.. i am doing same but i am allowing user to insert data in infoWindow.. — KuKu, Sep 23 '12 at 04:52

score 0 · Answer 1 · answered Nov 01 '21 at 01:32

For those who are working on Google Map related projects and come across this question, this may not be related to Google Map. When drag or click happens in JavaScript, there are (at least) 3 events triggered in this sequence: mousedown, mouseup and click. So when you drag the map, in the end, it also fires a click event.

Take a look at this question for different solutions for this issue: How to distinguish mouse "click" and "drag". I personally followed the delta = 6 solution.

google map v3 api drag and click event conflict

1 Answers1