Можно ли получить широту и долготу перетаскиваемого маркера на карте (используя javascript) в форму в HTML?
Я пытаюсь получить широту и долготу перетаскиваемого маркера на картах Google. Мне нужны эти значения, чтобы перейти непосредственно в атрибут значения в<input type="text">, Мне удалось это сделать, единственная проблема заключается в том, что я не знаю, как добавить геокодер, чтобы пользователь мог ввести свой собственный адрес и получить значения лат и lng, но они также должны быть перетащить маркер в дело гугл карты не точное. Я положу свой код здесь. Ценю, если кто-нибудь может помочь.
HTML
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> </head> <body> <input type="text" id="latitude" placeholder="latitude"> <input type="text" id="longitude" placeholder="longitude"> <div id="map" style="width:500px; height:500px"></div> <p><input class="postcode" id="Postcode" name="Postcode" type="text"> <input type="submit" id="findbutton" value="Find" /></p> </body> </html>
JavaScript
function initialize() {
var $latitude = document.getElementById('latitude');
var $longitude = document.getElementById('longitude');
var latitude = 50.715591133433854
var longitude = -3.53485107421875;
var zoom = 16;
var geocoder;
var LatLng = new google.maps.LatLng(latitude, longitude);
var mapOptions = {
zoom: zoom,
center: LatLng,
panControl: false,
zoomControl: false,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map'),mapOptions);
geocoder = new google.maps.Geocoder();
var marker = new google.maps.Marker({
position: LatLng,
map: map,
title: 'Drag Me!',
draggable: true
});
google.maps.event.addListener(marker, 'dragend', function(marker){
var latLng = marker.latLng;
$latitude.value = latLng.lat();
$longitude.value = latLng.lng();
});
}
$(document).ready(function () {
initialize();
$('#findbutton').click(function (e) {
var address = $(PostCodeid).val();
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
marker.setPosition(results[0].geometry.location);
$(latitude).val(marker.getPosition().lat());
$(longitude).val(marker.getPosition().lng());
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
e.preventDefault();
});
});