"dragend" method for marker in Google Maps

Question

I have a problem with my marker in Google Maps. This is my code:

var map;
var geocoder;
var current;
var styles = [
              {
                stylers: [
                  { hue: "#00c0eb" },
                  { saturation: -10 }
                ]
              },{
                featureType: "road",
                elementType: "geometry",
                stylers: [
                  { lightness: 100 },
                  { visibility: "simplified" }
                ]
              },{
                featureType: "road",
                elementType: "labels",
                stylers: [
                  { visibility: "on" }
                ]
              }
            ];
var NewEventMarker;
function changeMarkerPosition(marker, ll) {
    marker.setPosition(ll);
}

function initialize() {
  geocoder = new google.maps.Geocoder();
  var mapOptions = {
    center: new google.maps.LatLng(-34.397, 150.644),
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false,
    panControl: false,
    zoomControl: true,
    zoomControlOptions: {
        style: google.maps.ZoomControlStyle.SMALL,
        position: google.maps.ControlPosition.BOTTOM_CENTER
    },
    scaleControl: false,
    streetViewControl: false
  };
  map = new google.maps.Map(document.getElementById("map_canvas"),
      mapOptions);
  map.setOptions({styles: styles});        
  google.maps.event.addListener(map, 'click', addNewEvent);
}

function codeAddress() {
      var address = "London";
      geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          map.setCenter(results[0].geometry.location);
          var image = new google.maps.MarkerImage("/img/markers/user-m.png",
                    new google.maps.Size(32.0, 49.0),
                    new google.maps.Point(0, 0),
                    new google.maps.Point(16.0, 24.0)
                );
          var marker = new google.maps.Marker({
              map: map,
              icon: image,
              flat: false,
              position: results[0].geometry.location
          });
        } else {
          alert('Geocode was not successful for the following reason: ' + status);
        }
      });
    }

  function addNewEvent(event){        
      var NEMlatLng;
      if(NewEventMarker == undefined){
          NewEventMarker = new google.maps.Marker({
              map: map,
              draggable: true,
              icon: "/img/markers/marker-add.png",
              position: event.latLng,
              title: "Добавить событие"
          });
      } else {
          changeMarkerPosition(NewEventMarker, event.latLng);
      }       
      google.maps.event.addListener(NewEventMarker,'dragend',function(event) {
        alert(event.latLng);
    });
  }

The idea of this code is when user clicks on a map, start work function - addNewEvent, and as you can see, if there is already exists "NewEventMarker", it just moves this marker to a place where user clicks, and if there are no marker, it creates. So if you try my code you can see, that if i click, for example two or three times on a map, marker will moves, but when i drag my marker, starts work function that assigned to 'dragend' event. But it will be works so many times, how much i clicked on a map. How can i fix it?

When i try to add google.maps.event.addListener(NewEventMarker,'dragend'....... to other places in my code i get an error: Cannot read property '_e3' of undefined Please help me ;)

Answer 1

Evgeny, you did almost everything right but for each click you attach new event handler for dragend. Because of that you got several dragend events and for each event one alert.

Solution is to just move event handler to if statement and add event listener only in case if NewEventMarker is created (only first time):

function addNewEvent(event){        
    var NEMlatLng;
    if (NewEventMarker == undefined){
        NewEventMarker = new google.maps.Marker({
            map: map,
            draggable: true,
            icon: "marker-add.png",
            position: event.latLng,
            title: "Добавить событие"
        });

        google.maps.event.addListener(NewEventMarker, 'dragend', function(event) {
            alert(event.latLng);
        });

    } else {
        changeMarkerPosition(NewEventMarker, event.latLng);
    }

}