Maps API v3 Places Autocomplete Predictions

Biaise autocomplete results based on location and retrieve predictions

by Annie Lagang

HTML

<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&amp;libraries=places"></script>
<p>Query suggestions for 'Migros' near (46.18, 6.12):</p>
<ul id="results"></ul>

CSS

body {
    font-family: Arial;
}
li {
    margin: 20px;
}
li div {
    margin-top: 20px;
}

JavaScript

function initialize() {
    var service = new google.maps.places.AutocompleteService();
    service.getQueryPredictions({
        input: 'migros',
        //location: new google.maps.LatLng(46.18, 6.12),
        radius: 5000
    }, 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++) {
        console.log(prediction);
        results.innerHTML += '<li>' + prediction.description + '<div>' + JSON.stringify(prediction) + '</div></li>';
    }
}

initialize();