View this example full screen.
function initialize() {
var service = new google.maps.places.AutocompleteService();
service.getQueryPredictions({ input: 'pizza near' }, 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>' + prediction.description + '</li>';
}
};
google.maps.event.addDomListener(window, 'load', initialize);
<!DOCTYPE html>
<html>
<head>
<title>Accessing Autocomplete query suggestions</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true&libraries=places&v=3.exp"></script>
<script>
function initialize() {
var service = new google.maps.places.AutocompleteService();
service.getQueryPredictions({ input: 'pizza near' }, 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>' + prediction.description + '</li>';
}
};
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<p>Query suggestions for 'Pizza near':</p>
<ul id="results"></ul>
</body>
</html>