Integrating Google Places Picker Widget

Suggest Edits

The Google Places Picker widget allows users to enter a location and get redirected to the Newo.ai Agent Creator. This allows businesses to integrate the Agent Creator on their website with their branding. Here's an example of the Google Places Picker widget on the Newo.ai website:

To integrate the Google Places Picker widget using "@googlemaps/extended-component-library," follow these steps.

Set up the Google Maps API by first creating a Google Cloud Platform project:
1. Go to the Google Cloud Console.
2. Create a new project or select an existing one.
3. Navigate to "API & Services" and then the "Library" section.
4. Enable the "Maps JavaScript API" and "Places API" for your project.
5. Obtain an API Key by going to "API & Services" and then the "Credentials" section. Click Create Credentials and API Key. It is recommended that your API key be restricted to avoid unauthorized usage.
Add the "@googlemaps/extended-component-library" to the of your HTML site:

<script type="module" src="https://unpkg.com/@googlemaps/extended-component-library"></script>

Place an API Loader element in the root of your app's HTML, specifying your API Key:

<gmpx-api-loader key="YOUR_GOOGLE_API_KEY"></gmpx-api-loader>

Place the PlacePicker component below the API loader to allow users to select a location:

<gmpx-place-picker placeholder="Enter a place"></gmpx-place-picker>

Style the Picker by adding CSS components and adjusting the values. For example:

.wrapper {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}
.input {
    flex: 1;
}
.link {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem 2rem;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 0.25em;
}

Here is a full example of how the Google Places Picket widget is implemented on a website and redirected to the Newo.ai Agent Creator:

<html lang="en">
<head>
 <title>Places API example</title>
 <script type="module" src="https://unpkg.com/@googlemaps/extended-component-library"></script>
 <style>
   .wrapper {
     display: flex;
     align-items: stretch;
     gap: 0.5rem
   }
   .input {
     flex: 1;
   }
   .link {
     display: inline-flex;
     justify-content: center;
     align-items: center;
     padding: 0.5rem 2rem;
     background-color: #007bff;
     color: white;
     text-decoration: none;
     border-radius: 0.25em;
   }
 </style>
</head>
<body>
<gmpx-api-loader key="GOOGLE_API_KEY"></gmpx-api-loader>
<div class="wrapper">
 <gmpx-place-picker placeholder="Enter a place" id="place-picker" class="input"></gmpx-place-picker>
 <a class="link" href="" id="link">Go To Creator</a>
</div>
<script>
 const picker = document.getElementById('place-picker');
 const link = document.getElementById('link');
 link.addEventListener('click', (event) => {
   if (!picker.value) {
     event.preventDefault();
     return false;
   }
   link.href = `https://agent.newo.ai/creator?google_map_url=${picker.value.googleMapsURI}`;
 });
</script>
</body>
</html>

Updated 3 months ago