google.maps.event.addDomListener mousedown on Firefox

Question

got some problem with this code. The map did not become "undraggable" on Firefox immediately after mousedown on div, but on Chrome is ok.

  google.maps.event.addDomListener(div,'mousedown',function(e) {

    console.log("draggable START ", map.get('draggable') );
    map.set('draggable', false);
    console.log("draggable END", map.get('draggable') );
    google.maps.event.trigger(map, 'resize');   

});

Here is a fiddle https://jsfiddle.net/benderlio/njyeLujs/

FF version is 54.0.1 windows 10 On chrome the map is not draggable after mouse down on white box, but on FF you can move the map and the white box on mousedown

Thanks.

Answer 1

It appears to be stopping you from setting draggable on mousedown or mouseup other functions such as alert, etc work fine. Since draggable is only active when the mouse is down you can use mouseover/mouseout to workaround this bug. The following is working fine in firefox 54.0.1

var map, dragtoggle = true, div;

    function initMap() {

        directionsService = new google.maps.DirectionsService();
        directionsDisplay = new google.maps.DirectionsRenderer();

        map = new google.maps.Map(document.getElementById('map'), {
            center: {
                lat: 42.418664992,
                lng: -71.104832914
            },
            zoom: 13,
        });

            //creating the class to exntend the google map OverlayView class
            function MapLocationIcon(id,lat,lng,title,icon_class){
                this.lat = lat;
                this.lng = lng;
                this.title = title; //eg. A,B,C.D
                this.icon_class= icon_class; //the position of the spritesheet for the icon background
                this.pos = new google.maps.LatLng(lat,lng);
            }

            //make a copy of the OverlayView to extend it
            MapLocationIcon.prototype = new google.maps.OverlayView();
            MapLocationIcon.prototype.onRemove= function(){}

            //prepare the overlay with DOM
            MapLocationIcon.prototype.onAdd= function(){
                div = document.createElement('DIV');
                function toggleDrag(){
                    if(dragtoggle == true){
                        map.set('draggable', false);
                        google.maps.event.trigger(map, 'resize');
                        dragtoggle = false;

                    } else if(dragtoggle == false){
                        map.set('draggable', true);
                        google.maps.event.trigger(map, 'resize');
                        dragtoggle = true;
                    }
                }
                function DragSwitch(){
                    $(div).css( "cursor", "auto");
                    dragtoggle = "disabled";
                }
                div.addEventListener('mouseover',toggleDrag,false);
                div.addEventListener('mouseout',toggleDrag,false);
                div.addEventListener('mousedown',DragSwitch,false);
                $(div).addClass('map_icon').addClass(this.icon_class);
                $(div).css( "background-color","white");
                $(div).css( "width","200px");
                $(div).css( "height","200px");
                $(div).css( "cursor", "grab");
                $(div).text(this.title);

                var panes = this.getPanes();
                panes.overlayImage.appendChild(div);

                /*
                google.maps.event.addDomListener(div,'mouseover',function(e) {
                        map.set('draggable', false);
                        console.log("draggable START ", map.get('draggable') );
                });
                google.maps.event.addDomListener(div,'mouseout',function(e) {
                        map.set('draggable', true);
                        console.log("draggable START ", map.get('draggable') );
                });
                */
            }

            //set position
            MapLocationIcon.prototype.draw = function(){
                var overlayProjection = this.getProjection();
                var position = overlayProjection.fromLatLngToDivPixel(this.pos);
                var panes = this.getPanes();
                panes.overlayImage.style.left = position.x + 'px';
                panes.overlayImage.style.top = position.y - 30 + 'px';
            }

            //to use it
            var icon = new MapLocationIcon('id', 42.418664992,-71.104832914, 'AAA', 'gold');
            icon.setMap(map);
    }

  $("body").on("click", "#dis", function() {

        map.setOptions({draggable: false});
        dragtoggle = "disabled";
        $(div).css( "cursor", "auto");
  });
  $("body").on("click", "#en", function() {

        map.setOptions({draggable: true});
        dragtoggle = true;
      $(div).css( "cursor", "grab");
  });


    google.maps.event.addDomListener(window, 'load', initMap);