Stay organized with collections Save and categorize content based on your preferences.
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:
You can use Text Search (New) to get a place ID that includes region data by using includedType to specify the type of region to return. Usage of the Text Search (New) API to request place IDs only will incur no charge. Learn more.
This example map demonstrates making a searchByText request to get the place ID for Trinidad, CA, then applying style to the boundary:
async function findBoundary() {
const request = {
query: 'Trinidad, CA',
fields: ['id', 'location'],
includedType: 'locality',
locationBias: center,
};
const { Place } = await google.maps.importLibrary("places") as google.maps.PlacesLibrary;
//@ts-ignore
const { places } = await Place.searchByText(request);
if (places.length) {
const place = places[0];
styleBoundary(place.id);
map.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) => {
if (params.feature.placeId == placeid) {
return styleFill;
}
};
}Note: Read the guide on using TypeScript and Google Maps. JavaScript
async function findBoundary() {
const request = {
query: "Trinidad, CA",
fields: ["id", "location"],
includedType: "locality",
locationBias: center,
};
const { Place } = await google.maps.importLibrary("places");
//@ts-ignore
const { places } = await Place.searchByText(request);
if (places.length) {
const place = places[0];
styleBoundary(place.id);
map.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) => {
if (params.feature.placeId == placeid) {
return styleFill;
}
};
}
See the complete example source code TypeScript
let map;
let featureLayer;
let center;
async function initMap() {
const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
center = {lat: 41.059, lng: -124.151}; // Trinidad, CA
map = new Map(document.getElementById('map') as HTMLElement, {
center: center,
zoom: 15,
// In the cloud console, configure this Map ID with a style that enables the
// "Locality" Data Driven Styling type.
mapId: 'a3efe1c035bad51b', // <YOUR_MAP_ID_HERE>,
});
featureLayer = map.getFeatureLayer('LOCALITY');
findBoundary();
}
async function findBoundary() {
const request = {
query: 'Trinidad, CA',
fields: ['id', 'location'],
includedType: 'locality',
locationBias: center,
};
const { Place } = await google.maps.importLibrary("places") as google.maps.PlacesLibrary;
//@ts-ignore
const { places } = await Place.searchByText(request);
if (places.length) {
const place = places[0];
styleBoundary(place.id);
map.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) => {
if (params.feature.placeId == placeid) {
return styleFill;
}
};
}
initMap();Note: Read the guide on using TypeScript and Google Maps. JavaScript
let map;
let featureLayer;
let center;
async function initMap() {
const { Map } = await google.maps.importLibrary("maps");
center = { lat: 41.059, lng: -124.151 }; // Trinidad, CA
map = new Map(document.getElementById("map"), {
center: center,
zoom: 15,
// In the cloud console, configure this Map ID with a style that enables the
// "Locality" Data Driven Styling type.
mapId: "a3efe1c035bad51b", // <YOUR_MAP_ID_HERE>,
});
featureLayer = map.getFeatureLayer("LOCALITY");
findBoundary();
}
async function findBoundary() {
const request = {
query: "Trinidad, CA",
fields: ["id", "location"],
includedType: "locality",
locationBias: center,
};
const { Place } = await google.maps.importLibrary("places");
//@ts-ignore
const { places } = await Place.searchByText(request);
if (places.length) {
const place = places[0];
styleBoundary(place.id);
map.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) => {
if (params.feature.placeId == placeid) {
return styleFill;
}
};
}
initMap();Note: During the Preview release, you are limited to making a maximum of 10 queries per second per project. Learn more. Use Places Autocomplete to find regions
The Places Autocomplete widget provides a convenient way to let your users search for regions. To configure the Places Autocomplete widget to return only regions, set types to (regions), as shown in the following snippet:
// Set up the Autocomplete widget to return only region results.
const autocompleteOptions = {
fields: ["place_id", "type"],
strictBounds: false,
types: ["(regions)"],
};
The place details data for a region can be quite useful. For example, you can:
locality).The following example function finds the boundary for Trinidad, CA, and centers the map on the result:
The following example function calls fetchFields() to get place details including place.geometry.viewport, then calls map.fitBounds() to center the map on the selected boundary polygon.
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', 'geometry', 'type'] });
// Zoom to the boundary polygon.
let viewport = place.geometry.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);
}
The Geocoding API lets you convert addresses into geographic coordinates, and vice-versa. The following uses combine well with data-driven styling for boundaries:
The Geocoding service can take a place ID and return a viewport, which you can pass to the 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():
// 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)
});
}
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:
// 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 Web service call:
```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:
administrativeAreacountrylocalitypostalCodeThe 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:
// 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 Web service call:
```html
https://maps.googleapis.com/maps/api/geocode/json?key="YOUR_API_KEY"&latlng=41.864182,-87.676930&result_type=locality
```
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2025-07-18 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-07-18 UTC."],[[["Leverage the Places API and Geocoding API to search for regions and retrieve detailed place information for data-driven styling."],["Utilize Text Search (New) in the Places API to efficiently obtain place IDs for regions, incurring no charge for ID-only requests."],["Employ the Places Autocomplete widget to enable users to easily search for regions, streamlining the region selection process."],["Obtain place details such as viewport, feature type, and formatted address using the Places API for enhanced map interactions and data display."],["Use the Geocoding API for reverse geocoding, component filtering, and viewport retrieval to further refine region selection and data-driven styling capabilities."]]],[]]
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4