Google Maps Drag Marker GeoCode

Question

Je suis un géocodage de données basé sur l'emplacement et l'événement de déplacement de marqueur.

J'ai le code suivant qui fonctionne bien.

var geocoder; 
var map; 
var markersArray = []; 
var mapOptions = { 
    center: new google.maps.LatLng(12.971599, 77.594563), 
    zoom: 14, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
} 
var marker; 

function initialize() { 
    geocoder = new google.maps.Geocoder(); 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
    codeAddress(); 
} 
google.maps.event.addDomListener(window, 'load', initialize); 

$("#gmaps").submit(function() { 
    codeAddress(); 
    return false; 
}); 
function codeAddress() { 
    var address = $("#place").val(); 
    geocoder.geocode({ 
    'address': address 
    }, function (results, status) { 
    if (status == google.maps.GeocoderStatus.OK) { 

     map.setCenter(results[0].geometry.location); 

     if (marker) marker.setMap(null); 

     marker = new google.maps.Marker({ 
     map: map, 
     position: results[0].geometry.location, 
     draggable: true 
     }); 

     markersArray.push(marker); 

     google.maps.event.addListener(map, 'click', function(event) { 
     clearOverlays() ; 
     map.panTo(event.latLng); 
     map.setCenter(event.latLng); 
     marker = new google.maps.Marker({ 
      map: map, 
      position: event.latLng, 
      draggable: true 
     }); 
     markersArray.push(marker); 
     document.getElementById('lat').value = marker.getPosition().lat().toFixed(6); 
     document.getElementById('lng').value = marker.getPosition().lng().toFixed(6); 

     google.maps.event.addListener(marker, "dragend", function() { 
      document.getElementById('lat').value = marker.getPosition().lat().toFixed(6); 
      document.getElementById('lng').value = marker.getPosition().lng().toFixed(6); 
     }); 

     }); 

     google.maps.event.addListener(marker, "dragend", function() { 
     document.getElementById('lat').value = marker.getPosition().lat().toFixed(6); 
     document.getElementById('lng').value = marker.getPosition().lng().toFixed(6); 
     }); 

     document.getElementById('lat').value = marker.getPosition().lat().toFixed(6); 
     document.getElementById('lng').value = marker.getPosition().lng().toFixed(6); 

    } else { 
     alert('Geocode was not successful for the following reason: ' + status); 
    } 
    }); 
} 
// Removes the overlays from the map, but keeps them in the array 
function clearOverlays() { 
    if (markersArray) { 
    for (i in markersArray) { 
     markersArray[i].setMap(null); 
    } 
    } 
} 

Je suis inscris l'événement glisser deux fois et que l'enregistrement à l'extérieur du marqueur de clic ne marche pas me permettre de capturer l'événement de déplacement du marqueur nouvellement créé. Comment puis-je enregistrer un glisser sur le marqueur lors de l'ajout d'un nouveau marqueur via un événement click et refactoriser le code pour éliminer les événements d'enregistrement des marqueurs et stocker des données de marqueur inutiles dans le tableau.

Link to Demo

Answer 1

utilisation de la fonction « createMarker » pour attribuer l'auditeur de dragend au marqueur de sorte que vous n'avez pas à reproduire ce code partout.

var geocoder; 
    var map; 
    var markersArray = []; 
    var mapOptions = { 
     center: new google.maps.LatLng(12.971599, 77.594563), 
     zoom: 14, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var marker; 

    function createMarker(latLng) { 
     if (!! marker && !! marker.setMap) marker.setMap(null); 
     marker = new google.maps.Marker({ 
      map: map, 
      position: latLng, 
      draggable: true 
     }); 

     document.getElementById('lat').value = marker.getPosition().lat().toFixed(6); 
     document.getElementById('lng').value = marker.getPosition().lng().toFixed(6); 

     google.maps.event.addListener(marker, "dragend", function() { 
      document.getElementById('lat').value = marker.getPosition().lat().toFixed(6); 
      document.getElementById('lng').value = marker.getPosition().lng().toFixed(6); 
     }); 
    } 

    function initialize() { 
     geocoder = new google.maps.Geocoder(); 
     map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
     codeAddress(); 

     google.maps.event.addListener(map, 'click', function (event) { 
      map.panTo(event.latLng); 
      map.setCenter(event.latLng); 
      createMarker(event.latLng); 
     }); 

    } 
    google.maps.event.addDomListener(window, 'load', initialize); 

    $("#gmaps").submit(function() { 
     codeAddress(); 
     return false; 
    }); 

    function codeAddress() { 
     var address = $("#place").val(); 
     geocoder.geocode({ 
      'address': address 
     }, function (results, status) { 
      if (status == google.maps.GeocoderStatus.OK) { 
       map.setCenter(results[0].geometry.location); 
       createMarker(results[0].geometry.location); 
      } else { 
       alert('Geocode was not successful for the following reason: ' + status); 
      } 
     }); 
    } 

working fiddle