1/**
 2 * Google Maps Places Autocomplete Integration for Elementor Text Input Field
 3 *
 4 * This script enhances an Elementor form by integrating Google Maps Places Autocomplete with a text input field.
 5 * It provides users with address suggestions as they type, improving form usability and accuracy of address input.
 6 *
 7 * Instructions:
 8 * 1. Replace 'YOUR_GOOGLE_MAPS_API_KEY' with your actual Google Maps API key.
 9 * 2. Ensure the $field_id variable matches the ID of your target text input field in the form.
10 * 3. Add this code to your theme's functions.php file.
11 *
12 * Implementation Notes:
13 * - This script is designed for use with <input type="text"> elements, suitable for single-line address inputs.
14 * - The script initializes the Google Maps Places Autocomplete feature on the specified text input field.
15 *
16 * Required Google APIs:
17 * - Google Maps JavaScript API
18 * - Places API
19 * Both APIs need to be enabled in your Google Cloud Console for your API key to function correctly.
20 *
21 * Performance Note:
22 * - The script includes an async attribute for the Google Maps script to improve loading performance.
23 *
24 * Credit:
25 * Developed by Mark Harris
26 * Christchurch Web Solutions
27 * https://www.christchurchwebsolutions.co.uk
28 */
29 
30 
31function add_google_maps_autocomplete_script() {
32    $api_key = 'YOUR_GOOGLE_MAPS_API_KEY'; // Replace with your actual Google Maps API key
33    $field_id = 'FORM_FIELD_ID'; // The ID of your address input field, inspect your page in the front end to get this!
34 
35    ?>
36    <script type="text/javascript">
37        // Ensure the initAutocomplete function is globally accessible
38        window.initAutocomplete = function() {
39            var input = document.getElementById('<?php echo esc_js($field_id); ?>');
40            if (!input) return; // Exit if the input field is not found
41 
42            var autocomplete = new google.maps.places.Autocomplete(input);
43            autocomplete.addListener('place_changed', function() {
44                var place = autocomplete.getPlace();
45                if (!place.address_components) {
46                    console.error('No details available for input: \'' + place.name + '\'');
47                    return;
48                }
49                var address = place.formatted_address;
50                input.value = address; // Populates the input with the selected address
51            });
52        }
53    </script>
54    <script src="https://maps.googleapis.com/maps/api/js?key=<?php echo esc_attr($api_key); ?>&libraries=places&callback=initAutocomplete" async defer></script>
55    <?php
56}
57 
58add_action('wp_footer', 'add_google_maps_autocomplete_script');