Google Maps Script Breaking Dynamic Buttons?

Technical Q&A
,

Topic summary

Issue: Adding a Google Maps section to a Shopify custom theme triggers a console error in Shopify’s payment-sheet (at this.googlePaySDK.payments), which breaks dynamic checkout/add-to-cart buttons sitewide.

Details:

  • Maps JS API loaded either via the new importLibrary loader or the legacy script tag produces the same error, suggesting the problem isn’t specific to the loader.
  • Code is placed in theme.liquid behind an API key check (settings.google_maps_api_key != blank) and follows Google’s official loading snippet.
  • The developer explicitly does not want to use an iframe-based embed.

Artifacts:

  • A screenshot (image) highlights the console error and appears central to understanding the failure point.

Ask:

  • Looking for confirmation from others who have encountered this conflict and potential fixes/workarounds.

Status:

  • No resolution or actionable fix provided yet; discussion remains open with key question unanswered (root cause of conflict between Maps JS and Shopify’s Google Pay/payment-sheet).
Summarized with AI on December 31. AI used: gpt-5.
1

Hi all,

I’m a developer building a custom theme and I’m adding in a “map” section using google maps with a user provided API key. I’m getting an error related to “this.googlePaySDK.payments” line inside the “payment-sheet” asset from shopify itself.

Screenshot 2024-04-12 at 8.29.29 PM.png
Screenshot 2024-04-12 at 8.29.29 PM.png1712×190 41.4 KB

It seems to break the dynamic add to cart buttons throughout the site. I thought it was related to me using the new google maps importLibrary but I get this error when I’m using the legacy script tag as well.

The code in question is located in theme.liquid:

{% if settings.google_maps_api_key != blank %}
      
    {% endif %}

It is copied directly from Google documentation. Has anyone run into this before?

And before suggested: no, I do not want to use an iframe.