Fixed Marker in der Mitte und Karte ziehen, um lat, long zu bekommen

Ich bin ein Beispiel Karte zeigt die aktuelle Position mit einem Klick auf eine Schaltfläche zeigt lat, lang, und Marker auf der Karte ist ziehbar, um lat, lang zu aktualisieren, aber ich brauche eine kleine Änderung auf der Karte

Ich möchte, dass die Markierung in der Mitte der Karte fixiert und die Karte ziehbar ist, um eine neue Lat zu erhalten, lange wieJSFIDDLE link.

Mein Code ist:

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);
}
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
<input type="button" class="btn  pull-right map-btn" value="btn " onclick="javascript:showlocation()" />

<div id="map-canvas" style="height: 300px"></div>

<input type="text" id="default_latitude" placeholder="Latitude" />
<input type="text" id="default_longitude" placeholder="Longitude" />

Antworten auf die Frage(2)

Ihre Antwort auf die Frage