GoogleマップAPIで座標を更新できないドラッグ可能なピン

Question

私はこのコードを使用して、地図をクリックしてGoogleマップにピンを挿入できます。今私はこのピンをドラッグ可能にしようとしていますので、マーカーの初期化にdraggable:true,を追加しました。しかし、これは座標でフィールドを更新していません。ユーザーが別の場所をクリックした場合にのみ機能します。私は何が欠けていますか？

// global "map" variable 
    var map = null; 
    var marker = null; 

    // popup window for pin, if in use 
    var infowindow = new google.maps.InfoWindow({ 
     size: new google.maps.Size(150,50) 
     }); 

    // A function to create the marker and set up the 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() { 

    // the location of the initial pin 
    var myLatlng = new google.maps.LatLng(-19.919131, -43.938637); 

    // create the 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 the 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 is 60x60 px 
     size: new google.maps.Size(64, 96), 

     // we want to render @ 30x30 logical px (@2x dppx or 'Retina') 
     scaledSize: new google.maps.Size(32, 48), 
     // the most top-left point of your marker in the sprite 
     // (based on scaledSize, not original) 
     origin: new google.maps.Point(0, 0), 

     // the "pointer"/anchor coordinates of the marker (again based on scaledSize) 
     anchor: new google.maps.Point(16, 48) 
    } 
}); 

    // establish the 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 to create marker 
     if (marker) { 
      marker.setMap(null); 
      marker = null; 
     } 

     // Information for popup window if you so chose to have one 
     /* 
     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({ 
      by removing the 'var' subsquent pin placement removes the 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 is 60x60 px 
     size: new google.maps.Size(64, 96), 

     // we want to render @ 30x30 logical px (@2x dppx or 'Retina') 
     scaledSize: new google.maps.Size(32, 48), 

     // the most top-left point of your marker in the sprite 
     // (based on scaledSize, not original) 
     origin: new google.maps.Point(0, 0), 

     // the "pointer"/anchor coordinates of the marker (again based on scaledSize) 
     anchor: new google.maps.Point(16, 48) 

    } 


     }); 

     // populate the form fields with lat & lng 
    formlat = event.latLng.lat(); 
    formlng = event.latLng.lng(); 
    document.getElementById("LatLng-Input").value = formlat +", "+formlng 

}); 
} 


    }); 

} 

私は座標を受けています入力とHTMLは次のとおりです。

<div id='map_canvas'/> 

<input id='LatLng-Input' size='20' type='text'/> 

Answer 1

それは座標を更新していない、あなたがそうすることを教えていないため。あなたはdragendイベント・ハンドラを追加し、マーカーのドラッグが終了したときに座標を表示し、あなたの要素を更新する必要があります。

marker.addListener('dragend', function(event){ 
    document.getElementById("LatLng-Input").value = event.latLng.lat() + ", " + event.latLng.lng(); 
}); 

あなたがの内容を更新しなければならない情報ウィンドウを持っている希望の場合情報ウィンドウ：あなたはドラッグしながらも、座標を更新する場合

marker.addListener('dragend', function(event){ 
    infoWindow.setContent(event.latLng.lat() + ", " + event.latLng.lng()); 
}); 

、'drag'代わりの'dragend'で別のハンドラを追加します。