Select platform: [Android](https://developers.google.com/maps/documentation/android-sdk/dds-boundaries/dds-use-maps-places-apis.md.txt "View this page for the Android platform docs.") [iOS](https://developers.google.com/maps/documentation/ios-sdk/dds-boundaries/dds-use-maps-places-apis.md.txt "View this page for the iOS platform docs.") [JavaScript](https://developers.google.com/maps/documentation/javascript/dds-boundaries/dds-use-maps-places-apis.md.txt "View this page for the JavaScript platform docs.")

<br />

**European Economic Area (EEA) developers**

> [!NOTE]
> If your billing address is in the European Economic Area, effective on 8 July 2025, the [Google Maps Platform EEA Terms of Service](https://cloud.google.com/terms/maps-platform/eea) will apply to your use of the Services. Functionality varies by region. [Learn more](https://developers.google.com/maps/comms/eea/faq.md.txt).

You can use the Places API and the Geocoding API
in the Maps JavaScript API to search for regions, and get more
information about places. The Geocoding API and
Places API are powerful and stable alternatives for obtaining
place IDs. If you're already using place IDs, you can easily reuse those IDs
with data-driven styling for boundaries.

Add Places and Geocoding to your Maps JavaScript API apps in the
following ways:

- [Places Library, Maps JavaScript API](https://developers.google.com/maps/documentation/javascript/place.md.txt), enables your app to search for places, and includes an autocomplete widget.
- [Places API](https://developers.google.com/maps/documentation/places/web-service/overview.md.txt) returns information about places using HTTP requests.
- [Geocoding service](https://developers.google.com/maps/documentation/javascript/geocoding.md.txt) and [Geocoder class](https://developers.google.com/maps/documentation/javascript/reference/geocoder.md.txt) can geocode and reverse geocode dynamically from user input.
- [Geocoding API](https://developers.google.com/maps/documentation/geocoding) lets you geocode static, known addresses.

> [!NOTE]
> **Note:** The [Geocoding API](https://developers.google.com/maps/documentation/geocoding/cloud-setup), [Places API](https://developers.google.com/maps/documentation/places/web-service/cloud-setup), and [Places API (New)](https://developers.google.com/maps/documentation/javascript/place-get-started.md.txt) for Text Search (New) must be enabled and are billed separately from the Maps JavaScript API.

## Use the Places API

### Use Text Search (New) to find a region

You can use [Text Search (New)](https://developers.google.com/maps/documentation/javascript/place-search.md.txt#text-search-preview) to get a
place ID that includes region data by using `includedType` to specify the [type
of region](https://developers.google.com/maps/documentation/places/web-service/text-search#supported-types)
to return. Usage of the Text Search (New) API to
request place IDs only will incur no charge. [Learn
more](https://developers.google.com/maps/billing-and-pricing/sku-details/places#places_text-search-id-only-ess-sku).

This example map demonstrates making a `searchByText` request to get the place
ID for Trinidad, CA, then applying style to the boundary:


<iframe src="https://maps-docs-team.web.app/samples/boundaries-text-search/dist/" allow="fullscreen; fullscreen"></iframe>


### TypeScript

```typescript
async function findBoundary() {
    const request = {
        textQuery: 'Trinidad, CA',
        fields: ['id', 'location'],
        includedType: 'locality',
        locationBias: center,
    };

    const { Place } = await google.maps.importLibrary('places');
    const { places } = await Place.searchByText(request);

    if (places.length) {
        const place = places[0];
        styleBoundary(place.id);
        innerMap.setCenter(place.location!);
    } else {
        console.log('No results');
    }
}

function styleBoundary(placeid: string) {
    // Define a style of transparent purple with opaque stroke.
    const styleFill: google.maps.FeatureStyleOptions = {
        strokeColor: '#810FCB',
        strokeOpacity: 1.0,
        strokeWeight: 3.0,
        fillColor: '#810FCB',
        fillOpacity: 0.5,
    };

    // Define the feature style function.
    featureLayer.style = (params: google.maps.FeatureStyleFunctionOptions) => {
        const placeFeature = params.feature as google.maps.PlaceFeature;
        if (placeFeature.placeId === placeid) {
            return styleFill;
        }
        return null;
    };
}
```

### JavaScript

```javascript
async function findBoundary() {
    const request = {
        textQuery: 'Trinidad, CA',
        fields: ['id', 'location'],
        includedType: 'locality',
        locationBias: center,
    };

    const { Place } = await google.maps.importLibrary('places');
    const { places } = await Place.searchByText(request);

    if (places.length) {
        const place = places[0];
        styleBoundary(place.id);
        innerMap.setCenter(place.location);
    } else {
        console.log('No results');
    }
}

function styleBoundary(placeid) {
    // Define a style of transparent purple with opaque stroke.
    const styleFill = {
        strokeColor: '#810FCB',
        strokeOpacity: 1.0,
        strokeWeight: 3.0,
        fillColor: '#810FCB',
        fillOpacity: 0.5,
    };

    // Define the feature style function.
    featureLayer.style = (params) => {
        const placeFeature = params.feature;
        if (placeFeature.placeId === placeid) {
            return styleFill;
        }
        return null;
    };
}
```

<br />

#### See the complete example source code

### TypeScript

```typescript
let innerMap: google.maps.Map;
let featureLayer: google.maps.FeatureLayer;
let center: google.maps.LatLngLiteral;

async function init() {
    // Load the needed libraries.
    await google.maps.importLibrary('maps');

    center = { lat: 41.059, lng: -124.151 }; // Trinidad, CA

    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map')!;

    // Get the inner map.
    innerMap = mapElement.innerMap;

    // Get the LOCALITY feature layer.
    featureLayer = innerMap.getFeatureLayer('LOCALITY');

    void findBoundary();
}
async function findBoundary() {
    const request = {
        textQuery: 'Trinidad, CA',
        fields: ['id', 'location'],
        includedType: 'locality',
        locationBias: center,
    };

    const { Place } = await google.maps.importLibrary('places');
    const { places } = await Place.searchByText(request);

    if (places.length) {
        const place = places[0];
        styleBoundary(place.id);
        innerMap.setCenter(place.location!);
    } else {
        console.log('No results');
    }
}

function styleBoundary(placeid: string) {
    // Define a style of transparent purple with opaque stroke.
    const styleFill: google.maps.FeatureStyleOptions = {
        strokeColor: '#810FCB',
        strokeOpacity: 1.0,
        strokeWeight: 3.0,
        fillColor: '#810FCB',
        fillOpacity: 0.5,
    };

    // Define the feature style function.
    featureLayer.style = (params: google.maps.FeatureStyleFunctionOptions) => {
        const placeFeature = params.feature as google.maps.PlaceFeature;
        if (placeFeature.placeId === placeid) {
            return styleFill;
        }
        return null;
    };
}
void init();
```

### JavaScript

```javascript
let innerMap;
let featureLayer;
let center;

async function init() {
    // Load the needed libraries.
    await google.maps.importLibrary('maps');

    center = { lat: 41.059, lng: -124.151 }; // Trinidad, CA

    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map');

    // Get the inner map.
    innerMap = mapElement.innerMap;

    // Get the LOCALITY feature layer.
    featureLayer = innerMap.getFeatureLayer('LOCALITY');

    void findBoundary();
}
async function findBoundary() {
    const request = {
        textQuery: 'Trinidad, CA',
        fields: ['id', 'location'],
        includedType: 'locality',
        locationBias: center,
    };

    const { Place } = await google.maps.importLibrary('places');
    const { places } = await Place.searchByText(request);

    if (places.length) {
        const place = places[0];
        styleBoundary(place.id);
        innerMap.setCenter(place.location);
    } else {
        console.log('No results');
    }
}

function styleBoundary(placeid) {
    // Define a style of transparent purple with opaque stroke.
    const styleFill = {
        strokeColor: '#810FCB',
        strokeOpacity: 1.0,
        strokeWeight: 3.0,
        fillColor: '#810FCB',
        fillOpacity: 0.5,
    };

    // Define the feature style function.
    featureLayer.style = (params) => {
        const placeFeature = params.feature;
        if (placeFeature.placeId === placeid) {
            return styleFill;
        }
        return null;
    };
}
void init();
```

> [!NOTE]
> **Note:** During the Preview release, you are limited to making a maximum of 10 queries per second per project. [Learn more](https://developers.google.com/maps/documentation/places/web-service/search-textual#usage-limits).

### Use Places Autocomplete to find regions

The [Place Autocomplete widget](https://developers.google.com/maps/documentation/javascript/place-autocomplete-overview.md.txt)
provides a convenient way to let your users search for regions. To configure
the Place Autocomplete widget to return only regions, set `includedPrimaryTypes`
to `(regions)`, as shown in the following snippet:

```javascript
// Set up the Autocomplete widget to return only region results.
placeAutocomplete = document.querySelector(
    'gmp-place-autocomplete'
) as google.maps.places.PlaceAutocompleteElement;
placeAutocomplete.includedPrimaryTypes = ['(regions)'];
```

### Get place details for a region

The place details data for a region can be quite useful. For example, you can:

- Search for boundary place IDs based on place names.
- Get the viewport for zooming to a boundary.
- Get the feature type for the boundary (for example `locality`).
- Get the formatted address, which resolves to "Place Name, State, Country" in the United States region (for example, "Ottumwa, IA, USA").
- Get other useful data such as user reviews and photos.

The following example function finds the boundary for Trinidad, CA, and centers
the map on the result:

The following example function calls
[`fetchFields()`](https://developers.google.com/maps/documentation/javascript/reference/place.md.txt#Place.fetchFields)
to get place details including
[`place.viewport`](https://developers.google.com/maps/documentation/javascript/reference/place.md.txt#Place.viewport),
then calls
[`map.fitBounds()`](https://developers.google.com/maps/documentation/javascript/reference/map.md.txt#Map.fitBounds)
to center the map on the selected boundary polygon.

```javascript
    async function getPlaceDetails(placeId) {
        // Use place ID to create a new Place instance.
        const place = new google.maps.places.Place({
            id: placeId,
        });

        // Call fetchFields, passing the data fields you want.
        await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'viewport', 'types'] });

        // Zoom to the boundary polygon.
        let viewport = place.viewport;
        map.fitBounds(viewport, 155);

        // Print some place details to the console.
        const types = place.types;
        console.log("Feature type: " + types[0]);
        console.log("Formatted address: " + place.formattedAddress);
    }
```

## Use the Geocoding API

The [Geocoding API](https://developers.google.com/maps/documentation/geocoding) lets you
convert addresses into geographic coordinates, and vice-versa. The following
uses combine well with data-driven styling for boundaries:

- Use Geocoding to get the viewport for a region.
- Apply component filtering to your Geocoding call to get the place IDs for administrative areas 1-4, locality, or postal code.
- Use reverse geocoding to find place IDs by latitude/longitude coordinates, or even return place IDs for all components in a particular location.

### Get the viewport for a region

The Geocoding service can take a place ID and return a viewport, which you
can pass to the [`map.fitBounds()`](https://developers.google.com/maps/documentation/javascript/reference/map.md.txt#Map.fitBounds)
function to zoom to a boundary polygon on the map. The following example shows
using the Geocoding service to get a viewport, then calling `map.fitBounds()`:

```javascript
// Set up the geocoder.
geocoder = new google.maps.Geocoder();

...

// Call Geocoding API and zoom to the resulting bounds.
function zoomToPolygon(placeid) {
    geocoder
        .geocode({ placeId: placeid })
        .then(({ results }) => {
            map.fitBounds(results[0].geometry.viewport, 155);
        })
        .catch((e) => {
            console.log('Geocoder failed due to: ' + e)
        });
}
```

### Use reverse geocoding

Reverse geocoding can be used to find place IDs. The following example Geocoding
service function returns the place IDs for all address components at the
specified latitude/longitude coordinates:

```javascript
// Set up the geocoder.
geocoder = new google.maps.Geocoder();

...

// Call Geocoding API.
function getPlaceIds(latLng) {
    geocoder
        .geocode({ latLng })
        .then(({ results }) => {
            console.log('Geocoding result:');
            console.log(results[0]);
            console.log(results[0].place_id);
            console.log(results[0].address_components);
        })
        .catch((e) => {
            console.log('Geocoder failed due to: ' + e)
        });
}
```

Here is the equivalent
[reverse geocoding](https://developers.google.com/maps/documentation/geocoding/requests-reverse-geocoding)
Web service call:

````javascript
```html
https://maps.googleapis.com/maps/api/geocode/json?key="YOUR_API_KEY"&latlng=41.864182,-87.676930
```
````

To use reverse geocoding with component filtering to get the address component
for one or more of the following types at the specified location:

- `administrativeArea`
- `country`
- `locality`
- `postalCode`

The next example function shows using the Geocoding service, adding component
restrictions with reverse geocoding to get all of the address components at the
specified location for only the `locality` type:

```javascript
// Set up the geocoder.
geocoder = new google.maps.Geocoder();

...

function getPlaceIdWithRestrictions(latLng) {
    geocoder
        .geocode({ latLng,
            componentRestrictions: {
              country: "US",
              locality: "chicago",
            },
        })
        .then(({ results }) => {
            console.log('Geocoding result with restriction:');
            console.log(results[0]);
            console.log(results[0].place_id);
            console.log(results[0].address_components);
            console.log(results[0].address_components[1].types[0]);
            console.log(results[0].address_components[1].long_name);
        })
        .catch((e) => {
            console.log('getPlaceId Geocoder failed due to: ' + e)
        });
}
```

This is the equivalent [reverse geocoding](https://developers.google.com/maps/documentation/geocoding/requests-reverse-geocoding)
Web service call:

````javascript
```html
    https://maps.googleapis.com/maps/api/geocode/json?key="YOUR_API_KEY"&latlng=41.864182,-87.676930&result_type=locality
```
````