title: Fixed marker in center and drag map to get lat,long
body: <p>I'm an example map shows the current location with the click of a button shows lat,long ,and marker on the map is draggable to update lat,long, But I need a little change on the map </p>
  
  <p>I would like the marker be to fixed on the center of the map and the map to be draggable to get new lat,long like <a href="http://jsfiddle.net/UuDA6/" rel="noreferrer">JSFIDDLE link</a>.  </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>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());
          }
        }
      });
    });
  
  }
  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);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"&gt;&lt;/script&gt;
  &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>