-1
Ich habe ein sehr kleines Wissen über Javascript und Google Maps API. Was ich brauche, ist eine Google-Karte, wo ich nach Adresse suchen und auch & Drop-Marker auf Karte ziehen kann, um Lat & lange von diesem Ort zu bekommen. Dieser Code funktioniert gut, es dauert Adresszeile und wenn es eintritt, gibt lat, lang mit Draggable Marker. Was ich eigentlich brauche, ist die automatische Vervollständigung der Suche nach der Adresse. Vielen Dank.Google Maps Autocomplete Suche
<!DOCTYPE html>
<html lang="nb">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
<form>
<input type="text" id="user_location" name="user_location" class="register-form__location-holder"> <a href="#" class="button button--small register-wizard__map-search-button">Search adr.</a>
<div style="width:100%;height:300px" id="register-form__map" class="register-form__map register-form__map--user"></div>
lat: <input name="user_latitude" value="" class="register-form__latitude-holder">
long: <input name="user_longitude" value="" class="register-form__longitude-holder">
</form>
<script>
$(document).ready(function(e) {
// init map
function initMap(lat, long) {
var center = new google.maps.LatLng(parseFloat(lat), long);
var mapOptions = {center: center, zoom: 16, scrollwheel: false};
map = new google.maps.Map(document.getElementById("register-form__map"), mapOptions);
marker = new google.maps.Marker({position: new google.maps.LatLng(lat, long), draggable:true, map: map,title: 'Test'});
google.maps.event.addListener(marker, 'dragend', function (event) {
var lat = this.getPosition().lat();
var long = this.getPosition().lng();
initMap(lat, long);
$('.register-form__latitude-holder').val(lat);
$('.register-form__longitude-holder').val(long);
});
}
/**
* Geocode when user location input changes
*/
$('body').on('change', '.register-form__location-holder', function(e) {
var address = $(this).val();
var geocoder = new google.maps.Geocoder();
if (geocoder) {
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
console.log(results[0].geometry.location);
var lat = results[0].geometry.location.lat();
var long = results[0].geometry.location.lng();
console.log("lat="+lat);
initMap(lat, long);
$('.register-form__latitude-holder').val(lat);
$('.register-form__longitude-holder').val(long);
}
else {
alert("Kunne ikke finne denne adressen, vennligst skriv en i nærheten og dra pin'en på kartet nærmest mulig riktig posisjon.");
$('.register-form__latitude-holder').focus().select();
}
});
}
});
var lat = $('.register-form__latitude-holder').val();
var long = $('.register-form__longitude-holder').val();
initMap(lat, long);
});
</script>
</body>
</html>
Thanku so viel Sir. –
Willkommen @ShehryarKhan, wenn diese oder jede Antwort Ihre Frage gelöst hat, beachten Sie bitte [akzeptieren] (https://meta.stackexchange.com/q/5234/179419), indem Sie auf das Häkchen klicken. Dies zeigt der breiteren Gemeinschaft, dass Sie eine Lösung gefunden haben und sowohl dem Antworter als auch Ihnen einen guten Ruf verschaffen. Es besteht keine Verpflichtung, dies zu tun. –