CODEWITHSUNDEEP
google-mapsdraggablegoogle-maps-markers
user1771561
user1771561

Reputation: 131

Google Maps marker is set draggable, but cannot drag it

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

Upvotes: 5

Views: 12438

Answers (2)

JudasPriest
JudasPriest

Reputation: 85

Try this:

 map.setOptions({draggable: true});

Upvotes: 1

yodog
yodog

Reputation: 6252

you have draggable: false,.

change it to true

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

Upvotes: 5

Related Questions