Location Autocomplete Documentation

Overview

The Location Autocomplete feature integrates Google Places API with your WordPress site to provide address autocomplete functionality for pickup and drop-off locations. This feature is particularly useful for transportation and delivery services.

Setup Instructions

1. Generate Google Places API Key

1. Go to Google Cloud Console
2. Create a new project or select an existing one
3. Enable the Places API:
   • Navigate to "APIs & Services" > "Library"
   • Search for "Places API"
   • Click "Enable"
4. Create credentials:
   • Go to "APIs & Services" > "Credentials"
   • Click "Create Credentials" > "API Key"
   • Copy your new API key
5. (Recommended) Restrict the API key:
   • Click on the newly created API key
   • Under "Application restrictions", select "HTTP referrers"
   • Add your website's domain
   • Under "API restrictions", select "Places API"

2. WordPress Configuration

Adding API Key and Settings

1. Log in to your WordPress admin panel
2. Navigate to Appearance > Customize
3. Find "Location Autocomplete Settings" section
4. Configure the following settings:
   • Enter your Google Places API key
   • Select countries for address restriction (defaults to US if none selected)
   • Enable/Disable the location autocomplete feature

3. Implementation in Contact Form 7

Adding Location Fields

Add the following classes to your input fields in Contact Form 7:

<!-- For pickup location -->
<label> Pickup Location
    [text* pickup-location class:pickup-location]
</label>

<!-- For drop-off location -->
<label> Drop Location
    [text* drop-location class:drop-location]
</label>

Important Notes:

• Use pickup-location class for pickup location fields
• Use drop-location class for drop-off location fields
• The autocomplete functionality will automatically initialize for these classes

4. Features and Functionality

Available Features

• Address autocomplete with Google Places API
• Country restriction options
• Automatic latitude and longitude capture
• Support for multiple pickup/drop-off fields
• Dynamic field addition support
• Custom event triggering on location selection

Event Handling

When a location is selected, the following data is available via custom event:

document.addEventListener('locationSelected', function(e) {
    console.log('Selected Address:', e.detail.address);
    console.log('Latitude:', e.detail.lat);
    console.log('Longitude:', e.detail.lng);
    console.log('Place ID:', e.detail.placeId);
});

5. Troubleshooting

Common Issues:

1. Autocomplete not working:
   • Verify API key is correctly entered
   • Check if Places API is enabled in Google Cloud Console
   • Ensure proper class names are used (pickup-location or drop-location)
2. Country restrictions not working:
   • Verify countries are selected in WordPress customizer
   • Check browser console for any errors
3. API key errors:
   • Verify billing is enabled on Google Cloud Console
   • Check API key restrictions
   • Ensure domain is properly added to allowed referrers

Remember to keep y