Recommendation

Recommendation with Geocoding Addresses

How to recommend and post a contribution with a Geocoded search address

Search with Google Geocoding API

A classic Workflow to help your visitors find the right store is to offer a Search Address Field. The search result would be the closest point of sale from the geocoded address specifying the estimated distance. The following example demonstrate how to implement such a feature in your web site using Google Geocoding API.

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 Geocoding API 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">
<input type="submit" id="search-geocoding">
<script>
function geocodeAddress(geocoder) {
    var address = document.getElementById('queryinput').value;
    geocoder.geocode({'address': address}, function (results, status) {
        if (status === google.maps.GeocoderStatus.OK) {
            var latitude = results[0].geometry.location.lat();
            var longitude = results[0].geometry.location.lng();
            // Search the assets around your location
            searchWoosmapApiAroundLocation(latitude, longitude);
            //Contribute to Woosmap Profile
            woosmapRecommendation.sendUserSearchedPosition({
                lat: latitude,
                lng: longitude
            });
        } else {
            console.log('Geocode was not successful: ' + status);
        }
    });
}
function init() {
    var geocoder = new google.maps.Geocoder();
    document.getElementById('search-geocoding').addEventListener('click',
        function () {
            geocodeAddress(geocoder);
        });
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=init">
</script>

Search Around the Geocoded address

We also described this objective in the previous topic. It’s exactly the same code as the search API call takes the Lat/Lng object from geocoded address instead of HTML geolocation.