NO BUG: V2.0 & 1.12.4 Map element not usable if API is in another Element

Bugs
1

Browser: Chrome 110
OS: macOS
URL: Tampa – Blackford Duct Cleaning

I have a fluent form on a page that uses google maps API to autocomplete an address but when I have that form and the map element on the page, they will both break due the the Javascript API being loaded twice and some other console logged errors.

2

Hi there,

We will mark this as “NO BUG” as the same issue might happen on any website or any plugins that using the same way to enqueue Google Maps script.

As a workaround, you can use this snippet to dequeue Bricks Google Maps script since FluentForm will do that. Then you need to have a custom JavaScript to trigger bricksMap() function like below.

Change the 1567 to your page ID.

add_action( 'wp_enqueue_scripts', function() {
	if ( is_page( 1567 ) ) {
		// Deregister the script to prevent it from being loaded
		wp_deregister_script( 'bricks-google-maps' );
	}
}, 999 );

add_action( 'wp_footer', function() {
	if ( is_page( 1567 ) ) {
		// Add custom script to the footer
		echo '<script>
			document.addEventListener("DOMContentLoaded", function() {
				setTimeout(function() {
					bricksMap();
				}, 1000); // Adjust the delay as needed, must be after the fluent map script is loaded
			});
		</script>';
	}
}, 999 );

Regards,
Jenn

3

Thank you that works great! Is there any way to have this put into the docs for the map element? At-least any of the map events we could tie into like bricksMap();

1 Like
4

Thanks,

Updated the document