Je veux implémenter une fonctionnalité où les gens pourront changer leur emplacement. Pour cela je veux utiliser google places api. Maintenant, ce que je veux, c'est une boîte de recherche et quand quelqu'un entre une ville/lieu, il va chercher des lieux google et arriver à des résultats. Une fois l'emplacement choisi, il me donnera le lat et le pouce de cet endroit. Est-ce possible de se passer de la carte?Google lieux de recherche sans carte?
grâce
Vous pouvez utiliser Google Maps Places Autocomplete pour obtenir une adresse précise, puis après avoir obtenu avec succès une adresse que vous pouvez géocodage pour obtenir la latitude et lng.
Comme ceci:
function codeAddress(address) {
geocoder.geocode({ 'address': address}, function(results, status) {
if (status == 'OK') {
alert(results[0].geometry.location); // This is the lat and lng
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
Vérifiez cet exemple de travail: https://jsbin.com/pejagub/edit?html,js,output
J'ai aussi inséré ici l'extrait de code Incase le jsbin ne fonctionne pas
var placeSearch, autocomplete, geocoder;
function initAutocomplete() {
geocoder = new google.maps.Geocoder();
autocomplete = new google.maps.places.Autocomplete(
(document.getElementById('autocomplete')), {
types: ['geocode']
});
autocomplete.addListener('place_changed', fillInAddress);
}
function codeAddress(address) {
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == 'OK') {
// This is the lat and lng results[0].geometry.location
alert(results[0].geometry.location);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
function fillInAddress() {
var place = autocomplete.getPlace();
codeAddress(document.getElementById('autocomplete').value);
}#autocomplete {
width: 100%;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="locationField">
<input id="autocomplete" placeholder="Enter your address" type="text" />
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCKQX3cyZ7pVKmBwE8wiowivW9qH62AVk8&libraries=places&callback=initAutocomplete" async defer></script>
</body>
</html>