Draggable Marker In Map

I'm an example map shows the current location with the click of a button shows lat,long , But I need a little change on the map Changes : 1 - marker on the map after click butto

Solution 1:

<script type="text/javascript"> 
var map = null;
var marker;

  function showlocation() {
    // One-shot position request.
    navigator.geolocation.getCurrentPosition(callback);
  }
  function callback(position) {

if (marker != null) {
       marker.setMap(null);
    }

    var geocoder = new google.maps.Geocoder();
    var lat = position.coords.latitude;
    var lon = position.coords.longitude;
    document.getElementById('default_latitude').value = lat;
    document.getElementById('default_longitude').value = lon;
    var latLong = new google.maps.LatLng(lat, lon);
    marker = new google.maps.Marker({
      position: latLong,
      draggable:true
    });
    marker.setMap(map);
    map.setZoom(16);
    map.setCenter(marker.getPosition());

    google.maps.event.addListener(marker, 'dragend', function() {
  geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      if (results[0]) {
        $('#default_latitude').val(marker.getPosition().lat());
        $('#default_longitude').val(marker.getPosition().lng());
     `enter code here` }
    }
  });
});

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



  function initMap() {
    var mapOptions = {
      center: new google.maps.LatLng(0, 0),
      zoom: 1,
      mapTypeId: google.maps.MapTypeId.ROADMAP
  };
    map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);
  }
</script>