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?

You're seeing the "Oops! Something went wrong" error because the embedded Snazzy Maps (Google Maps with custom styles) isn’t properly loading, usually due to issues with the Google Maps API key.

1. Check Your API Key Configuration

• Go to the Google Cloud Console (https://console.cloud.google.com/) and open the project tied to your map.
• Make sure you’ve created and enabled an API key.
• The following APIs must be enabled:
• Maps JavaScript API
• (Optionally,Geocoding API, Places API, etc., if needed)
• Under Credentials, check that your API key has correct restrictions:
• For embedding in Webflow, set the HTTP referrers to include *.webflow.io and your custom domain (e.g., www.yoursite.com/*).

2. Configure Snazzy Maps Style

• On the Snazzy Maps site, choose or customize your map style.
• Click “Download Code” or “Copy JSON” depending on where you want to apply the style.
• You will need this JSON style data to insert into the map initialization script.

3. Embed the Map in Webflow Using Custom Code

• In Webflow, open your project, go to the desired page.
• Scroll to the end of the page and click the + Add panel, then drag a “Embed” element to the canvas.
• Add a custom Google Maps <script> snippet that includes:
• Your API key
• Your Snazzy Maps JSON style
• A valid map container element (e.g., <div id="map"> with height defined)

Since raw HTML and scripts are not shown here, ensure your embed includes:

loading="lazy" if needed

A valid API key query like ?key=YOUR_API_KEY

You are not exceeding daily quota limits

4. Style the Map Container Properly

• Webflow won’t show the map unless the container div (e.g., #map) has a defined height and width.
• Set the map div’s height explicitly using either CSS in Embed or Webflow’s Style panel (e.g., height: 400px).

5. Test on Published Site

• Maps often won’t render correctly in the Designer preview. Click Publish and test the map on the live Webflow site.
• If you still see the error, check the browser’s JavaScript console for more specific API error messages like:
• “API key not authorized”
• “Billing account not set up”

Summary

You’re getting the error because the Google Maps API key is misconfigured or missing, or because the map container isn’t styled correctly. Ensure the API key is active, unrestricted for your domains, all required APIs are enabled, and the map div has visible dimensions. Test on the live site to confirm it's working.