title: Google Maps drag and dragend event listeners won't work if marker created by click event listener
body: <p>Just a noob trying to learn, I came out with a problem that when I try to create marker with click event, drag and dragend event listeners won't work. Whereas when created by default these work.</p>
  
  <p>Here is what I have tried so far.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no" /&gt;
  &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"/&gt;
  &lt;title&gt;Google Maps&lt;/title&gt;
  &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"&gt;         &lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  function initialize() {
  var myLatlng = new google.maps.LatLng(22,79);
  var myOptions = {
    zoom: 5,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
  
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  
  marker = new google.maps.Marker({
          position: myLatlng,
          map: map,
          title: 'Default Marker',
          draggable:true
  });
  
  google.maps.event.addListener(map,'click',function(event) {
  
          marker = new google.maps.Marker({
          position: event.latLng,
          map: map,
          title: 'Click Generated Marker',
          draggable:true
          });
      }
  );
  
  google.maps.event.addListener(
      marker,
      'drag',
      function(event) {
          document.getElementById('lat').value = this.position.lat();
          document.getElementById('lng').value = this.position.lng();
          //alert('drag');
      });
  
  
  google.maps.event.addListener(marker,'dragend',function(event) {
          document.getElementById('lat').value = this.position.lat();
          document.getElementById('lng').value = this.position.lng();
          alert('Drag end');
      });
  
  
    }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload="initialize()"&gt;
  &lt;div id="map_canvas" style="width:500px;height:500px;"&gt;&lt;/div&gt;
  
  Lat: &lt;input type="text" id="lat"&gt;&lt;br&gt;
  Lng: &lt;input type="text" id="lng"&gt;
  
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>