Google Maps Drag Marker GeoCode

Question

I am Geocoding Data based on Location and Marker Drag event.

I have the following code that works fine.

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);
    }
  }
}

I am registering the drag event twice and only registering it outside of the click marker doesnt allow me to capture the drag event of the newly created marker.

How can i register a drag on the marker on adding of a new marker via a click event and refactor the code to eliminate the registering events of the markers and storing unnecessary marker data in the array.

Link to Demo

Answer 1

use "createMarker" function to assign the dragend listener to the marker so you don't have to replicate that code everywhere.

    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