The booking page should display the distance from point A to point B.

I’ve considered using a map widget with logic to ensure it only appears on the booking page, but I’m seeking guidance on configuring the Google Maps API correctly for this purpose.

I have implemented this snippet to get the address autocomplete to a spesific country. This code works only on an “address” field.

When I use it on a “single line text” field with address autocomplete enabled it wont work. Do you have any suggestions for how I can edit the snippet to make it work on “single line text” field as well?

/**
 * Restrict address autocomplete to a specific country
 *
 * @link https://wpforms.com/developers/how-to-restrict-address-autocomplete-to-a-specific-country/
 */
 
function wpf_dev_geo_autocomplete_default_country( ) {
?>
<script type="text/javascript">
    jQuery(function($){
         
        var formID = 2757; // Change form ID
         
        var addressFieldID = 21; // Change address field ID 
         
        // Find field place by country
        var stateField = window.WPFormsGeolocationGooglePlacesAPI.findFieldPlaceByPolitical($( #wpforms-${formID}-field_${addressFieldID}-state )[0]);
 
            // Put a country code here according to this list: https://en.wikipedia.org/wiki/List_of_ISO_3166_country_codes
 
        // Set default autocomplete country to Canada
        stateField.autocomplete.setComponentRestrictions({
            'country': [ 'ca' ],
        }); 
    });
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_geo_autocomplete_default_country', 30 );

Google – as ever – total nightmare and what I got into looked nothing like the example you kindly put up.

in advance API-Key is correct, but no matter what address we enter, no matter what we test, it always and immediately (without you can see it would work or so) comes the error message (in the admin area) ->

Venue not found

Update your address data above to create a precise map location.

And then, of course, the message “Map not available” also appears in the frontend…

What can we do or where can we run a test to find the error?

Any ideas?

Translated with DeepL.com (free version)

    #qr-banner-square {
        position: absolute;
        left: 5%;
        top: 35%;
        width: 29vw;
        height: 29vw;
    }

        try {
            new QRCode(document.getElementById("qr-banner-square"), {
                text: "<?php echo $myURL; ?>",
                width: 560,
                height: 560
            });
            console.log("QR Code successfully generated.");
        } catch (error) {
            console.error("QR Code generation failed:", error);
        }

                // Generate QR code directly
                var qrCode = new QRCode(document.createElement("div"), {
                    text: "<?php echo $myURL; ?>",
                    width: img.width * 0.3,
                    height: img.width * 0.3
                });
                var qrCodeImg = qrCode._el.children[0]; // Get the QR code image
                ctx.drawImage(qrCodeImg, img.width * 0.05, img.height * 0.34, qrCodeImg.width, qrCodeImg.height);

When I try to enter it into the google tab on

/wp-admin/admin.php?page=trustreviews-settings&trustreviews_tab=google

The plugin says

“Settings saved successfully.” but the box blanks instantly and when I then try to link to google it obviously doesn’t work.

I’ve tried clicking the “intall from scratch” option under advanced.

I’ve tried deactivating and reactivating the plug

I’ve tried removing and and reinstalling the plugin

I’m on WordPress 6.4.3

Thanks

I used a plugin ELEX Address Validation & Google Address Auto Complete Plugin for WooCommerce (Basic)

and could not make the address autofill work.

please let me know