Introduction to the PAC Service

The PAC Service makes it incredibly easy to add a powerful "search as you type" address autocomplete feature to your website using the Google Maps Places (New) API . Simply include a single script tag, and the PAC Service handles the autocomplete logic and returns detailed place information to your website. This allows you to focus on building your core application, not wrestling with API integrations.

Getting Started

Get a Google Maps API Key: You'll need your own Google Maps API key with the Places (New) API enabled. Refer to Use API Keys for details. Create or obtain your key from the Google Cloud Console and ensure you restrict its usage to your website's domain(s) for security. This restriction prevents unauthorized use of your Google Maps API key. See the Google Maps documentation on API Key Best Practices for more information.

JavaScript Tag

Add the following script tag to the <head> of your HTML document. Replace YOUR_GOOGLE_MAPS_API_KEY with your Google Maps API key. Set data-target to the ID of the HTML element where you want the autocomplete input field to be rendered.

Add the container element <div id="pac-container"> to your HTML where the autocomplete input field should appear. Ensure the id matches the data-target="pac-container" value in the script tag.

<script type="module" 
async 
defer
crossorigin="anonymous"   
src="https://pacservice.pages.dev/v1/pac.js" 
data-google-maps-key="YOUR_GOOGLE_MAPS_API_KEY"
data-google-maps-version="weekly"
data-type="pac"
data-pac-container="pacService"></script>

Handle Responses

To handle the selected address details, add onPacData callback function in your script. This function will receive the place details object as a parameter.

To handle errors use onPacError callback function. This function will receive the error object as a parameter.

//Use this function to receive response
const onPacData = (placeDetails) => {
	console.log('callback', placeDetails);
};

//Use this function to handle the error response
const onPacError = (error) => {
	console.log('error', error);
};

Example

This example demonstrates how to integrate the Places (New) Autocomplete component into your application and retrieve the details of a selected place.