Garmaine Staff asked 1 year ago

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
    );
}