javascript - Draggable pin not updating coordinates in Google Maps API -

i have code allows users insert pins in google maps, clicking on map. i'm trying make pin draggable, added draggable:true, in initialization of markers. not updating field coordinates. works if user clicks in place. missing?

  // global "map" variable     var map = null;     var marker = null;      // popup window pin, if in use     var infowindow = new google.maps.infowindow({          size: new google.maps.size(150,50)         });      // function create marker , set event window function      function createmarker(latlng, name, html) {      var contentstring = html;      var marker = new google.maps.marker({         position: latlng,         map: map,         zindex: math.round(latlng.lat()*-100000)<<5         });      google.maps.event.addlistener(marker, 'click', function() {         infowindow.setcontent(contentstring);          infowindow.open(map,marker);         });      google.maps.event.trigger(marker, 'click');         return marker;   }  function initialize() {      // location of initial pin     var mylatlng = new google.maps.latlng(-19.919131, -43.938637);      // create map     var myoptions = {         zoom: 15,         center: mylatlng,         maptypecontrol: true,         maptypecontroloptions: {style: google.maps.maptypecontrolstyle.dropdown_menu},         navigationcontrol: true,         maptypeid: google.maps.maptypeid.roadmap     }       map = new google.maps.map(document.getelementbyid("map_canvas"), myoptions);      // establish initial marker/pin       var marker = new google.maps.marker({       position: mylatlng,       map: map,       title:"property location",      draggable:true,     icon: {         url: 'https://4.bp.blogspot.com/-nhydf9odhlw/v8oxzbpjw6i/aaaaaaaaadm/g_qlem7ascuoc3xwzmc5x8dmmhp7fk3rwclcb/s1600/bikespot-pin-logo.png',          // base image 60x60 px         size: new google.maps.size(64, 96),          // want render @ 30x30 logical px (@2x dppx or 'retina')         scaledsize: new google.maps.size(32, 48),         // top-left point of marker in sprite         // (based on scaledsize, not original)         origin: new google.maps.point(0, 0),          // "pointer"/anchor coordinates of marker (again based on scaledsize)         anchor: new google.maps.point(16, 48)     } });      // establish initial div form fields    formlat = mylatlng.lat();     formlng = mylatlng.lng();     document.getelementbyid("latlng-input").value = mylatlng.tourlvalue();      // close popup window     google.maps.event.addlistener(map, 'click', function() {         infowindow.close();         });      // removing old markers/pins     google.maps.event.addlistener(map, 'click', function(event) {         //call function create marker          if (marker) {             marker.setmap(null);             marker = null;          }          // information popup window if chose have 1         /*          marker = createmarker(event.latlng, "name", "<b>location</b><br>"+event.latlng);         */          var image = 'https://4.bp.blogspot.com/-nhydf9odhlw/v8oxzbpjw6i/aaaaaaaaadm/g_qlem7ascuoc3xwzmc5x8dmmhp7fk3rwclcb/s1600/bikespot-pin-logo.png';         var mylatlng = event.latlng ;         /*           var marker = new google.maps.marker({             removing 'var' subsquent pin placement removes old pin icon         */         marker = new google.maps.marker({                position: mylatlng,               map: map,             icon: image,             title:"bicicletario",      icon: {         url: 'https://4.bp.blogspot.com/-nhydf9odhlw/v8oxzbpjw6i/aaaaaaaaadm/g_qlem7ascuoc3xwzmc5x8dmmhp7fk3rwclcb/s1600/bikespot-pin-logo.png',          // base image 60x60 px         size: new google.maps.size(64, 96),          // want render @ 30x30 logical px (@2x dppx or 'retina')         scaledsize: new google.maps.size(32, 48),          // top-left point of marker in sprite         // (based on scaledsize, not original)         origin: new google.maps.point(0, 0),          // "pointer"/anchor coordinates of marker (again based on scaledsize)         anchor: new google.maps.point(16, 48)      }           });          // populate form fields lat & lng    formlat = event.latlng.lat();    formlng = event.latlng.lng();    document.getelementbyid("latlng-input").value  = formlat +", "+formlng  }); }       });  } 

the html input i'm receiving coordinates is:

<div id='map_canvas'/>  <input  id='latlng-input' size='20' type='text'/> 

it's not updating coordinates because don't tell so. have add dragend-handler , update element, display coordinates when drag of marker finished:

marker.addlistener('dragend', function(event){     document.getelementbyid("latlng-input").value = event.latlng.lat() + ", " + event.latlng.lng(); }); 

if have infowindow have update content of infowindow:

marker.addlistener('dragend', function(event){     infowindow.setcontent(event.latlng.lat() + ", " + event.latlng.lng()); }); 

if want update coordinates while dragging, add handler 'drag' instead of 'dragend'.