0

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
    );
}
4
  • 1
    Just put it in the callback.
    – tkausl
    Apr 10, 2020 at 19:53
  • So I have to call the 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.
    – user13286
    Apr 10, 2020 at 19:58
  • 1
    Your geocoding code is asynchronous, so your code will move on to calling the updateParentState function while waiting for the other function to finish execution, causing your issue. As @tkausl said, just put your updateParentState function call in the callback as well
    – awarrier99
    Apr 10, 2020 at 19:58
  • 1
    Yeah move it for the else branch into your callback, and for the if branch place it underneath there as well
    – awarrier99
    Apr 10, 2020 at 19:59

1 Answer 1

1

Call self.props.updateParentState in the callback of geocoder.geocode as well as at the end of the if block:

geocodeLoc = (place) => {
    var self = this;
    if (place.geometry) {
        const lat = place.geometry.location.lat();
        const lng = place.geometry.location.lng();
        self.props.updateParentState(lat, lng);
    } else {
        let geocoder = new google.maps.Geocoder();
        geocoder.geocode({'address': place.name}, function(results, status) {
            if (status === google.maps.GeocoderStatus.OK) {
                const lat = results[0].geometry.location.lat();
                const lng = results[0].geometry.location.lng();
                self.props.updateParentState(lat, lng);
            }
        });
    }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.