Google maps v3 draggable marker

Solution 1:

Finally I found the answer:

marker = new google.maps.Marker(
{
    map:map,
    draggable:true,
    animation: google.maps.Animation.DROP,
    position: results[0].geometry.location
});
google.maps.event.addListener(marker, 'dragend', function() 
{
    geocodePosition(marker.getPosition());
});

function geocodePosition(pos) 
{
   geocoder = new google.maps.Geocoder();
   geocoder.geocode
    ({
        latLng: pos
    }, 
        function(results, status) 
        {
            if (status == google.maps.GeocoderStatus.OK) 
            {
                $("#mapSearchInput").val(results[0].formatted_address);
                $("#mapErrorMsg").hide(100);
            } 
            else 
            {
                $("#mapErrorMsg").html('Cannot determine address at this location.'+status).show(100);
            }
        }
    );
}

Source The Wizz.art

Solution 2:

Set a Position on Map using lat/lang and make the marker draggable

  • Using lat/lang initially sets a marker at the given point on the map

  • The address variable is used for title purpose. It can be ignored.

  • draggable:true makes the marker draggable.

  • Use event listener google.maps.event.addListener(marker, 'dragend', function(marker) To listen for changes in the marker position

    function showMap(lat,lang,address) {
    var myLatLng = {lat: lat, lng: lang};
    
        var map = new google.maps.Map(document.getElementById('map_canvas'), {
          zoom: 17,
          center: myLatLng
        });
    
        var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          title: address,
          draggable:true,
        });
    
        google.maps.event.addListener(marker, 'dragend', function(marker){
            var latLng = marker.latLng; 
            currentLatitude = latLng.lat();
            currentLongitude = latLng.lng();
            jQ("#latitude").val(currentLatitude);
            jQ("#longitude").val(currentLongitude);
         }); 
    }
    

Solution 3:

/**
 *Receiving the value of text box and type done conversion by Number() 
 */
var latitude = Number(document.getElementById("la").value);
var longitude = Number(document.getElementById("lo").value);

function initMap() {
  /**
   *Passing the value of variable received from text box
   **/
  var uluru = {
    lat: latitude,
    lng: longitude
  };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: uluru
  });
  marker = new google.maps.Marker({
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: uluru
  });
  google.maps.event.addListener(marker, 'dragend',
    function(marker) {
      currentLatitude = marker.position.lat();
      currentLongitude = marker.position.lng();
      $("#la").val(currentLatitude);
      $("#lo").val(currentLongitude);
    }
  );
}
#map {
  height: 400px;
  width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="map"></div>
Latitude <input type="text" id="la" name="latitude" value="28.39"> Longitude<input type="text" id="lo" name="longitude" value="84.12">

<!--Google Map API Link-->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOURAPIKEYHERE&callback=initMap">

Solution 4:

Here is the code which gets drag-able marker with position in text box:

/**
 *Receiving the value of text box and type done conversion by Number() 
 */
var latitude = Number(document.getElementById("la").value);
var longitude = Number(document.getElementById("lo").value);

function initMap() {
  /**
   *Passing the value of variable received from text box
   **/
  var uluru = {
    lat: latitude,
    lng: longitude
  };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: uluru
  });
  marker = new google.maps.Marker({
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: uluru
  });
  google.maps.event.addListener(marker, 'dragend',
    function(marker) {
      var latLng = marker.latLng;
      currentLatitude = latLng.lat();
      currentLongitude = latLng.lng();
      $("#la").val(currentLatitude);
      $("#lo").val(currentLongitude);
    }
  );
}
#map {
  height: 400px;
  width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="map"></div>
Latitude <input type="text" id="la" name="latitude" value="28.39"> Longitude<input type="text" id="lo" name="longitude" value="84.12">

<!--Google Map API Link-->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOURAPIKEYHERE&callback=initMap">

Please Use jQuery at the head