Implementation of Google Autocomplete places and navigate marker to selected place.
Initially we have to call autocomplete places function using below Jquery.
<script>
$(document).ready(function() {
setupAutocomplete();
}
</script>
=>Defining the setupAutocomplete() function for google search places.
function setupAutocomplete() {
var input = document.getElementById('searched_bar');
var searchBox = new google.maps.places.SearchBox(input);
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
console.log('Places changed!');
if (places.length === 0) {
return;
}
places.forEach(function(place) {
if (!place.geometry) {
console.log('Returned place contains no geometry');
return;
}
var location = place.geometry.location;
setupaddress(location);
});
});
}
=>Process of Navigating marker to selected place in map.
function setupaddress(loc){
console.log("hi varun");
map.setCenter(loc);
map.setZoom(15);
if (marker) {
marker.setMap(null);
}
// Create a new marker at the selected location
marker = new google.maps.Marker({
position: loc,
map: map,
animation: google.maps.Animation.DROP,
zIndex: google.maps.Marker.MAX_ZINDEX + 1,
draggable: true
});
// Add a listener for marker dragend event
google.maps.event.addListener(marker, 'dragend', function () {
// Call updateAddress when marker position is updated
updateAddress();
});
updateAddress();
}