Top location document getelementsbyname return 0 value javascript void 0 năm 2024

Question

This page describes the client-side library available with the Maps JavaScript API. If you want to work with the Places API web service on your server, take a look at the Node.js Client for Google Maps Services. The page at that link also introduces the Java Client, Python Client and Go Client for Google Maps Services.

Introduction

Autocomplete is a feature of the Places library in the Maps JavaScript API. You can use autocomplete to give your applications the type-ahead-search behavior of the Google Maps search field. The autocomplete service can match on full words and substrings, resolving place names, addresses, and plus codes. Applications can therefore send queries as the user types, to provide on-the-fly place predictions.

Getting started

Before using the Places library in the Maps JavaScript API, first ensure that the Places API is enabled in the Google Cloud Console, in the same project you set up for the Maps JavaScript API.

To view your list of enabled APIs:

Go to the Google Cloud Console.
Click the Select a project button, then select the same project you set up for the Maps JavaScript API and click Open.
From the list of APIs on the Dashboard, look for Places API.
If you see the API in the list, you’re all set. If the API is not listed, enable it:
1. At the top of the page, select ENABLE API to display the Library tab. Alternatively, from the left side menu, select Library.
2. Search for Places API, then select it from the results list.
3. Select ENABLE. When the process finishes, Places API appears in the list of APIs on the Dashboard.

Loading the library

The Places service is a self-contained library, separate from the main Maps JavaScript API code. To use the functionality contained within this library, you must first load it using the

6 parameter in the Maps API bootstrap URL:

See the Libraries Overview for more information.

Summary of classes

The API offers two types of autocomplete widgets, which you can add via the

7 and

8 classes respectively. In addition, you can use the

9 class to retrieve autocomplete results programmatically (see the Maps JavaScript API Reference: AutocompleteService class).

Below is a summary of the classes available:

adds a text input field to your web page, and monitors that field for character entries. As the user enters text, autocomplete returns place predictions in the form of a dropdown pick list. When the user selects a place from the list, information about the place is returned to the autocomplete object, and can be retrieved by your application. See the details .![An autocomplete text field, and the pick list of place
```
predictions supplied as the user enters the search query.](https://https://i0.wp.com/developers.google.com/static/maps/documentation/javascript/images/places-autocomplete-suggest.png)Figure 1: Autocomplete text field and pick list![](https://https://i0.wp.com/developers.google.com/static/maps/documentation/javascript/images/places-autocomplete-filled.png)Figure 2: Completed address form
```
adds a text input field to your web page, in much the same way asconst center = { lat: 50.064192, lng: -130.605469 };
// Create a bounding box with sides ~10km away from the center point const defaultBounds = { north: center.lat + 0.1, south: center.lat - 0.1, east: center.lng + 0.1, west: center.lng - 0.1, }; const input = document.getElementById("pac-input"); const options = { bounds: defaultBounds, componentRestrictions: { country: "us" }, fields: ["address_components", "geometry", "icon", "name"], strictBounds: false, }; const autocomplete = new google.maps.places.Autocomplete(input, options); 7. The differences are as follows:
- The main difference lies in the results that appear in the pick list. const center = { lat: 50.064192, lng: -130.605469 }; // Create a bounding box with sides ~10km away from the center point const defaultBounds = {
```
 north: center.lat + 0.1,  
 south: center.lat - 0.1,  
 east: center.lng + 0.1,  
 west: center.lng - 0.1,  
```
  }; const input = document.getElementById("pac-input"); const options = {
```
 bounds: defaultBounds,  
 componentRestrictions: { country: "us" },  
 fields: ["address_components", "geometry", "icon", "name"],  
 strictBounds: false,  
```
  }; const autocomplete = new google.maps.places.Autocomplete(input, options); 8 supplies an extended list of predictions, which can include places (as defined by the Places API) plus suggested search terms. For example, if the user enters 'pizza in new', the pick list may include the phrase 'pizza in New York, NY' as well as the names of various pizza outlets.
- const center = { lat: 50.064192, lng: -130.605469 }; // Create a bounding box with sides ~10km away from the center point const defaultBounds = {
```
 north: center.lat + 0.1,  
 south: center.lat - 0.1,  
 east: center.lng + 0.1,  
 west: center.lng - 0.1,  
```
  }; const input = document.getElementById("pac-input"); const options = {
```
 bounds: defaultBounds,  
 componentRestrictions: { country: "us" },  
 fields: ["address_components", "geometry", "icon", "name"],  
 strictBounds: false,  
```
  }; const autocomplete = new google.maps.places.Autocomplete(input, options); 8 offers fewer options than const center = { lat: 50.064192, lng: -130.605469 }; // Create a bounding box with sides ~10km away from the center point const defaultBounds = {
```
 north: center.lat + 0.1,  
 south: center.lat - 0.1,  
 east: center.lng + 0.1,  
 west: center.lng - 0.1,  
```
  }; const input = document.getElementById("pac-input"); const options = {
```
 bounds: defaultBounds,  
 componentRestrictions: { country: "us" },  
 fields: ["address_components", "geometry", "icon", "name"],  
 strictBounds: false,  
```
  }; const autocomplete = new google.maps.places.Autocomplete(input, options); 7 for restricting the search. In the former, you can bias the search towards a given autocomplete.setFields(["place_id", "geometry", "name"]); 6. In the latter, you can restrict the search to a particular country and particular place types, as well as setting the bounds. For more information, see .
  Figure 3: A SearchBox presents search terms and place predictions. See the details .
You can create an object to retrieve predictions programmatically. Call autocomplete.setFields(["place_id", "geometry", "name"]); 8 to retrieve matching places, or call autocomplete.setFields(["place_id", "geometry", "name"]); 9 to retrieve matching places plus suggested search terms. Note: const center = { lat: 50.064192, lng: -130.605469 }; // Create a bounding box with sides ~10km away from the center point const defaultBounds = { north: center.lat + 0.1, south: center.lat - 0.1, east: center.lng + 0.1, west: center.lng - 0.1, }; const input = document.getElementById("pac-input"); const options = { bounds: defaultBounds, componentRestrictions: { country: "us" }, fields: ["address_components", "geometry", "icon", "name"], strictBounds: false, }; const autocomplete = new google.maps.places.Autocomplete(input, options); 9 does not add any UI controls. Instead, the above methods return an array of prediction objects. Each prediction object contains the text of the prediction, as well as reference information and details of how the result matches the user input. See the details .

The widget creates a text input field on your web page, supplies predictions of places in a UI pick list, and returns place details in response to a

const southwest = { lat: 5.6108, lng: 136.589326 }; const northeast = { lat: 61.179287, lng: 2.64325 }; const newBounds = new google.maps.LatLngBounds(southwest, northeast); autocomplete.setBounds(newBounds);

2 request. Each entry in the pick list corresponds to a single place (as defined by the Places API).

The

7 constructor takes two arguments:

An HTML const southwest = { lat: 5.6108, lng: 136.589326 }; const northeast = { lat: 61.179287, lng: 2.64325 }; const newBounds = new google.maps.LatLngBounds(southwest, northeast); autocomplete.setBounds(newBounds); 4 element of type const southwest = { lat: 5.6108, lng: 136.589326 }; const northeast = { lat: 61.179287, lng: 2.64325 }; const newBounds = new google.maps.LatLngBounds(southwest, northeast); autocomplete.setBounds(newBounds); 5. This is the input field that the autocomplete service will monitor and attach its results to.
An optional argument, which can contain the following properties:
- An array of data const southwest = { lat: 5.6108, lng: 136.589326 }; const northeast = { lat: 61.179287, lng: 2.64325 }; const newBounds = new google.maps.LatLngBounds(southwest, northeast); autocomplete.setBounds(newBounds); 7 to be included in the const southwest = { lat: 5.6108, lng: 136.589326 }; const northeast = { lat: 61.179287, lng: 2.64325 }; const newBounds = new google.maps.LatLngBounds(southwest, northeast); autocomplete.setBounds(newBounds); 8 response for the user's selected const southwest = { lat: 5.6108, lng: 136.589326 }; const northeast = { lat: 61.179287, lng: 2.64325 }; const newBounds = new google.maps.LatLngBounds(southwest, northeast); autocomplete.setBounds(newBounds); 9. If the property is not set or if const southwest = { lat: 5.6108, lng: 136.589326 }; const northeast = { lat: 61.179287, lng: 2.64325 }; const newBounds = new google.maps.LatLngBounds(southwest, northeast); autocomplete.setBounds(newBounds); 0 is passed in, all available fields are returned and (this is not recommended for production deployments). For a list of fields, see .
- An array of const southwest = { lat: 5.6108, lng: 136.589326 }; const northeast = { lat: 61.179287, lng: 2.64325 }; const newBounds = new google.maps.LatLngBounds(southwest, northeast); autocomplete.setBounds(newBounds); 2 that specifies an explicit type or a type collection, as listed in the . If no type is specified, all types are returned.
- const southwest = { lat: 5.6108, lng: 136.589326 }; const northeast = { lat: 61.179287, lng: 2.64325 }; const newBounds = new google.maps.LatLngBounds(southwest, northeast); autocomplete.setBounds(newBounds); 3 is a const southwest = { lat: 5.6108, lng: 136.589326 }; const northeast = { lat: 61.179287, lng: 2.64325 }; const newBounds = new google.maps.LatLngBounds(southwest, northeast); autocomplete.setBounds(newBounds); 4 object specifying the area in which to search for places. The results are biased towards, but not restricted to, places contained within these bounds.
- const southwest = { lat: 5.6108, lng: 136.589326 }; const northeast = { lat: 61.179287, lng: 2.64325 }; const newBounds = new google.maps.LatLngBounds(southwest, northeast); autocomplete.setBounds(newBounds); 5 is a const southwest = { lat: 5.6108, lng: 136.589326 }; const northeast = { lat: 61.179287, lng: 2.64325 }; const newBounds = new google.maps.LatLngBounds(southwest, northeast); autocomplete.setBounds(newBounds); 6 specifying whether the API must return only those places that are strictly within the region defined by the given const southwest = { lat: 5.6108, lng: 136.589326 }; const northeast = { lat: 61.179287, lng: 2.64325 }; const newBounds = new google.maps.LatLngBounds(southwest, northeast); autocomplete.setBounds(newBounds); 3. The API does not return results outside this region even if they match the user input.
- const southwest = { lat: 5.6108, lng: 136.589326 }; const northeast = { lat: 61.179287, lng: 2.64325 }; const newBounds = new google.maps.LatLngBounds(southwest, northeast); autocomplete.setBounds(newBounds); 8 can be used to restrict results to specific groups. Currently, you can use const southwest = { lat: 5.6108, lng: 136.589326 }; const northeast = { lat: 61.179287, lng: 2.64325 }; const newBounds = new google.maps.LatLngBounds(southwest, northeast); autocomplete.setBounds(newBounds); 8 to filter by up to 5 countries. Countries must be passed as as a two-character, ISO 3166-1 Alpha-2 compatible country code. Multiple countries must be passed as a list of country codes. Note: If you receive unexpected results with a country code, verify that you are using a code which includes the countries, dependent territories, and special areas of geographical interest you intend. You can find code information at Wikipedia: List of ISO 3166 country codes or the .
- autocomplete.bindTo("bounds", map); 0 can be used to instruct the const center = { lat: 50.064192, lng: -130.605469 }; // Create a bounding box with sides ~10km away from the center point const defaultBounds = {
```
 north: center.lat + 0.1,  
 south: center.lat - 0.1,  
 east: center.lng + 0.1,  
 west: center.lng - 0.1,  
```
  }; const input = document.getElementById("pac-input"); const options = {
```
 bounds: defaultBounds,  
 componentRestrictions: { country: "us" },  
 fields: ["address_components", "geometry", "icon", "name"],  
 strictBounds: false,  
```
  }; const autocomplete = new google.maps.places.Autocomplete(input, options); 7 widget to retrieve only Place IDs. On calling const southwest = { lat: 5.6108, lng: 136.589326 }; const northeast = { lat: 61.179287, lng: 2.64325 }; const newBounds = new google.maps.LatLngBounds(southwest, northeast); autocomplete.setBounds(newBounds); 2 on the const center = { lat: 50.064192, lng: -130.605469 }; // Create a bounding box with sides ~10km away from the center point const defaultBounds = {
```
 north: center.lat + 0.1,  
 south: center.lat - 0.1,  
 east: center.lng + 0.1,  
 west: center.lng - 0.1,  
```
  }; const input = document.getElementById("pac-input"); const options = {
```
 bounds: defaultBounds,  
 componentRestrictions: { country: "us" },  
 fields: ["address_components", "geometry", "icon", "name"],  
 strictBounds: false,  
```
  }; const autocomplete = new google.maps.places.Autocomplete(input, options); 7 object, the const southwest = { lat: 5.6108, lng: 136.589326 }; const northeast = { lat: 61.179287, lng: 2.64325 }; const newBounds = new google.maps.LatLngBounds(southwest, northeast); autocomplete.setBounds(newBounds); 9 made available will only have the autocomplete.bindTo("bounds", map); 5, const southwest = { lat: 5.6108, lng: 136.589326 }; const northeast = { lat: 61.179287, lng: 2.64325 }; const newBounds = new google.maps.LatLngBounds(southwest, northeast); autocomplete.setBounds(newBounds); 2 and autocomplete.bindTo("bounds", map); 7 properties set. You can use the returned place ID with calls to the Places, Geocoding, Directions or Distance Matrix services.

Constraining Autocomplete predictions

By default, Place Autocomplete presents all place types, biased for predictions near the user's location, and fetches all available data fields for the user's selected place. Set Place Autocomplete options to present more relevant predictions based on your use case.

Set options at construction

The

7 constructor accepts an

const southwest = { lat: 5.6108, lng: 136.589326 }; const northeast = { lat: 61.179287, lng: 2.64325 }; const newBounds = new google.maps.LatLngBounds(southwest, northeast); autocomplete.setBounds(newBounds);

6 parameter to set constraints at widget creation. The following example sets the

const southwest = { lat: 5.6108, lng: 136.589326 }; const northeast = { lat: 61.179287, lng: 2.64325 }; const newBounds = new google.maps.LatLngBounds(southwest, northeast); autocomplete.setBounds(newBounds);

3,

const southwest = { lat: 5.6108, lng: 136.589326 }; const northeast = { lat: 61.179287, lng: 2.64325 }; const newBounds = new google.maps.LatLngBounds(southwest, northeast); autocomplete.setBounds(newBounds);

8, and

const southwest = { lat: 5.6108, lng: 136.589326 }; const northeast = { lat: 61.179287, lng: 2.64325 }; const newBounds = new google.maps.LatLngBounds(southwest, northeast); autocomplete.setBounds(newBounds);

2 options to request

autocomplete.bindTo("bounds", map);

3 type places, favoring those within the specified geographic area and restricting predictions to only places within the United States. Setting the

const southwest = { lat: 5.6108, lng: 136.589326 }; const northeast = { lat: 61.179287, lng: 2.64325 }; const newBounds = new google.maps.LatLngBounds(southwest, northeast); autocomplete.setBounds(newBounds);

7 option specifies what information to return about the user's selected place.

Call

autocomplete.bindTo("bounds", map);

5 to change an option's value for an existing widget.

TypeScript

JavaScript

Specify data fields

Specify data fields to avoid being billed for you don't need. Include the

const southwest = { lat: 5.6108, lng: 136.589326 }; const northeast = { lat: 61.179287, lng: 2.64325 }; const newBounds = new google.maps.LatLngBounds(southwest, northeast); autocomplete.setBounds(newBounds);

7 property in the

const southwest = { lat: 5.6108, lng: 136.589326 }; const northeast = { lat: 61.179287, lng: 2.64325 }; const newBounds = new google.maps.LatLngBounds(southwest, northeast); autocomplete.setBounds(newBounds);

6 that are passed to the widget constructor, as demonstrated in the previous example, or call

autocomplete.bindTo("bounds", map);

8 on an existing

7 object.

autocomplete.setFields(["place_id", "geometry", "name"]);

Define biases and search-area boundaries for Autocomplete

You can bias the autocomplete results to favor an approximate location or area, in the following ways:

Set the bounds on creation of the const center = { lat: 50.064192, lng: -130.605469 }; // Create a bounding box with sides ~10km away from the center point const defaultBounds = { north: center.lat + 0.1, south: center.lat - 0.1, east: center.lng + 0.1, west: center.lng - 0.1, }; const input = document.getElementById("pac-input"); const options = { bounds: defaultBounds, componentRestrictions: { country: "us" }, fields: ["address_components", "geometry", "icon", "name"], strictBounds: false, }; const autocomplete = new google.maps.places.Autocomplete(input, options); 7 object.
Change the bounds on an existing const center = { lat: 50.064192, lng: -130.605469 }; // Create a bounding box with sides ~10km away from the center point const defaultBounds = { north: center.lat + 0.1, south: center.lat - 0.1, east: center.lng + 0.1, west: center.lng - 0.1, }; const input = document.getElementById("pac-input"); const options = { bounds: defaultBounds, componentRestrictions: { country: "us" }, fields: ["address_components", "geometry", "icon", "name"], strictBounds: false, }; const autocomplete = new google.maps.places.Autocomplete(input, options); 7.
Set the bounds to the map's viewport.
Restrict the search to the bounds.
Restrict the search to a specific country.

The previous example demonstrates setting bounds at creation. The following examples demonstrate the other biasing techniques.

Change the bounds of an existing Autocomplete

Call

autocomplete.unbind("bounds"); autocomplete.setBounds({ east: 180, west: -180, north: 90, south: -90 });

2 to change the search area on an existing

7 to rectangular bounds.

TypeScript

const southwest = { lat: 5.6108, lng: 136.589326 }; const northeast = { lat: 61.179287, lng: 2.64325 }; const newBounds = new google.maps.LatLngBounds(southwest, northeast); autocomplete.setBounds(newBounds);

JavaScript

const southwest = { lat: 5.6108, lng: 136.589326 }; const northeast = { lat: 61.179287, lng: 2.64325 }; const newBounds = new google.maps.LatLngBounds(southwest, northeast); autocomplete.setBounds(newBounds);

Set the bounds to the map's viewport

Use

autocomplete.unbind("bounds"); autocomplete.setBounds({ east: 180, west: -180, north: 90, south: -90 });

4 to bias the results to the map's viewport, even while that viewport changes.

TypeScript

autocomplete.bindTo("bounds", map);

JavaScript

autocomplete.bindTo("bounds", map);

Use

autocomplete.unbind("bounds"); autocomplete.setBounds({ east: 180, west: -180, north: 90, south: -90 });

5 to unbind the Autocomplete predictions from the map's viewport.

TypeScript

autocomplete.unbind("bounds"); autocomplete.setBounds({ east: 180, west: -180, north: 90, south: -90 });

JavaScript

autocomplete.unbind("bounds"); autocomplete.setBounds({ east: 180, west: -180, north: 90, south: -90 });

View example

Restrict the search to the current bounds

Set the

const southwest = { lat: 5.6108, lng: 136.589326 }; const northeast = { lat: 61.179287, lng: 2.64325 }; const newBounds = new google.maps.LatLngBounds(southwest, northeast); autocomplete.setBounds(newBounds);

5 option to restrict the results to the current bounds, whether based on map viewport or rectangular bounds.

0

Restrict predictions to a specific country

Use the

const southwest = { lat: 5.6108, lng: 136.589326 }; const northeast = { lat: 61.179287, lng: 2.64325 }; const newBounds = new google.maps.LatLngBounds(southwest, northeast); autocomplete.setBounds(newBounds);

8 option or call

autocomplete.unbind("bounds"); autocomplete.setBounds({ east: 180, west: -180, north: 90, south: -90 });

8 to restrict the autocomplete search to a specific set of up to five countries.

TypeScript

1

JavaScript

2

View example

Constrain place types

Use the

const southwest = { lat: 5.6108, lng: 136.589326 }; const northeast = { lat: 61.179287, lng: 2.64325 }; const newBounds = new google.maps.LatLngBounds(southwest, northeast); autocomplete.setBounds(newBounds);

2 option or call

autocomplete.unbind("bounds"); autocomplete.setBounds({ east: 180, west: -180, north: 90, south: -90 });

0 to constrain predictions to certain place types. This constraint specifies a type or a type collection, as listed in Place Types. If no constraint is specified, all types are returned.

For the value of the

const southwest = { lat: 5.6108, lng: 136.589326 }; const northeast = { lat: 61.179287, lng: 2.64325 }; const newBounds = new google.maps.LatLngBounds(southwest, northeast); autocomplete.setBounds(newBounds);

2 option or the value passed to

autocomplete.unbind("bounds"); autocomplete.setBounds({ east: 180, west: -180, north: 90, south: -90 });

0, you can specify either:

An array containing up to five values from or from Place Types. For example: const center = { lat: 50.064192, lng: -130.605469 }; // Create a bounding box with sides ~10km away from the center point const defaultBounds = { north: center.lat + 0.1, south: center.lat - 0.1, east: center.lng + 0.1, west: center.lng - 0.1, }; const input = document.getElementById("pac-input") as HTMLInputElement; const options = { bounds: defaultBounds, componentRestrictions: { country: "us" }, fields: ["address_components", "geometry", "icon", "name"], strictBounds: false, }; const autocomplete = new google.maps.places.Autocomplete(input, options); 3 Or: const center = { lat: 50.064192, lng: -130.605469 }; // Create a bounding box with sides ~10km away from the center point const defaultBounds = { north: center.lat + 0.1, south: center.lat - 0.1, east: center.lng + 0.1, west: center.lng - 0.1, }; const input = document.getElementById("pac-input") as HTMLInputElement; const options = { bounds: defaultBounds, componentRestrictions: { country: "us" }, fields: ["address_components", "geometry", "icon", "name"], strictBounds: false, }; const autocomplete = new google.maps.places.Autocomplete(input, options); 4
Any one filter in from Place Types. You can only specify a single value from Table 3.

The request will be rejected if:

You specify more than five types.
You specify any unrecognized types.
You mix any types from or with any filter from .

The Places Autocomplete demo demonstrates the differences in predictions between different place types.

Visit demo

Getting place information

When a user selects a place from the predictions attached to the autocomplete text field, the service fires a

autocomplete.unbind("bounds"); autocomplete.setBounds({ east: 180, west: -180, north: 90, south: -90 });

3 event. To get place details:

Create an event handler for the autocomplete.unbind("bounds"); autocomplete.setBounds({ east: 180, west: -180, north: 90, south: -90 }); 3 event, and call on the const center = { lat: 50.064192, lng: -130.605469 }; // Create a bounding box with sides ~10km away from the center point const defaultBounds = { north: center.lat + 0.1, south: center.lat - 0.1, east: center.lng + 0.1, west: center.lng - 0.1, }; const input = document.getElementById("pac-input"); const options = { bounds: defaultBounds, componentRestrictions: { country: "us" }, fields: ["address_components", "geometry", "icon", "name"], strictBounds: false, }; const autocomplete = new google.maps.places.Autocomplete(input, options); 7 object to add the handler.
Call on the const center = { lat: 50.064192, lng: -130.605469 }; // Create a bounding box with sides ~10km away from the center point const defaultBounds = { north: center.lat + 0.1, south: center.lat - 0.1, east: center.lng + 0.1, west: center.lng - 0.1, }; const input = document.getElementById("pac-input"); const options = { bounds: defaultBounds, componentRestrictions: { country: "us" }, fields: ["address_components", "geometry", "icon", "name"], strictBounds: false, }; const autocomplete = new google.maps.places.Autocomplete(input, options); 7 object, to retrieve a object, which you can then use to get more information about the selected place.

By default, when a user selects a place, autocomplete returns all of the available data fields for the selected place, and you will be . Use to specify which place data fields to return. Read more about the object, including a list of place data fields that you can request. To avoid paying for data that you don't need, be sure to use

00 to specify only the place data that you will use.

The

autocomplete.bindTo("bounds", map);

7 property contains the

04 from Places Autocomplete predictions. You can read more about the

04 in the .

For address forms, it is useful to get the address in structured format. To return the structured address for the selected place, call and specify the

07 field.

The following example uses autocomplete to fill the fields in an address form.

TypeScript

5

JavaScript

6

View example

Customizing placeholder text

By default, the text field created by the autocomplete service contains standard placeholder text. To modify the text, set the

08 attribute on the

const southwest = { lat: 5.6108, lng: 136.589326 }; const northeast = { lat: 61.179287, lng: 2.64325 }; const newBounds = new google.maps.LatLngBounds(southwest, northeast); autocomplete.setBounds(newBounds);

4 element:

7

Note: The default placeholder text is localized automatically. If you specify your own placeholder value, you must handle the localization of that value in your application. For information on how the Google Maps JavaScript API chooses the language to use, please read the documentation on localization.

See to customize the widget appearance.

The allows users to perform a text-based geographic search, such as 'pizza in New York' or 'shoe stores near robson street'. You can attach the

8 to a text field and, as text is entered, the service will return predictions in the form of a drop-down pick list.

8 supplies an extended list of predictions, which can include places (as defined by the Places API) plus suggested search terms. For example, if the user enters 'pizza in new', the pick list may include the phrase 'pizza in New York, NY' as well as the names of various pizza outlets. When a user selects a place from the list, information about that place is returned to the SearchBox object, and can be retrieved by your application.

The

8 constructor takes two arguments:

An HTML const southwest = { lat: 5.6108, lng: 136.589326 }; const northeast = { lat: 61.179287, lng: 2.64325 }; const newBounds = new google.maps.LatLngBounds(southwest, northeast); autocomplete.setBounds(newBounds); 4 element of type const southwest = { lat: 5.6108, lng: 136.589326 }; const northeast = { lat: 61.179287, lng: 2.64325 }; const newBounds = new google.maps.LatLngBounds(southwest, northeast); autocomplete.setBounds(newBounds); 5. This is the input field that the const center = { lat: 50.064192, lng: -130.605469 }; // Create a bounding box with sides ~10km away from the center point const defaultBounds = { north: center.lat + 0.1, south: center.lat - 0.1, east: center.lng + 0.1, west: center.lng - 0.1, }; const input = document.getElementById("pac-input"); const options = { bounds: defaultBounds, componentRestrictions: { country: "us" }, fields: ["address_components", "geometry", "icon", "name"], strictBounds: false, }; const autocomplete = new google.maps.places.Autocomplete(input, options); 8 service will monitor and attach its results to.
An const center = { lat: 50.064192, lng: -130.605469 }; // Create a bounding box with sides ~10km away from the center point const defaultBounds = { north: center.lat + 0.1, south: center.lat - 0.1, east: center.lng + 0.1, west: center.lng - 0.1, }; const input = document.getElementById("pac-input") as HTMLInputElement; const options = { bounds: defaultBounds, componentRestrictions: { country: "us" }, fields: ["address_components", "geometry", "icon", "name"], strictBounds: false, }; const autocomplete = new google.maps.places.Autocomplete(input, options); 17 argument, which can contain the const southwest = { lat: 5.6108, lng: 136.589326 }; const northeast = { lat: 61.179287, lng: 2.64325 }; const newBounds = new google.maps.LatLngBounds(southwest, northeast); autocomplete.setBounds(newBounds); 3 property: const southwest = { lat: 5.6108, lng: 136.589326 }; const northeast = { lat: 61.179287, lng: 2.64325 }; const newBounds = new google.maps.LatLngBounds(southwest, northeast); autocomplete.setBounds(newBounds); 3 is a const southwest = { lat: 5.6108, lng: 136.589326 }; const northeast = { lat: 61.179287, lng: 2.64325 }; const newBounds = new google.maps.LatLngBounds(southwest, northeast); autocomplete.setBounds(newBounds); 4 object specifying the area in which to search for places. The results are biased towards, but not restricted to, places contained within these bounds.

The following code uses the bounds parameter to bias the results towards places within a particular geographic area, specified via laitude/longitude coordinates.

8

To change the search area for an existing

8, call

autocomplete.unbind("bounds"); autocomplete.setBounds({ east: 180, west: -180, north: 90, south: -90 });

2 on the

8 object and pass the relevant

autocomplete.setFields(["place_id", "geometry", "name"]);

6 object.

View example

Getting place information

When the user selects an item from the predictions attached to the search box, the service fires a

25 event. You can call

26 on the

8 object, to retrieve an array containing several predictions, each of which is a

const southwest = { lat: 5.6108, lng: 136.589326 }; const northeast = { lat: 61.179287, lng: 2.64325 }; const newBounds = new google.maps.LatLngBounds(southwest, northeast); autocomplete.setBounds(newBounds);

9 object.

For more information about the

const southwest = { lat: 5.6108, lng: 136.589326 }; const northeast = { lat: 61.179287, lng: 2.64325 }; const newBounds = new google.maps.LatLngBounds(southwest, northeast); autocomplete.setBounds(newBounds);

9 object, refer to the documentation on .

TypeScript

9

JavaScript

0

View example

See to customize the widget appearance.

Programmatically retrieving Place Autocomplete Service predictions

To retrieve predictions programmatically, use the class.

9 does not add any UI controls. Instead, it returns an array of prediction objects, each containing the text of the prediction, reference information, and details of how the result matches the user input. This is useful if you want more control over the user interface than is offered by the

7 and

8 described above.

9 exposes the following methods:

autocomplete.setFields(["place_id", "geometry", "name"]); 8 returns place predictions. Note: A 'place' can be an establishment, geographic location, or prominent point of interest, as defined by the Places API.
autocomplete.setFields(["place_id", "geometry", "name"]); 9 returns an extended list of predictions, which can include places (as defined by the Places API) plus suggested search terms. For example, if the user enters 'pizza in new', the pick list may include the phrase 'pizza in New York, NY' as well as the names of various pizza outlets.

Both of the above methods return an array of of the following form:

const center = { lat: 50.064192, lng: -130.605469 }; // Create a bounding box with sides ~10km away from the center point const defaultBounds = { north: center.lat + 0.1, south: center.lat - 0.1, east: center.lng + 0.1, west: center.lng - 0.1, }; const input = document.getElementById("pac-input") as HTMLInputElement; const options = { bounds: defaultBounds, componentRestrictions: { country: "us" }, fields: ["address_components", "geometry", "icon", "name"], strictBounds: false, }; const autocomplete = new google.maps.places.Autocomplete(input, options); 04 is the matched prediction.
const center = { lat: 50.064192, lng: -130.605469 }; // Create a bounding box with sides ~10km away from the center point const defaultBounds = { north: center.lat + 0.1, south: center.lat - 0.1, east: center.lng + 0.1, west: center.lng - 0.1, }; const input = document.getElementById("pac-input") as HTMLInputElement; const options = { bounds: defaultBounds, componentRestrictions: { country: "us" }, fields: ["address_components", "geometry", "icon", "name"], strictBounds: false, }; const autocomplete = new google.maps.places.Autocomplete(input, options); 38 is the distance in meters of the place from the specified const center = { lat: 50.064192, lng: -130.605469 }; // Create a bounding box with sides ~10km away from the center point const defaultBounds = { north: center.lat + 0.1, south: center.lat - 0.1, east: center.lng + 0.1, west: center.lng - 0.1, }; const input = document.getElementById("pac-input") as HTMLInputElement; const options = { bounds: defaultBounds, componentRestrictions: { country: "us" }, fields: ["address_components", "geometry", "icon", "name"], strictBounds: false, }; const autocomplete = new google.maps.places.Autocomplete(input, options); 39.
const center = { lat: 50.064192, lng: -130.605469 };
// Create a bounding box with sides ~10km away from the center point const defaultBounds = { north: center.lat + 0.1, south: center.lat - 0.1, east: center.lng + 0.1, west: center.lng - 0.1, }; const input = document.getElementById("pac-input") as HTMLInputElement; const options = { bounds: defaultBounds, componentRestrictions: { country: "us" }, fields: ["address_components", "geometry", "icon", "name"], strictBounds: false, }; const autocomplete = new google.maps.places.Autocomplete(input, options); 40 contains a set of substrings in the description that match elements in the user's input. This is useful for highlighting those substrings in your application. In many cases, the query will appear as a substring of the description field.
- const center = { lat: 50.064192, lng: -130.605469 }; // Create a bounding box with sides ~10km away from the center point const defaultBounds = {
```
 north: center.lat + 0.1,  
 south: center.lat - 0.1,  
 east: center.lng + 0.1,  
 west: center.lng - 0.1,  
```
  }; const input = document.getElementById("pac-input") as HTMLInputElement; const options = {
```
 bounds: defaultBounds,  
 componentRestrictions: { country: "us" },  
 fields: ["address_components", "geometry", "icon", "name"],  
 strictBounds: false,  
```
  }; const autocomplete = new google.maps.places.Autocomplete(input, options); 41 is the length of the substring.
- const center = { lat: 50.064192, lng: -130.605469 }; // Create a bounding box with sides ~10km away from the center point const defaultBounds = {
```
 north: center.lat + 0.1,  
 south: center.lat - 0.1,  
 east: center.lng + 0.1,  
 west: center.lng - 0.1,  
```
  }; const input = document.getElementById("pac-input") as HTMLInputElement; const options = {
```
 bounds: defaultBounds,  
 componentRestrictions: { country: "us" },  
 fields: ["address_components", "geometry", "icon", "name"],  
 strictBounds: false,  
```
  }; const autocomplete = new google.maps.places.Autocomplete(input, options); 42 is the character offset, measured from the beginning of the description string, at which the matched substring appears.
const center = { lat: 50.064192, lng: -130.605469 }; // Create a bounding box with sides ~10km away from the center point const defaultBounds = { north: center.lat + 0.1, south: center.lat - 0.1, east: center.lng + 0.1, west: center.lng - 0.1, }; const input = document.getElementById("pac-input") as HTMLInputElement; const options = { bounds: defaultBounds, componentRestrictions: { country: "us" }, fields: ["address_components", "geometry", "icon", "name"], strictBounds: false, }; const autocomplete = new google.maps.places.Autocomplete(input, options); 43 is a textual identifier that uniquely identifies a place. To retrieve information about the place, pass this identifier in the const center = { lat: 50.064192, lng: -130.605469 }; // Create a bounding box with sides ~10km away from the center point const defaultBounds = { north: center.lat + 0.1, south: center.lat - 0.1, east: center.lng + 0.1, west: center.lng - 0.1, }; const input = document.getElementById("pac-input") as HTMLInputElement; const options = { bounds: defaultBounds, componentRestrictions: { country: "us" }, fields: ["address_components", "geometry", "icon", "name"], strictBounds: false, }; const autocomplete = new google.maps.places.Autocomplete(input, options); 44 field of a . Learn more about how to .
const center = { lat: 50.064192, lng: -130.605469 };
// Create a bounding box with sides ~10km away from the center point const defaultBounds = { north: center.lat + 0.1, south: center.lat - 0.1, east: center.lng + 0.1, west: center.lng - 0.1, }; const input = document.getElementById("pac-input") as HTMLInputElement; const options = { bounds: defaultBounds, componentRestrictions: { country: "us" }, fields: ["address_components", "geometry", "icon", "name"], strictBounds: false, }; const autocomplete = new google.maps.places.Autocomplete(input, options); 45 is an array containing elements of the query. For a place, each element will typically make up a portion of the address.
- const center = { lat: 50.064192, lng: -130.605469 }; // Create a bounding box with sides ~10km away from the center point const defaultBounds = {
```
 north: center.lat + 0.1,  
 south: center.lat - 0.1,  
 east: center.lng + 0.1,  
 west: center.lng - 0.1,  
```
  }; const input = document.getElementById("pac-input") as HTMLInputElement; const options = {
```
 bounds: defaultBounds,  
 componentRestrictions: { country: "us" },  
 fields: ["address_components", "geometry", "icon", "name"],  
 strictBounds: false,  
```
  }; const autocomplete = new google.maps.places.Autocomplete(input, options); 42 is the character offset, measured from the beginning of the description string, at which the matched substring appears.
- const center = { lat: 50.064192, lng: -130.605469 }; // Create a bounding box with sides ~10km away from the center point const defaultBounds = {
```
 north: center.lat + 0.1,  
 south: center.lat - 0.1,  
 east: center.lng + 0.1,  
 west: center.lng - 0.1,  
```
  }; const input = document.getElementById("pac-input") as HTMLInputElement; const options = {
```
 bounds: defaultBounds,  
 componentRestrictions: { country: "us" },  
 fields: ["address_components", "geometry", "icon", "name"],  
 strictBounds: false,  
```
  }; const autocomplete = new google.maps.places.Autocomplete(input, options); 47 is the matching term.

The example below executes a query prediction request for the phrase 'pizza near' and displays the result in a list.

TypeScript

1

JavaScript

2

CSS

3

HTML

4

Try Sample

View example

Session tokens

can use session tokens (if implemented) to group together autocomplete requests for billing purposes. Session tokens group the query and selection phases of a user autocomplete search into a discrete session for billing purposes. The session begins when the user starts typing a query, and concludes when they select a place. Each session can have multiple queries, followed by one place selection. Once a session has concluded, the token is no longer valid. Your app must generate a fresh token for each session. We recommend using session tokens for all autocomplete sessions. If the

49 parameter is omitted, or if you reuse a session token, the session is charged as if no session token was provided (each request is billed separately).

You can use the same session token to make a single request on the place that results from a call to

48. In this case, the autocomplete request is combined with the Place Details request, and the call is charged as a regular Place Details request. There is no charge for the autocomplete request.

Be sure to pass a unique session token for each new session. Using the same token for more than one Autocomplete session will invalidate those Autocomplete sessions, and all Autocomplete request in the invalid sessions will be charged individually using . Read more about session tokens.

The following example shows creating a session token, then passing it in an

9 (the

52 function has been omitted for brevity):

5

Be sure to pass a unique session token for each new session. Using the same token for more than one session will result in each request being billed individually.

Use the Place Picker component

Note: This sample uses an open source library. See the README for support and feedback related to the library.

Try web components. Use the to enable text input that allows end users to search for a specific address or place using autocomplete.

![GIF with search box. User starts to type an address as input and a dropdown with related

  addresses appears. User clicks an address from the dropdown and the search box fills
  in the rest of the address.](https://developers.google.com/static/maps/documentation/javascript/images/place-picker.gif) Figure 1: Text input to search for a specific address or place using autocomplete

Place Autocomplete optimization

This section describes best practices to help you make the most of the Place Autocomplete service.

Here are some general guidelines:

The quickest way to develop a working user interface is to use the Maps JavaScript API , Places SDK for Android , or Places SDK for iOS
Develop an understanding of essential Place Autocomplete data fields from the start.
Location biasing and location restriction fields are optional but can have a significant impact on autocomplete performance.
Use error handling to make sure your app degrades gracefully if the API returns an error.
Make sure your app handles when there is no selection and offers users a way to continue.

Cost optimization best practices

Basic cost optimization

To optimize the cost of using the Place Autocomplete service, use field masks in Place Details and Place Autocomplete widgets to return only the place data fields you need.

Advanced cost optimization

Consider programmatic implementation of Place Autocomplete in order to access and request about the selected place instead of Place Details. Per Request pricing paired with Geocoding API is more cost-effective than Per Session (session-based) pricing if both of the following conditions are met:

If you only need the latitude/longitude or address of the user's selected place, the Geocoding API delivers this information for less than a Place Details call.
If users select an autocomplete prediction within an average of four Autocomplete predictions requests or fewer, Per Request pricing may be more cost-effective than Per Session pricing.

For help selecting the Place Autocomplete implementation that fits your needs, select the tab that corresponds to your answer to the following question.

Does your application require any information other than the address and latitude/longitude of the selected prediction?

Yes, needs more details

Use session-based Place Autocomplete with Place Details. Since your application requires Place Details such as the place name, business status, or opening hours, your implementation of Place Autocomplete should use a session token ( or built into the , , or widgets) for a total cost of $0.017 plus applicable depending on which place data fields you request.

Widget implementation Session management is automatically built into the , , or widgets. This includes both the Place Autocomplete requests and the Place Details request on the selected prediction. Be sure to specify the

const southwest = { lat: 5.6108, lng: 136.589326 }; const northeast = { lat: 61.179287, lng: 2.64325 }; const newBounds = new google.maps.LatLngBounds(southwest, northeast); autocomplete.setBounds(newBounds);

7 parameter in order to ensure you are only requesting the place data fields you need.

Programmatic implementation Use a with your Place Autocomplete requests. When requesting Place Details about the selected prediction, include the following parameters:

The place ID from
The session token used in the Place Autocomplete request
The const southwest = { lat: 5.6108, lng: 136.589326 }; const northeast = { lat: 61.179287, lng: 2.64325 }; const newBounds = new google.maps.LatLngBounds(southwest, northeast); autocomplete.setBounds(newBounds); 7 parameter specifying the place data fields you need

No, needs only address and location

Geocoding API could be a more cost-effective option than Place Details for your application, depending on the performance of your Place Autocomplete usage. Every application's Autocomplete efficiency varies depending on what users are entering, where the application is being used, and whether have been implemented.

In order to answer the following question, analyze how many characters a user types on average before selecting a Place Autocomplete prediction in your application.

Do your users select a Place Autocomplete prediction in four or fewer requests, on average?

Yes

Implement Place Autocomplete programmatically without session tokens and call Geocoding API on the selected place prediction. Geocoding API delivers addresses and latitude/longitude coordinates for $0.005 per request. Making four requests costs $0.01132 so the total cost of four requests plus a call about the selected place prediction would be $0.01632 which is less than the Per Session Autocomplete price of $0.017 per session.

Consider employing to help your users get the prediction they're looking for in even fewer characters.

No

Use session-based Place Autocomplete with Place Details. Since the average number of requests you expect to make before a user selects a Place Autocomplete prediction exceeds the cost of Per Session pricing, your implementation of Place Autocomplete should use a session token for both the Place Autocomplete requests and the associated Place Details request for a total cost of $0.017 .

Widget implementation Session management is automatically built into the , , or widgets. This includes both the Place Autocomplete requests and the Place Details request on the selected prediction. Be sure to specify the

const southwest = { lat: 5.6108, lng: 136.589326 }; const northeast = { lat: 61.179287, lng: 2.64325 }; const newBounds = new google.maps.LatLngBounds(southwest, northeast); autocomplete.setBounds(newBounds);

7 parameter in order to ensure you are only requesting fields.

Programmatic implementation Use a with your Place Autocomplete requests. When requesting Place Details about the selected prediction, include the following parameters:

The place ID from
The session token used in the Place Autocomplete request
The const southwest = { lat: 5.6108, lng: 136.589326 }; const northeast = { lat: 61.179287, lng: 2.64325 }; const newBounds = new google.maps.LatLngBounds(southwest, northeast); autocomplete.setBounds(newBounds); 7 parameter specifying fields such as address and geometry

Consider delaying Place Autocomplete requests You can employ strategies such as delaying a Place Autocomplete request until the user has typed in the first three or four characters so that your application makes fewer requests. For example, making Place Autocomplete requests for each character after the user has typed the third character means that if the user types seven characters then selects a prediction for which you make one Geocoding API request, the total cost would be $0.01632 (4 * $0.00283 Autocomplete Per Request + $0.005 Geocoding).

If delaying requests can get your average programmatic request below four, you can follow the guidance for implementation. Note that delaying requests can be perceived as latency by the user who might be expecting to see predictions with every new keystroke.

Consider employing to help your users get the prediction they're looking for in fewer characters.

Performance best practices

The following guidelines describe ways to optimize Place Autocomplete performance:

Add country restrictions, , and (for programmatic implementations) language preference to your Place Autocomplete implementation. Language preference is not needed with widgets since they pick language preferences from the user's browser or mobile device.
If Place Autocomplete is accompanied by a map, you can bias location by map viewport.
In situations when a user does not choose one of the Autocomplete predictions, generally because none of those predictions are the desired result-address, you can re-use the original user input to attempt to get more relevant results:
- If you expect the user to enter only address information, re-use the original user input in a call to the Geocoding API.
- If you expect the user to enter queries for a specific place by name or address, use a . If results are only expected in a specific region, use . Other scenarios when it's best to fall back to the Geocoding API include:
- Users inputting subpremise addresses in countries where Place Autocomplete support of subpremise addresses is incomplete, e.g. Czechia, Estonia and Lithuania. For example, the Czech address "Stroupežnického 3191/17, Praha" yields a partial prediction in Place Autocomplete.
- Users inputting addresses with road-segment prefixes like "23-30 29th St, Queens" in New York City or "47-380 Kamehameha Hwy, Kaneohe" on the island of Kauai in Hawai'i.

Usage limits and policies

Quotas

For quota and pricing information, see the Usage and Billing documentation for the Places API.

Policies

Use of the Places Library, Maps JavaScript API must be in accordance with the policies described for the Places API.

mẹo hay Top List Top

Top location document getelementsbyname return 0 value javascript void 0 năm 2024

Introduction

Getting started

Loading the library

Summary of classes

Adding an Autocomplete widget

Constraining Autocomplete predictions

Set options at construction

TypeScript

JavaScript

Specify data fields

Define biases and search-area boundaries for Autocomplete

Change the bounds of an existing Autocomplete

TypeScript

JavaScript

Set the bounds to the map's viewport

TypeScript

JavaScript

TypeScript

JavaScript

Restrict the search to the current bounds

Restrict predictions to a specific country

TypeScript

JavaScript

Constrain place types

Getting place information

TypeScript

JavaScript

Customizing placeholder text

Adding a SearchBox widget

Changing the search area for SearchBox

Getting place information

TypeScript

JavaScript

Programmatically retrieving Place Autocomplete Service predictions

TypeScript

JavaScript

CSS

HTML

Try Sample

Session tokens

Styling the Autocomplete and SearchBox widgets

Use the Place Picker component

Place Autocomplete optimization

Cost optimization best practices

Basic cost optimization

Advanced cost optimization

Yes, needs more details

No, needs only address and location

Yes

No

Performance best practices

Usage limits and policies

Quotas

Policies

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội