ECP > Autocomplete for location search

location-search-autocomplete.php

<?php
/**
 * Autocomplete for location search. Work in progress.
 * Requirements: 
 * - Custom Google Maps API key (https://theeventscalendar.com/knowledgebase/setting-up-your-google-maps-api-key/)
 * - Enable the Places API in Google Cloud Console (https://console.cloud.google.com/apis/dashboard)
 * - Setting up API key restrictions is recommended! (https://theeventscalendar.com/knowledgebase/using-google-maps-api-key-restrictions/)
 *   - The Places API restriction should be added to the JavaScript map displays restrictions.
 *
 * IMPORTANT: Using the Google Maps API and the Places API can incur costs!!!
 *
 * Usage: Add the snippet to your functions.php file or with a plugin like Code Snippets.
 *
 * @author Andras Guseo and a kind user.
 * @see    https://developers.google.com/maps/documentation/javascript/place-autocomplete
 * Plugins required: Events Calendar Pro
 * Created: March 6, 2024
 */

/**
 * Load the necessary Google Maps library in the header.
 */
function tec_labs_google_maps_places_library() {
	// Bail if there is no Events Calendar Pro.
	if ( ! class_exists('Tribe__Events__Pro__Main' ) ) {
		return;
	}
	// Bail if using the default API key.
	if ( tribe_is_using_basic_gmaps_api() ) {
		return;
	}

	$base_url = "https://maps.googleapis.com/maps/api/js";
	$params = [
		'key'       => tribe_get_option( 'google_maps_js_api_key' ),
		'loading'   => 'async',
		'libraries' => 'places',
		'callback'  => 'initMap',  // <-- This gives an error in the console.
	];
	$url = add_query_arg( $params, $base_url );
	?>
	<script id="gMaps-places" async
	        src="<?php echo $url; ?>">
	</script>
	<?php
}

add_action( 'wp_head', 'tec_labs_google_maps_places_library' );

/**
 * The script to initialize Autocomplete on the Location search field.
 */
function tec_labs_location_search_autocomplete_script() {
	// Bail if there is no Events Calendar Pro.
	if ( ! class_exists('Tribe__Events__Pro__Main' ) ) {
		return;
	}
	// Bail if using the default API key.
	if ( tribe_is_using_basic_gmaps_api() ) {
		return;
	}
	?>
	<script type="text/javascript">
	// Location input autocomplete
	function initAutocomplete() {

        /** For constraining results check these articles:
         * https://developers.google.com/maps/documentation/javascript/place-autocomplete#constraining-autocomplete
         * https://developers.google.com/maps/documentation/javascript/supported_types
		 */
        const options = {
            //types: ['address'],
            //componentRestrictions: {country: 'HU'}
        };
	  const input = document.getElementById('tribe-events-events-bar-location');
	  if (input) {
		  const autocomplete = new google.maps.places.Autocomplete(input, options);
	  }
	}
	// Call initAutocomplete on page load
	google.maps.event.addDomListener(window, 'load', initAutocomplete);

	// Call initAutocomplete after any AJAX call finishes - doesn't work with Events Calendar
    jQuery(document).on('afterAjaxSuccess.tribeEvents', function () {
        initAutocomplete();
        console.log('autocomplete initialized');
    });
	</script>
	<?php
}
add_action( 'wp_footer', 'tec_labs_location_search_autocomplete_script' );