I am using a Google autocomplete geocoding input. I have it set up to handle the geocoding on change of the input(location selected), but also if the user hits the submit button after typing in a location without selecting from the autocomplete results. Once I get the user's selected location I am passing the lat/lng coordinates to the state of the parent component using a function updateParentState()
What I would like to do is wait for the lat
and lng
variables to be populated before running that function. Currently the autocomplete portion of the function, the if (place.geometry)
part of the condition, is working since lat
/lng
are populated instantly on change, but since Geocoding the raw input takes a bit, the updateParentState()
function is running before lat
/lng
are populated. How can I adjust for this:
geocodeLoc = (place) => {
var self = this;
let lat = '';
let lng = '';
if (place.geometry) {
// WORKS
lat = place.geometry.location.lat();
lng = place.geometry.location.lng();
} else {
let geocoder = new google.maps.Geocoder();
geocoder.geocode({'address': place.name}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
// DOESN'T WORK
lat = results[0].geometry.location.lat();
lng = results[0].geometry.location.lng();
}
});
}
self.props.updateParentState(
lat, lng
);
}
updateParentState
function in two spots? Because if I put it in the callback, it will stop working for the first part of the condition unless I add it there as well.updateParentState
function while waiting for the other function to finish execution, causing your issue. As @tkausl said, just put yourupdateParentState
function call in the callback as wellelse
branch into your callback, and for theif
branch place it underneath there as well