Conflict with Google Maps when using validation Address fields

[justinholtweb]

Describe the bug

When using a Formie form containing address validation (using the Google API) on a Craft entry that ALSO has an embedded Google Map, the Google API throws an error due to two versions of the Google Maps JavaScript API being loaded. Since the Google Maps is a simple embed there is no way to specify for it to NOT load the library. We wanted to see if there was a way to tell Formie to NOT load the Google Maps JavaScript API additionally to prevent the error?

Steps to reproduce

1. Load a Formie form on a Craft entry using address validation through the Google Maps JavaScript API.
2. On the same page load a Google Maps embed.

Form settings

• Multi-page form: Yes or No
• Submission Method: Ajax or Page Reload
• Client-side Validation: Yes or No
• Custom Form Templates: Yes or No

Craft CMS version

Craft version: 4.6.0

Plugin version

Formie version: 2.1.21

Multi-site?

No

Additional context

No response

[engram-design]

Just to confirm, is this using the Google Maps plugin, or just literally adding an embedded (iframe) map from Google. If the latter, I'm not seeing any errors there.

[emmaatcrafted]

Hi, it's the Google Maps Javascript API for the Google Map. This is the error we receive when trying to implement both Formie and the Map: You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors.

[engram-design]

This might be tricky in practice, because we need the places library, and Google Maps plugin doesn't include that.

The Google Maps plugin will load the JS API with the following:

https://maps.googleapis.com/maps/api/js?libraries=geometry,search

While Formie will load:

https://maps.googleapis.com/maps/api/js?libraries=places

I'm not exactly sure how we can combine these two calls, if it all. While we can certainly add handling to see if the Google JS API is already loaded, that's not going to work in this case, because despite it being there, it doesn't include the places API that we actually need.

I suppose in an ideal world, both Google Maps and Formie would have a setting where you can manually load the Google API yourself, but then there's the trick of different settings, different callbacks, etc.