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

Yes, you can restrict the zoom out level on Google Maps embedded in Webflow with Snazzy Maps styles by setting the minZoom option in your map configuration.

​

1. Use minZoom to Set the Minimum Zoom Level  

• The minZoom property defines how far users can zoom out (i.e., make the map less detailed).
• Typical zoom levels range from 1 (world view) to 21+ (building level detail).
• Example: Setting minZoom: 5 will prevent users from zooming out beyond zoom level 5.

​

2. Modify Your JavaScript Map Initialization  

In your project, if you’re using custom JavaScript to initialize the Google Map:

​

• Locate the code where new google.maps.Map() is called.
• Inside the options object, add:
• minZoom: X where X is your desired minimum level.
• Also add other typical properties like zoom, center, and styles (for Snazzy Maps).

​

Example usage in your Map options:

• minZoom: 5

​

Do not wrap this code inside <script> tags directly in Webflow's Embed Code if pasting here. Instead, paste it into a Custom Code block or Site Settings > Custom Code > Footer with proper <script> wrappers.

​

3. Combine with Your Snazzy Maps Style  

• Snazzy Maps only affects the visual style of the map, not the behavior.
• You can safely keep your Snazzy style in the styles attribute, alongside minZoom.

​

4. Webflow Setup Tips  

• Use a Custom Embed element to insert your map initialization code.
• Make sure the Google Maps API is properly loaded with your API key.
• Always test on the published site, not just in the Designer.

​

Summary  

To restrict zoom-out on a Google Map using Snazzy Maps in Webflow, add the minZoom property in your map’s initialization options (e.g., minZoom: 5). This controls how far the user can zoom out, and works alongside your Snazzy Maps styles.