Draggable Pin aktualisiert keine Koordinaten in Google Maps API

Question

Ich habe diesen Code, mit dem Benutzer Pins in Google Maps einfügen können, indem Sie auf die Karte klicken. Jetzt versuche ich diesen Pin ziehbar zu machen, also habe ich gerade draggable:true, in die Initialisierung der Marker eingefügt. Aber das aktualisiert das Feld nicht mit den Koordinaten. Es funktioniert nur, wenn der Benutzer an anderer Stelle klickt. Was vermisse ich?

// 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 

}); 
} 


    }); 

} 

Der HTML-Code mit dem Eingang I die Koordinaten sind empfangen ist:

<div id='map_canvas'/> 

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

Answer 1

Es ist die Aktualisierung nicht die Koordinaten, weil Sie es nicht so zu tun, sagen zu. Sie müssen einen dragend-Handler hinzufügen und Ihr Element aktualisieren, in dem Sie die Koordinaten angezeigt wird, wenn der Widerstand des Markers ist beendet:

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

Wenn Sie ein Infofenster haben würden Sie den Inhalt aktualisieren müßten das Infofenster:

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

Wenn Sie die Koordinaten auch aktualisiert werden soll, während ein anderer Handler mit 'drag' statt 'dragend' ziehen, hinzuzufügen.