PlaceAutocompleteElement class
google.maps.places.PlaceAutocompleteElement
class
PlaceAutocompleteElement is anHTMLElement
subclass which provides a UI component for the Places Autocomplete API.
Custom element:
<gmp-place-autocomplete name= "string" requested-language= "string" requested-region= "string" types= "type1 type2 type3..." ></gmp-place-autocomplete>
This class extends
HTMLElement
.
This class implements
PlaceAutocompleteElementOptions
.
Access by callingconst {PlaceAutocompleteElement} = await google.maps.importLibrary( "places" )
.SeeLibraries in the Maps JavaScript API.
Constructor | |
---|---|
PlaceAutocompleteElement |
PlaceAutocompleteElement(options) Parameters:
|
Properties | |
---|---|
componentRestrictions |
Type:
ComponentRestrictionsoptional The component restrictions. Component restrictions are used to restrict predictions to only those within the parent component. For example, the country. |
locationBias |
Type:
LocationBiasoptional A soft boundary or hint to use when searching for places. |
locationRestriction |
Type:
LocationRestrictionoptional Bounds to constrain search results. |
name |
Type:
stringoptional The name to be used for the input element. Seehttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#namefor details. Follows the same behavior as the name attribute for inputs. Note that this is the name that will be used when a form is submitted. Seehttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/formfor details.
HTML attribute:
|
requestedLanguage |
Type:
stringoptional A language identifier for the language in which the results should be returned, if possible. Results in the selected language may be given a higher ranking, but suggestions are not restricted to this language. See thelist of supported languages.
HTML attribute:
|
requestedRegion |
Type:
stringoptional A region code which is used for result formatting and for result filtering. It does not restrict the suggestions to this country. The region code accepts accTLD ( "top-level domain" )two-character value. Most ccTLD codes are identical to ISO 3166-1 codes, with some notable exceptions. For example, the United Kingdom's ccTLD is "uk" (
.co.uk ) while its ISO 3166-1 code is "gb" (technically for the entity of "The United Kingdom of Great Britain and Northern Ireland" ).HTML attribute:
|
types |
Type:
Array<string>optional The types of predictions to be returned. For supported types, see thedeveloper's guide.If no types are specified, all types will be returned.
HTML attribute:
|
Parts | |
---|---|
prediction-item |
An item in the drop down of predictions that represents a single prediction. |
prediction-item-icon |
The icon displayed to the left of each item in the list of predictions. |
prediction-item-main-text |
A part of prediction-item that is the main text of the prediction. For geographic locations, this contains a place name, like 'Sydney', or a street name and number, like '10 King Street'. By default, the prediction-item-main-text is colored black. If there is any additional text in the prediction-item, it is outside prediction-item-main-text and inherits its styling from prediction-item. It is colored gray by default. The additional text is typically an address. |
prediction-item-match |
The part of the returned prediction that matches the user’s input. By default, this matched text is highlighted in bold text. Note that the matched text may be anywhere within prediction-item. It is not necessarily part of prediction-item-main-text. |
prediction-item-selected |
The item when the user navigates to it via the keyboard. Note: Selected items will be affected by both this part styles and also the prediction-item part styles. |
prediction-list |
The visual element containing the list of predictions returned by the Place Autocomplete service. This list appears as a dropdown list below the PlaceAutocompleteElement. |
Methods | |
---|---|
addEventListener |
addEventListener(type, listener[, options]) Parameters:
Return Value:
void Sets up a function that will be called whenever the specified event is delivered to the target. SeeaddEventListener |
removeEventListener |
removeEventListener(type, listener[, options]) Parameters:
Return Value:
void Removes an event listener previously registered with addEventListener from the target. SeeremoveEventListener |
Events | |
---|---|
gmp-placeselect |
function(placeAutocompletePlaceSelectEvent) Arguments:
This event is fired when a user selects a place prediction. Contains a Place object. |
gmp-requesterror |
function(placeAutocompleteRequestErrorEvent) Arguments:
This event is fired when a request to the backend was denied (e.g. incorrect API key). This event does not bubble. |
PlaceAutocompleteElementOptions interface
google.maps.places.PlaceAutocompleteElementOptions
interface
Options for constructing a PlaceAutocompleteElement.
Properties | |
---|---|
componentRestrictionsoptional |
Type:
ComponentRestrictionsoptional |
locationBiasoptional |
Type:
LocationBiasoptional |
locationRestrictionoptional |
Type:
LocationRestrictionoptional |
requestedLanguageoptional |
Type:
stringoptional |
requestedRegionoptional |
Type:
stringoptional |
typesoptional |
Type:
Array<string>optional |
PlaceAutocompletePlaceSelectEvent class
google.maps.places.PlaceAutocompletePlaceSelectEvent
class
This event is created after the user selects a place with the Place Autocomplete Element. Access the selection withevent.place
.
This class extends
Event
.
Access by callingconst {PlaceAutocompletePlaceSelectEvent} = await google.maps.importLibrary( "places" )
.SeeLibraries in the Maps JavaScript API.
Properties | |
---|---|
place |
Type:
Place |
PlaceAutocompleteRequestErrorEvent class
google.maps.places.PlaceAutocompleteRequestErrorEvent
class
This event is emitted by the PlaceAutocompleteElement when there is an issue with the network request.
This class extends
Event
.
Access by callingconst {PlaceAutocompleteRequestErrorEvent} = await google.maps.importLibrary( "places" )
.SeeLibraries in the Maps JavaScript API.
Autocomplete class
google.maps.places.Autocomplete
class
A widget that provides Place predictions based on a user's text input. It attaches to an input element of typetext
,and listens for text entry in that field. The list of predictions is presented as a drop-down list, and is updated as text is entered.
This class extends
MVCObject
.
Access by callingconst {Autocomplete} = await google.maps.importLibrary( "places" )
.SeeLibraries in the Maps JavaScript API.
Constructor | |
---|---|
Autocomplete |
Autocomplete(inputField[, opts]) Parameters:
Creates a new instance of Autocomplete that attaches to the specified input text field with the given options. |
Methods | |
---|---|
getBounds |
getBounds() Parameters:None
Return Value:
LatLngBounds|undefined The biasing bounds.Returns the bounds to which predictions are biased. |
getFields |
getFields() Parameters:None
Return Value:
Array<string>|undefined Returns the fields to be included for the Place in the details response when the details are successfully retrieved. For a list of fields see PlaceResult . |
getPlace |
getPlace() Parameters:None
Return Value:
PlaceResult The Place selected by the user.Returns the details of the Place selected by user if the details were successfully retrieved. Otherwise returns a stub Place object, with the name property set to the current value of the input field. |
setBounds |
setBounds(bounds) Parameters:
Return Value:None
Sets the preferred area within which to return Place results. Results are biased towards, but not restricted to, this area. |
setComponentRestrictions |
setComponentRestrictions(restrictions) Parameters:
Return Value:None
Sets the component restrictions. Component restrictions are used to restrict predictions to only those within the parent component. For example, the country. |
setFields |
setFields(fields) Parameters:
Return Value:None
Sets the fields to be included for the Place in the details response when the details are successfully retrieved. For a list of fields see PlaceResult . |
setOptions |
setOptions(options) Parameters:
Return Value:None
|
setTypes |
setTypes(types) Parameters:
Return Value:None
Sets the types of predictions to be returned. For supported types, see thedeveloper's guide.If no types are specified, all types will be returned. |
Inherited:
addListener ,
bindTo ,
get ,
notify ,
set ,
setValues ,
unbind ,
unbindAll
|
Events | |
---|---|
place_changed |
function() Arguments:None
This event is fired when a PlaceResult is made available for a Place the user has selected.If the user enters the name of a Place that was not suggested by the control and presses the Enter key, or if a Place Details request fails, the PlaceResult contains the user input in thename property, with no other properties defined. |
AutocompleteOptions interface
google.maps.places.AutocompleteOptions
interface
The options that can be set on anAutocomplete
object.
Properties | |
---|---|
boundsoptional |
Type:
LatLngBounds|LatLngBoundsLiteraloptional The area in which to search for places. |
componentRestrictionsoptional |
Type:
ComponentRestrictionsoptional The component restrictions. Component restrictions are used to restrict predictions to only those within the parent component. For example, the country. |
fieldsoptional |
Type:
Array<string>optional Fields to be included for the Place in the details response when the details are successfully retrieved,which will be billed for.If ['ALL'] is passed in, all available fields will be returned and billed for (this is not recommended for production deployments). For a list of fields seePlaceResult .Nested fields can be specified with dot-paths (for example,"geometry.location" ). The default is['ALL'] . |
|
Type:
booleanoptional Whether to retrieve only Place IDs. The PlaceResult made available when the place_changed event is fired will only have the place_id, types and name fields, with the place_id, types and description returned by the Autocomplete service. Disabled by default. |
strictBoundsoptional |
Type:
booleanoptional A boolean value, indicating that the Autocomplete widget should only return those places that are inside the bounds of the Autocomplete widget at the time the query is sent. Setting strictBounds to false (which is the default) will make the results biased towards, but not restricted to, places contained within the bounds. |
typesoptional |
Type:
Array<string>optional The types of predictions to be returned. For supported types, see thedeveloper's guide.If no types are specified, all types will be returned. |
SearchBox class
google.maps.places.SearchBox
class
A widget that provides query predictions based on a user's text input. It attaches to an input element of typetext
,and listens for text entry in that field. The list of predictions is presented as a drop-down list, and is updated as text is entered.
This class extends
MVCObject
.
Access by callingconst {SearchBox} = await google.maps.importLibrary( "places" )
.SeeLibraries in the Maps JavaScript API.
Constructor | |
---|---|
SearchBox |
SearchBox(inputField[, opts]) Parameters:
Creates a new instance of SearchBox that attaches to the specified input text field with the given options. |
Methods | |
---|---|
getBounds |
getBounds() Parameters:None
Return Value:
LatLngBounds|undefined Returns the bounds to which query predictions are biased. |
getPlaces |
getPlaces() Parameters:None
Return Value:
Array<PlaceResult>|undefined Returns the query selected by the user to be used with places_changed event. |
setBounds |
setBounds(bounds) Parameters:
Return Value:None
Sets the region to use for biasing query predictions. Results will only be biased towards this area and not be completely restricted to it. |
Inherited:
addListener ,
bindTo ,
get ,
notify ,
set ,
setValues ,
unbind ,
unbindAll
|
Events | |
---|---|
places_changed |
function() Arguments:None
This event is fired when the user selects a query, getPlaces should be used to get new places. |
SearchBoxOptions interface
google.maps.places.SearchBoxOptions
interface
The options that can be set on aSearchBox
object.
Properties | |
---|---|
boundsoptional |
Type:
LatLngBounds|LatLngBoundsLiteraloptional The area towards which to bias query predictions. Predictions are biased towards, but not restricted to, queries targeting these bounds. |