Исправлен маркер в центре и перетащите карту, чтобы получить долгую, длинную
Я пример карты показывает текущее местоположение с нажатием кнопки показывает широту, длину, и маркер на карте можно перетаскивать, чтобы обновить широту, длину, но мне нужно небольшое изменение на карте
Мне бы хотелось, чтобы маркер был зафиксирован в центре карты, а карта была перетаскиваемой, чтобы получить новый лат, длинный какJSFIDDLE ссылка.
Мой код:
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" />