This example executes a query prediction request for the phrase "pizza near Syd" and displays the results as an HTML list.
Read the documentation.
// This example retrieves autocomplete predictions programmatically from the // autocomplete service, and displays them as an HTML list. // This example requires the Places library. Include the libraries=places // parameter when you first load the API. For example: // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"> function initService() { var displaySuggestions = function(predictions, status) { if (status != google.maps.places.PlacesServiceStatus.OK) { alert(status); return; } predictions.forEach(function(prediction) { var li = document.createElement('li'); li.appendChild(document.createTextNode(prediction.description)); document.getElementById('results').appendChild(li); }); }; var service = new google.maps.places.AutocompleteService(); service.getQueryPredictions({ input: 'pizza near Syd' }, displaySuggestions); }
<div id="right-panel"> <p>Query suggestions for 'pizza near Syd':</p> <ul id="results"></ul> </div>
/* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
#right-panel { font-family: 'Roboto','sans-serif'; line-height: 30px; padding-left: 10px; } #right-panel select, #right-panel input { font-size: 15px; } #right-panel select { width: 100%; } #right-panel i { font-size: 12px; }
<!-- Replace the value of the key parameter with your own API key. --> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initService" async defer></script>
Try it yourself
You can experiment with this code in JSFiddle by clicking the <>
icon in the
top-right corner of the code window.
<!DOCTYPE html>
<html>
<head>
<title>Retrieving Autocomplete Predictions</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#right-panel {
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
#right-panel select, #right-panel input {
font-size: 15px;
}
#right-panel select {
width: 100%;
}
#right-panel i {
font-size: 12px;
}
</style>
</head>
<body>
<div id="right-panel">
<p>Query suggestions for 'pizza near Syd':</p>
<ul id="results"></ul>
</div>
<script>
// This example retrieves autocomplete predictions programmatically from the
// autocomplete service, and displays them as an HTML list.
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
function initService() {
var displaySuggestions = function(predictions, status) {
if (status != google.maps.places.PlacesServiceStatus.OK) {
alert(status);
return;
}
predictions.forEach(function(prediction) {
var li = document.createElement('li');
li.appendChild(document.createTextNode(prediction.description));
document.getElementById('results').appendChild(li);
});
};
var service = new google.maps.places.AutocompleteService();
service.getQueryPredictions({ input: 'pizza near Syd' }, displaySuggestions);
}
</script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initService"
async defer></script>
</body>
</html>