angulargoogle-maps-api-3google-location-services

Adding favorite location in google autocomplete list

Is there any way to add an additional location to the Google autocomplete. screenshot

I need to search in my 'favorite locations' list and bring the location from that list to the top of the search results.

Pls find the code snippet that I have used for google autocomplete.

let autocomplete = new google.maps.places.Autocomplete(elementRef, {
    componentRestrictions: { country: 'KW' }
});

I'm working on angular 4. Can anyone guid me ?

Thanks!

Solution

  • You can use the AutocompleteService class and build your own suggestions list.

    function initialize() {

    var search = 'Boston, MA';
    
    var service = new google.maps.places.AutocompleteService();
    service.getPlacePredictions({
        input: search,
        types: ['establishment', 'geocode']
    }, callback);
}

function callback(predictions, status) {

    if (status != google.maps.places.PlacesServiceStatus.OK) {
        alert(status);
        return;
    }

    var results = document.getElementById('results');

    for (var i = 0, prediction; prediction = predictions[i]; i++) {
        results.innerHTML += '<li><div class="result"><h3>' + prediction.description + '</h3>' + JSON.stringify(prediction) + '</div></li>';
    }
}
    .result {
 padding: 10px;
 border: 1px solid black;
 margin-bottom: 10px;
}
    <p>Query suggestions:</p>
<ul id="results"></ul>

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initialize&key= AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"
        async defer></script>

    Then it's up to you to style it to your needs and to print what you want in your list. As you can see, it would be easy to push your favorites on top in the callback function.