title: Draggable marker in map
body: <p>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 <br>
  Changes :
  <br>
  1 - marker on the map after click button be draggable to get new lat long and show address 
  , in fact marker be fixed on the center map and map be draggable to get new address and new lat,long</p>
  
  <p>My code is :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> &lt;script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
     
  &lt;script type="text/javascript"&gt; 
      var map = null;
   function showlocation() {
    // One-shot position request.
    navigator.geolocation.getCurrentPosition(callback);
   }
   function callback(position) {
    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);
    var marker = new google.maps.Marker({
     position: latLong
    });
    marker.setMap(map);
    map.setZoom(16);
    map.setCenter(marker.getPosition());
   }
   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);
   }
  &lt;/script&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="button"  class="btn  pull-right map-btn" value="btn " onclick="javascript:showlocation()" /&gt;
  
  &lt;div id="map-canvas" style="height: 300px"&gt;&lt;/div&gt;
    
  &lt;input type="text" id="default_latitude" placeholder="Latitude"/&gt;
  &lt;input type="text" id="default_longitude" placeholder="Longitude"/&gt;</code></pre>
  </div>
  </div>
  </p>