Google Maps marker is set draggable, but cannot drag it

Question

API v3

I have a strange issue with a marker:

The marker that I place on the map is set to be draggable, WebInspector reports it as being draggable, but I still can't drag it. The cursor doesn't change when I go over the marker.

The underlying map is draggable, and that works.

On another page, with a different setup (less layers), but the same javascript, it works as expected (so there I can drag it).

I also made the marker clickable and bound an event to it, and that works fine. The cursor changes as well on mouseover.

I have run out of options.... Why can I not drag it? Can this have to do with some zIndex or layer positioning? As far as I can see, the map has a higher zIndex than all the other layers....

// display map

geocoder.geocode( { 'address':address }, function(results, status) {

    if (status == google.maps.GeocoderStatus.OK) {

        // map options
        var mapOptions = {
            zoom: 14,
            center: results[0].geometry.location,
            panControl: false,
            zoomControl: true,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.SMALL
            },
            mapTypeControl: false,
            scaleControl: false,
            streetViewControl: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scrollwheel: false
        };

        // render map
        map = new google.maps.Map(J('#'+mapElementId)[0], mapOptions);

        // set marker
        marker = new google.maps.Marker({
            clickable: true,
            draggable: true,
            icon: markerImage,
            shadow: markerShadow,
            shape: markerShape,
            map: map,
            position: results[0].geometry.location
        });

        google.maps.event.addListener(marker, 'click', function () { alert('marker clicked'); });
        google.maps.event.addListener(marker, 'dragend', function () {
            alert('marker dragged')
            map.setCenter(marker.getPosition());
            J('input[name=coordinates]').val(marker.getPosition());
            J('input[name=address]').val('');
        });

        J('input[name=address]').val(results[0].formatted_address);
    }
});

Well, there is a lot of code and I'm not sure what to post.... And as I pointed out, the same javascript works on another page. Maybe it is better if you visit the site? — user1771561
Yeah, I get that, but nevertheless, it might help to have a look at how the site is built up. I added some javascript to my post. — user1771561
Unfortunately, I pasted an edited part. The settings has been on true all the time. Strangely enough, if I have 'clickable' and 'draggable' set to 'true', also the click event does not work. — user1771561

RASG RASG · Accepted Answer · 2012-10-24T15:42:10

you have draggable: false,.

change it to true

see it working here: http://jsfiddle.net/RASG/vA4eQ/

Google Maps marker is set draggable, but cannot drag it

2 Answers