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

To restrict the zoom-out level on a Google Map using Snazzy Maps in Webflow, you need to configure the map’s minimum zoom level using the Google Maps JavaScript API.

1. Add the Google Maps Embed Code with Options

• Snazzy Maps provides only the map styles, not functionality like zoom limits.
• You must embed a custom Google Maps JavaScript snippet in your Webflow project using an Embed element.
• Within that script, set the minZoom property on the map.

2. Modify the JavaScript to Include minZoom

• Set minZoom inside the map options like this:

• Example values: zoom: 12, minZoom: 10

• This lets users zoom out only to level 10

• Example snippet to embed inside a Webflow Embed element:

• Make sure to replace YOUR_API_KEY with your real Google Maps API key

• Apply your selected Snazzy Maps style to the styles property.

3. Where to Place in Webflow

• Drag an Embed element into your desired section.
• Paste your customized JavaScript that:
• Initializes the map
• Applies the Snazzy style
• Sets zoom and minZoom
• Alternatively, place the script in Page Settings → Before tag if you include a container with matching id in your layout.

4. Ensure Webflow Settings Don’t Conflict

• Make sure you're not using both an Embed and Webflow’s native Map element, as they can interfere.
• Only use custom code if you're controlling behavior like minZoom.

Summary

To restrict the zoom-out level on a Snazzy Maps-styled Google Map in Webflow, use a custom Google Maps JavaScript snippet that includes a minZoom setting within the map options. Snazzy Maps only controls the style layer—zoom limits are handled via the Maps API.