Recommendation

Recommendation with Google Places API autocomplete feature

How to improve user's experience using Google Places and its autocomplete feature

Use Google Places autocomplete

Places API can be used to provides an autocomplete service for text-based geographic searches.

Autocomplete improves the search experience and reduces errors on address inputs.

Find a Coffee Shop Near You!

 

loader

How to Implement the Feature

The Recommend Store usecase already described the steps for recommending, that is load and initialize your project and get the automatic recommendation.

Geocode using Google Places and Contribute

Below is the process of geocoding the input address and then contribute to Woosmap by calling woosmapRecommendation.sendUserSearchedPosition().

<input type="text" name="query" id="queryinput" placeholder="Search an Address">
<script>
function init() {
    // Create the autocomplete helper, and associate it with an HTML text input box.
    var autocomplete = new google.maps.places.Autocomplete(document.getElementById('queryinput'));
    function onAutocompleteValidate () {
        var placeResult = autocomplete.getPlace();

        if (!placeResult.geometry) {
          return;
        }

        var latitude = placeResult.geometry.location.lat();
        var longitude = placeResult.geometry.location.lng();
        // Search the assets around your location
        searchWoosmapApiAroundLocation(latitude, longitude);
        //Contribute to Woosmap Profile
        woosmapRecommendation.sendUserSearchedPosition({
            lat: latitude,
            lng: longitude
        });
    }

    google.maps.event.addListener(autocomplete, 'place_changed', onAutocompleteValidate);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=init&libraries=places">
</script>

You could fine more information about place options in the google website.