Places Autocomplete in JavaScript

The Places Autocomplete service from the Google Maps JavaScript API allows users to search for addresses, place names, or other location-related information. As users type into a search field, the autocomplete feature offers suggestions based on the input, making it easier for users to enter valid addresses or locations.

This service is helpful when creating forms that require location input, such as booking systems, address fields, and location-based applications.

How to Implement Google Places Autocomplete

To use the Google Places Autocomplete service, you need to follow these steps:

1. Get an API Key

First, you need a Google Maps API key. You can obtain one by:

Go to the Google Cloud Console.
Create a new project or use an existing one.
Enable the Places API and Maps JavaScript API for that project.
Obtain an API key from the Google Cloud Console.

2. Include the Google Maps JavaScript API Script

To load the Google Maps JavaScript API with Places Autocomplete, you need to include the script in your HTML:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initAutocomplete" async defer></script>

Make sure to replace YOUR_API_KEY with your actual API key.

The libraries=places parameter loads the Places library, which includes the Places Autocomplete feature.
The callback=initAutocomplete specifies the function to initialize the Places Autocomplete.

3. HTML Markup for Input Field

Create a text input field where users can type their location:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Places Autocomplete Example</title>
</head>
<body>

  <h1>Enter a Place</h1>
  <input id="autocomplete" type="text" placeholder="Start typing a place...">

  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initAutocomplete" async defer></script>
  <script src="app.js"></script>
</body>
</html>

4. JavaScript Code to Initialize Autocomplete

Now, create a JavaScript file (app.js) to initialize the Places Autocomplete functionality:

function initAutocomplete() {
  // Get the input element
  const input = document.getElementById('autocomplete');

  // Create a new Autocomplete object
  const autocomplete = new google.maps.places.Autocomplete(input);

  // Optional: Restrict the autocomplete results to specific countries
  const options = {
    types: ['geocode'], // Restrict to geocoding results (addresses, places)
    componentRestrictions: { country: 'us' }, // Restrict to the US
  };
  
  autocomplete.setOptions(options);

  // Add event listener for when the user selects a place
  autocomplete.addListener('place_changed', function() {
    const place = autocomplete.getPlace();
    console.log('Selected place:', place);

    // Example: Log the formatted address and coordinates
    if (place.geometry) {
      console.log('Address:', place.formatted_address);
      console.log('Latitude:', place.geometry.location.lat());
      console.log('Longitude:', place.geometry.location.lng());
    }
  });
}

5. Explanation of the Code

Initialize Autocomplete:
- const autocomplete = new google.maps.places.Autocomplete(input);
- This creates an Autocomplete object linked to the input element.
Restricting Results:
- You can restrict autocomplete results by specifying the types of places you want and applying component restrictions like country codes.
Listening for Place Changes:
- The place_changed event is triggered when a user selects a place from the autocomplete suggestions.
- The selected place is then retrieved using autocomplete.getPlace().
Accessing Place Information:
- You can access various details about the place, such as place.formatted_address for the full address, and place.geometry.location for the geographical coordinates (latitude and longitude).

Example in Action

When a user starts typing an address or location in the input field, the Google Places Autocomplete service will suggest possible matches. After the user selects a location, the details of the selected place will be displayed in the console.

Customizing Autocomplete Options

Restricting to Specific Place Types: You can restrict the results to certain types of places (like cities, airports, etc.) by specifying the types parameter.

Example:
```
const options = {
  types: ['(cities)'], // Restrict to city names
};
autocomplete.setOptions(options);
```

Geographical Restrictions: You can restrict the search results to a specific region or country using componentRestrictions.

Example:

const options = {
  componentRestrictions: { country: 'us' }, // Only show US locations
};
autocomplete.setOptions(options);

Autocomplete Biasing: You can bias the autocomplete results by providing a geographical area (e.g., center and radius).

Example:

const options = {
  bounds: new google.maps.LatLngBounds(
    new google.maps.LatLng(40.7128, -74.0060), // New York City coordinates
    new google.maps.LatLng(34.0522, -118.2437)  // Los Angeles coordinates
  ),
  strictBounds: false, // Allow results outside the bounds (false by default)
};
autocomplete.setOptions(options);

Handling Errors

In case of issues like invalid API keys or other failures, the API may not load correctly. You can handle these errors by checking the browser's console for error messages.

Example of error handling using the catch method for script loading:

<script>
  function initAutocomplete() {
    try {
      const input = document.getElementById('autocomplete');
      const autocomplete = new google.maps.places.Autocomplete(input);
      autocomplete.addListener('place_changed', function() {
        const place = autocomplete.getPlace();
        console.log(place);
      });
    } catch (error) {
      console.error('Google Maps API Error:', error);
    }
  }
</script>

Conclusion

Using Google Places Autocomplete is a great way to enhance user experience by suggesting locations and addresses as users type. It's easy to implement with the Google Maps JavaScript API, and it offers options for customization, such as restricting results to certain types or locations.

Souy Soeng

Places Autocomplete in JavaScript