Use Places APIs and Geocoding with data-driven styling for boundaries

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:

Use the Places API

Use Text Search (Preview) to find a region

You can use Text Search (Preview) 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 (Preview) 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:

TypeScript

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

    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 = /** @type {!google.maps.FeatureStyleOptions} */({
        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;
        }
    };
}
index.ts

JavaScript

async function findBoundary(Place) {
  const request = {
    query: "Trinidad, CA",
    fields: ["id", "location"],
    includedType: "locality",
    locationBias: center,
  };
  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 = /** @type {!google.maps.FeatureStyleOptions} */ ({
    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;
    }
  };
}

index.js

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;
    const { Place } = await google.maps.importLibrary("places") as google.maps.PlacesLibrary;
    const { LatLng } = await google.maps.importLibrary("core") as google.maps.CoreLibrary;

    center = new LatLng(41.059, -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(Place);
}
async function findBoundary(Place) {
    const request = {
        query: 'Trinidad, CA',
        fields: ['id', 'location'],
        includedType: 'locality',
        locationBias: center,
    };

    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 = /** @type {!google.maps.FeatureStyleOptions} */({
        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();
index.ts

JavaScript

let map;
let featureLayer;
let center;

async function initMap() {
  const { Map } = await google.maps.importLibrary("maps");
  const { Place } = await google.maps.importLibrary("places");
  const { LatLng } = await google.maps.importLibrary("core");

  center = new LatLng(41.059, -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(Place);
}

async function findBoundary(Place) {
  const request = {
    query: "Trinidad, CA",
    fields: ["id", "location"],
    includedType: "locality",
    locationBias: center,
  };
  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 = /** @type {!google.maps.FeatureStyleOptions} */ ({
    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();
index.js

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.

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 desired data fields.
        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);
    }

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 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() 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