Use Geocoding and Places APIs with Data-driven styling

Stay organized with collections Save and categorize content based on your preferences.

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:

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:

  • 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:

// 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);
    }
  }
});