Is there a code to restrict the zoom out level on Google Maps when using Snazzymaps in Webflow?

You're looking to limit the zoom-out level on a Google Map embedded in Webflow using Snazzy Maps styles. Here's exactly how you can handle that.

1. Set Minimum Zoom in Google Maps Embed

• When initializing your map with custom Snazzy Maps styling, you can directly define a minZoom property.

• Example options inside your JavaScript initialization:

  • minZoom: 10 (Replace 10 with whatever minimum zoom level you prefer.)
  • zoomControl: true to keep the zoom controls.

• Even when using Snazzy Maps styles, the minZoom control is handled by the main Map options, not the style itself.

2. Integrate the Code into Webflow Correctly

To implement this inside Webflow:

• Add an Embed element where you want the map.

• In your custom map initialization script inside the Embed, after setting the styles (your Snazzy Maps JSON), add minZoom: [your desired value] to the map options.

• Example concept:

• Define the styles with your Snazzy Maps styles array.

• Create the map with options including minZoom.

• Key parts inside your <script> tag:

• Setting Styles: Connect your Snazzy Maps JSON.

• Initializing Map: Use properties like center, zoom, and importantly, minZoom.

3. Important Webflow Practice Notes

• Don’t hardcode external script tags like <script src="..."> inside Embed blocks.
• Add external references (like Google Maps JS API) under Page Settings → Custom Code → Before .
• Only your initialization script and HTML container should be inside the Embed block.

4. Example Close-Up

In your map options object:

• Required properties:

• center

• zoom

• minZoom

• styles

• Example snippet:

• { center: { lat: 40.7128, lng: -74.0060 }, zoom: 12, minZoom: 10, styles: [your Snazzy Maps styles array] }

Summary

To restrict the zoom-out level for a Google Map in Webflow using Snazzy Maps, add a minZoom property to your map initialization options when building the map with an Embed element. Snazzy Maps only change the visual style; zoom restrictions require direct Google Maps configuration via options like minZoom.