Google Places address autocompletion

Google Places address autocompletion

There is nothing built in to the Quform plugin to do this currently but it can be done with a bit of custom coding. Add a Text element to the form, then add the following code to the WordPress theme functions.php file (or create a plugin for it).

1
23
4
5
6
7
8
910
11
12
13
14
add_action('wp_enqueue_scripts', function () {
    $apiKey = 'YOUR_API_KEY';    
    wp_enqueue_script('google-maps', "https://maps.googleapis.com/maps/api/js?key={$apiKey}&libraries=places&callback=initAutocomplete", array(), false, true);
 
    ob_start();
    ?>
window.initAutocomplete = function () {
    new google.maps.places.Autocomplete(document.querySelector('.quform-field-1_3'), { types: ['geocode'] });};
    <?php
    
    wp_add_inline_script('google-maps', ob_get_clean(), 'before');
});
add_action('wp_enqueue_scripts', function () {
    $apiKey = 'YOUR_API_KEY';
    
    wp_enqueue_script('google-maps', "https://maps.googleapis.com/maps/api/js?key={$apiKey}&libraries=places&callback=initAutocomplete", array(), false, true);

    ob_start();
    ?>
window.initAutocomplete = function () {
    new google.maps.places.Autocomplete(document.querySelector('.quform-field-1_3'), { types: ['geocode'] });
};
    <?php
    
    wp_add_inline_script('google-maps', ob_get_clean(), 'before');
});
1
2
34
5
6
7
8
9
1011
12
13
14
15
16
function my_google_address_autocomplete()
{
    $apiKey = 'YOUR_API_KEY';    
    wp_enqueue_script('google-maps', "https://maps.googleapis.com/maps/api/js?key={$apiKey}&libraries=places&callback=initAutocomplete", array(), false, true);
 
    ob_start();
    ?>
window.initAutocomplete = function () {
    new google.maps.places.Autocomplete(document.querySelector('.quform-field-1_3'), { types: ['geocode'] });};
    <?php
    
    wp_add_inline_script('google-maps', ob_get_clean(), 'before');
}
add_action('wp_enqueue_scripts', 'my_google_address_autocomplete');
function my_google_address_autocomplete()
{
    $apiKey = 'YOUR_API_KEY';
    
    wp_enqueue_script('google-maps', "https://maps.googleapis.com/maps/api/js?key={$apiKey}&libraries=places&callback=initAutocomplete", array(), false, true);

    ob_start();
    ?>
window.initAutocomplete = function () {
    new google.maps.places.Autocomplete(document.querySelector('.quform-field-1_3'), { types: ['geocode'] });
};
    <?php
    
    wp_add_inline_script('google-maps', ob_get_clean(), 'before');
}
add_action('wp_enqueue_scripts', 'my_google_address_autocomplete');
Be inspired. © 2024 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy