CODEWITHSUNDEEP
javascriptjqueryeventsgoogle-mapsmarker
Soheil
Soheil

Reputation: 5354

Google Map dragging Marker issue

I want to alert the user about new position on map when he/she dragged the marker. Apparently when I drag my marker, the listener even will not trigger. I want my user be able to choose to put marker on map and also be able to drag it. clicking and dragging other side of the map can change the marker position, but when I try to add the listener for dragging the map, to pop up a menu alert, it doesn't work. Thanks

var LatLng = new google.maps.LatLng(lat,lng);
        var marker;
        var mapOptions = {
          center: LatLng,
          zoom: 16,
          minZoom:12,
          maxZoom:18,
          panControl:false,
          scrollwheel: false,
          rotateControl:false,
          streetViewControl:false,
          keyboardShortcuts:false,
          mapTypeControl: false,
          scaleControl: false,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };


        var Gmap = new google.maps.Map($('#map_canvas').get(0),mapOptions);


        // adding pointer by clicking on mac
        google.maps.event.addListener(Gmap, 'click', function(e) {
            if (marker) {
                marker.setPosition(e.latLng);
            }else{
                marker = new google.maps.Marker({
                    position: e.latLng,
                    map: Gmap,
                    draggable:true
                });
            }

              Gmap.panTo(marker.getPosition());


        });

         google.maps.event.addListener(marker, 'dragend', function() {
             alert('Show something here');
        });

Upvotes: 2

Views: 3505

Answers (2)

uɥƃnɐʌuop
uɥƃnɐʌuop

Reputation: 15103

The listener isn't working because when you define your listener, the marker is undefined. You need to place it in the function block that defines your marker: 

google.maps.event.addListener(Gmap, 'click', function(e) {
    if (marker) {
        marker.setPosition(e.latLng);
    } else {
        marker = new google.maps.Marker({
            position: e.latLng,
            map: Gmap,
            draggable:true
        });

        google.maps.event.addListener(marker, 'dragend', function() {
             alert('Show something here');
        });
    }

    Gmap.panTo(marker.getPosition());
});

See that in action right here.

Upvotes: 2

Eric Robinson
Eric Robinson

Reputation: 2095

could I get you to try this

google.maps.event.addListener(marker, 'dragend', function () {
    updateMarkerStatus('Drag ended');
    geocodePosition(marker.getPosition());
    alert('Show something here');
});

You can also use firefox to put a "Break" in your javascript so that you can see if the javascript function has been triggered. info on that can be found here

Upvotes: 0

Related Questions