<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAGnSLZ6FtSfT1Pyn-_k-GTwIoLqep_wTU&libraries=places&callback=initAutocomplete"
async defer></script>
<script>
function initAutocomplete() {
var autocomplete = new google.maps.places.Autocomplete(
(document.getElementById('autocomplete-address')), {
types: ['geocode']
}
);
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
if (!place.geometry) {
window.alert("No details available for input: '" + place.name + "'");
return;
}
// If the place has a geometry, store the latitude and longitude.
document.getElementById('latitude').value = place.geometry.location.lat();
document.getElementById('longitude').value = place.geometry.location.lng();
});
initMap()// this method is not for auto complete but being called for //showing map
}
you need to get your api key from google api console for place api and also add the domain where it is being used.
Note: Also your input field should have the ID of autocomplete-address as per the code above
Leave a Reply