The
Place Autocomplete
sample demonstrates how to use the
Place Autocomplete widget
to provide a type-ahead search box.
- The radio buttons allow you to filter the types of predictions that the autocomplete returns.
- The
Strict Bounds
option restricts the search to the area within the current viewport. If this option is not checked, then the API
biases
the search to the current viewport, but it does not
restrict
it.
When you select an autocomplete result the sample then calls the
getPlace()
method, and then it opens an info window to display place details.
For more information, see the
Autocomplete class
.
TypeScript
// 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 initMap(): void {
const map = new google.maps.Map(
document.getElementById("map") as HTMLElement,
{
center: { lat: 40.749933, lng: -73.98633 },
zoom: 13,
mapTypeControl: false,
}
);
const card = document.getElementById("pac-card") as HTMLElement;
const input = document.getElementById("pac-input") as HTMLInputElement;
const biasInputElement = document.getElementById(
"use-location-bias"
) as HTMLInputElement;
const strictBoundsInputElement = document.getElementById(
"use-strict-bounds"
) as HTMLInputElement;
const options = {
fields: ["formatted_address", "geometry", "name"],
strictBounds: false,
};
map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);
const autocomplete = new google.maps.places.Autocomplete(input, options);
// Bind the map's bounds (viewport) property to the autocomplete object,
// so that the autocomplete requests use the current map bounds for the
// bounds option in the request.
autocomplete.bindTo("bounds", map);
const infowindow = new google.maps.InfoWindow();
const infowindowContent = document.getElementById(
"infowindow-content"
) as HTMLElement;
infowindow.setContent(infowindowContent);
const marker = new google.maps.Marker({
map,
anchorPoint: new google.maps.Point(0, -29),
});
autocomplete.addListener("place_changed", () => {
infowindow.close();
marker.setVisible(false);
const place = autocomplete.getPlace();
if (!place.geometry || !place.geometry.location) {
// User entered the name of a Place that was not suggested and
// pressed the Enter key, or the Place Details request failed.
window.alert("No details available for input: '" + place.name + "'");
return;
}
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
marker.setPosition(place.geometry.location);
marker.setVisible(true);
infowindowContent.children["place-name"].textContent = place.name;
infowindowContent.children["place-address"].textContent =
place.formatted_address;
infowindow.open(map, marker);
});
// Sets a listener on a radio button to change the filter type on Places
// Autocomplete.
function setupClickListener(id, types) {
const radioButton = document.getElementById(id) as HTMLInputElement;
radioButton.addEventListener("click", () => {
autocomplete.setTypes(types);
input.value = "";
});
}
setupClickListener("changetype-all", []);
setupClickListener("changetype-address", ["address"]);
setupClickListener("changetype-establishment", ["establishment"]);
setupClickListener("changetype-geocode", ["geocode"]);
setupClickListener("changetype-cities", ["(cities)"]);
setupClickListener("changetype-regions", ["(regions)"]);
biasInputElement.addEventListener("change", () => {
if (biasInputElement.checked) {
autocomplete.bindTo("bounds", map);
} else {
// User wants to turn off location bias, so three things need to happen:
// 1. Unbind from map
// 2. Reset the bounds to whole world
// 3. Uncheck the strict bounds checkbox UI (which also disables strict bounds)
autocomplete.unbind("bounds");
autocomplete.setBounds({ east: 180, west: -180, north: 90, south: -90 });
strictBoundsInputElement.checked = biasInputElement.checked;
}
input.value = "";
});
strictBoundsInputElement.addEventListener("change", () => {
autocomplete.setOptions({
strictBounds: strictBoundsInputElement.checked,
});
if (strictBoundsInputElement.checked) {
biasInputElement.checked = strictBoundsInputElement.checked;
autocomplete.bindTo("bounds", map);
}
input.value = "";
});
}
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
JavaScript
// 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 initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 40.749933, lng: -73.98633 },
zoom: 13,
mapTypeControl: false,
});
const card = document.getElementById("pac-card");
const input = document.getElementById("pac-input");
const biasInputElement = document.getElementById("use-location-bias");
const strictBoundsInputElement = document.getElementById("use-strict-bounds");
const options = {
fields: ["formatted_address", "geometry", "name"],
strictBounds: false,
};
map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);
const autocomplete = new google.maps.places.Autocomplete(input, options);
// Bind the map's bounds (viewport) property to the autocomplete object,
// so that the autocomplete requests use the current map bounds for the
// bounds option in the request.
autocomplete.bindTo("bounds", map);
const infowindow = new google.maps.InfoWindow();
const infowindowContent = document.getElementById("infowindow-content");
infowindow.setContent(infowindowContent);
const marker = new google.maps.Marker({
map,
anchorPoint: new google.maps.Point(0, -29),
});
autocomplete.addListener("place_changed", () => {
infowindow.close();
marker.setVisible(false);
const place = autocomplete.getPlace();
if (!place.geometry || !place.geometry.location) {
// User entered the name of a Place that was not suggested and
// pressed the Enter key, or the Place Details request failed.
window.alert("No details available for input: '" + place.name + "'");
return;
}
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
marker.setPosition(place.geometry.location);
marker.setVisible(true);
infowindowContent.children["place-name"].textContent = place.name;
infowindowContent.children["place-address"].textContent =
place.formatted_address;
infowindow.open(map, marker);
});
// Sets a listener on a radio button to change the filter type on Places
// Autocomplete.
function setupClickListener(id, types) {
const radioButton = document.getElementById(id);
radioButton.addEventListener("click", () => {
autocomplete.setTypes(types);
input.value = "";
});
}
setupClickListener("changetype-all", []);
setupClickListener("changetype-address", ["address"]);
setupClickListener("changetype-establishment", ["establishment"]);
setupClickListener("changetype-geocode", ["geocode"]);
setupClickListener("changetype-cities", ["(cities)"]);
setupClickListener("changetype-regions", ["(regions)"]);
biasInputElement.addEventListener("change", () => {
if (biasInputElement.checked) {
autocomplete.bindTo("bounds", map);
} else {
// User wants to turn off location bias, so three things need to happen:
// 1. Unbind from map
// 2. Reset the bounds to whole world
// 3. Uncheck the strict bounds checkbox UI (which also disables strict bounds)
autocomplete.unbind("bounds");
autocomplete.setBounds({ east: 180, west: -180, north: 90, south: -90 });
strictBoundsInputElement.checked = biasInputElement.checked;
}
input.value = "";
});
strictBoundsInputElement.addEventListener("change", () => {
autocomplete.setOptions({
strictBounds: strictBoundsInputElement.checked,
});
if (strictBoundsInputElement.checked) {
biasInputElement.checked = strictBoundsInputElement.checked;
autocomplete.bindTo("bounds", map);
}
input.value = "";
});
}
window.initMap = initMap;
CSS
/*
* 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;
}
#description {
font-family: Roboto;
font-size: 15px;
font-weight: 300;
}
#infowindow-content .title {
font-weight: bold;
}
#infowindow-content {
display: none;
}
#map #infowindow-content {
display: inline;
}
.pac-card {
background-color: #fff;
border: 0;
border-radius: 2px;
box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
margin: 10px;
padding: 0 0.5em;
font: 400 18px Roboto, Arial, sans-serif;
overflow: hidden;
font-family: Roboto;
padding: 0;
}
#pac-container {
padding-bottom: 12px;
margin-right: 12px;
}
.pac-controls {
display: inline-block;
padding: 5px 11px;
}
.pac-controls label {
font-family: Roboto;
font-size: 13px;
font-weight: 300;
}
#pac-input {
background-color: #fff;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
padding: 0 11px 0 13px;
text-overflow: ellipsis;
width: 400px;
}
#pac-input:focus {
border-color: #4d90fe;
}
#title {
color: #fff;
background-color: #4d90fe;
font-size: 25px;
font-weight: 500;
padding: 6px 12px;
}
HTML
<html>
<head>
<title>Place Autocomplete</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<div class="pac-card" id="pac-card">
<div>
<div id="title">Autocomplete search</div>
<div id="type-selector" class="pac-controls">
<input
type="radio"
name="type"
id="changetype-all"
checked="checked"
/>
<label for="changetype-all">All</label>
<input type="radio" name="type" id="changetype-establishment" />
<label for="changetype-establishment">establishment</label>
<input type="radio" name="type" id="changetype-address" />
<label for="changetype-address">address</label>
<input type="radio" name="type" id="changetype-geocode" />
<label for="changetype-geocode">geocode</label>
<input type="radio" name="type" id="changetype-cities" />
<label for="changetype-cities">(cities)</label>
<input type="radio" name="type" id="changetype-regions" />
<label for="changetype-regions">(regions)</label>
</div>
<br />
<div id="strict-bounds-selector" class="pac-controls">
<input type="checkbox" id="use-location-bias" value="" checked />
<label for="use-location-bias">Bias to map viewport</label>
<input type="checkbox" id="use-strict-bounds" value="" />
<label for="use-strict-bounds">Strict bounds</label>
</div>
</div>
<div id="pac-container">
<input id="pac-input" type="text" placeholder="Enter a location" />
</div>
</div>
<div id="map"></div>
<div id="infowindow-content">
<span id="place-name" class="title"></span><br />
<span id="place-address"></span>
</div>
<!--
The `defer` attribute causes the callback to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises.
See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
for more information.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=places&v=weekly"
defer
></script>
</body>
</html>
Try Sample
Clone Sample
Git and Node.js are required to run this sample locally. Follow these
instructions
to install Node.js and NPM. The following commands clone, install dependencies and start the sample application.
git clone -b sample-places-autocomplete https://github.com/googlemaps/js-samples.git
cd js-samples
npm i
npm start
Other samples can be tried by switching to any branch beginning with
sample-
SAMPLE_NAME
.
git checkout sample-
SAMPLE_NAME
npm i
npm start
Use the Place Picker component
Note:
This sample uses an open source library. See the
README
for support
and feedback related to the library.
The place picker component is a text input that allows end users to search for a
specific address or place using autocomplete. It is part of the Extended Component Library,
a set of web components that help developers build better maps and location features faster.
Place Picker configurator
Use the configurator to create embeddable code for a custom Place Picker component.
Get Started
To get started, load the Extended Component library with npm.
For best performance, use a package manager and import only the components you need.
This package is listed on npm as
@googlemaps/extended-component-library
. Install it with:
npm i @googlemaps/extended-component-library;
Then import any components you use in your application.
import '@googlemaps/extended-component-library/place_picker.js';
After loading the npm library,
get an API Key
from the Cloud Console.
<gmpx-api-loader key="
YOUR_API_KEY
" solution-channel="GMP_DOCS_placepicker_v1"></gmpx-api-loader>
Use the place picker component tag.
<gmpx-place-picker placeholder="Enter a place" id="place-picker" style="width: 100%">
</gmpx-place-picker>
For more details, check out
GitHub
or
npm
. To see components used in sample code,
check out the
examples
page on GitHub.