You can use the Geocoding API, or Places API, in the Maps JavaScript API to search for regions, and get more information about places returned by the region lookup service. 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.
Add Geocoding and Places to your Maps JavaScript API apps in the following ways:
- Geocoding service and Geocoder class can geocode and reverse geocode dynamically from user input.
- Geocoding API lets you geocode static, known addresses.
- Places Library, Maps JavaScript API, enables your app to search for places, and includes an autocomplete widget.
- Places API returns information about places using HTTP requests.
Use the Geocoding API
The Geocoding API lets you convert addresses into geographic coordinates, and vice-versa. The following uses combine well with Data-driven styling:
- 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()
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)
});
}
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:
// 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)
});
}
This is the equivalent reverse geocoding Web service call:
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:
administrativeAreacountrylocalitypostalCode
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:
// 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:
https://maps.googleapis.com/maps/api/geocode/json?key="YOUR_API_KEY"&latlng=41.864182,-87.676930&result_type=locality
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)"],
};
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 photos.
This example shows using the Places service to make a find place by query request to get the place ID for Washington State:
const request = {
query: 'Washington',
fields: ['place_id'],
};
function findPlaceId() {
placesService
.findPlaceFromQuery(request, function (results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
console.log(results[0]);
}
});
}
This is the equivalent Find Place Web service call:
https://maps.googleapis.com/maps/api/place/findplacefromtext/json?fields=place_id&input=Washington&inputtype=textquery&key=YOUR_API_KEY
The following examples makes a Places service place details request to get
place.geometry.viewport, then calls map.fitBounds() to center the map on the
selected boundary polygon.
const request = {
placeId: placeid,
fields: [
"name",
"formatted_address",
"geometry",
"photos",
"type",
],
};
placesService.getDetails(request, (place, status) => {
if (
status === google.maps.places.PlacesServiceStatus.OK &&
place &&
place.geometry &&
place.geometry.location
) {
// 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: " + formatted_address);
}
}
});