How can I embed a custom Snazzy Maps map into my Webflow website if the map is not appearing and I am receiving a "Oops! Something went wrong" error message?

TL;DR
  • Generate a valid Google Maps API key in the Google Cloud Console and enable the Maps JavaScript API.  
  • Remove or adjust any API key restrictions to allow your Webflow domain, then embed the updated Snazzy Maps code (with the API key) in Webflow and test on the published site.

You're seeing the "Oops! Something went wrong" error because your embedded Snazzy Maps (Google Maps) integration is encountering issues—typically related to the Google Maps API key or restrictions tied to it.

​

1. Ensure You Have a Valid Google Maps API Key  

  • Go to Google Cloud Console (console.cloud.google.com).  
  • Create or select a project for your site.  
  • Enable the Maps JavaScript API under API & Services > Library.  
  • Generate an API key under APIs & Services > Credentials.  
  • Copy the API key for use in your project.

​

2. Remove or Adjust API Key Restrictions  

  • Under APIs & Services > Credentials, click your key.  
  • If HTTP referrer restrictions are set, make sure they include your Webflow domain, like:
  • yourwebsite.webflow.io
  • www.yourcustomdomain.com/*  
  • Also ensure the key allows access to:
  • Maps JavaScript API
  • Geocoding API (if you're translating addresses)
  • Save your changes after reviewing.

​

3. Add the API Key to Your Embed Code  

  • In the Snazzy Maps embed code, locate the script's src URL (it usually looks like https://maps.googleapis.com/maps/api/js?...)  
  • Ensure it includes your API key as ?key=YOURAPIKEY  
  • Example:  

  https://maps.googleapis.com/maps/api/js?key=YOURAPIKEY&callback=initMap

​

4. Embed the Updated Code in Webflow  

  • Open Webflow Designer  
  • Drag and drop an Embed element from the Add panel.  
  • Paste the full embed code, now including your API key.  
  • If the code calls a callback function (like initMap()), wrap the script in a self-invoking function inside the embed box.  
  • Click Save & Close, then Publish your site.

​

5. Use Webflow's Custom Code Area if Needed  

  • If the map still fails inside the Designer, try embedding it in Site Settings > Custom Code inside </body> or in the Page Settings, then test on the published site.

​

6. Check JavaScript Console Errors  

  • Open the published site in a browser.  
  • Right-click and choose Inspect > Console.  
  • Look for error messages like:
  • API key is invalid
  • API not enabled
  • Referer not allowed
  • Address any specific errors using the Google Cloud Console.

​

Summary  

To fix the "Oops! Something went wrong" Snazzy Maps error in Webflow, ensure you have a valid, unrestricted Google Maps API key included in your embed code, and that the Maps JavaScript API is enabled in your Google Cloud project. Embed the full code with the key in Webflow and test on the published site.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I prevent the highlighted areas in my Webflow image map from being darkened along with the rest of the image?
How can I include UTM parameter data in my Webflow form submission to track sources like social media and Google?
How can the styling of the unordered list in the CMS rich text field be edited in Webflow?
How can I configure Webflow so that the preloader only appears during the first visit to the website?
How can I change the width of a container block in Webflow?
How can I achieve a blurred border effect on one side of a DIV using Webflow without using inner box shadow or affecting transparency?
How can I add RSS feed to my Webflow site?
Can I choose specific line breaks in Webflow CMS without using Richtext?
Why does the video I want to embed in Webflow have large black borders above and below it, despite being the desired size on YouTube?
What is the issue with the div where a YouTube video should be placed in a Webflow site?
How can I effectively reuse Page Triggers in Webflow without the hassle of manually adding them to each page? Is there a way to manage Page Triggers more efficiently using the Class-based feature or any other solution?
Why am I unable to edit the class in Webflow when I receive the message "The value is overridden by more specific selector"?
How can I control the position of the anchor when using a sticky menu in Webflow? Specifically, I want to ensure that the heading appears above the sticky navigation. This issue is present on the Guests page of my site. My site Read-Only link is provided.
Is it possible to embed a table in a CMS blog post using Webflow?
Can I pass form field values submitted by the user as parameters in the redirect URL when integrating Typeform with Webflow?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?