Is there a way to replicate a Google map style drag to pan and scroll to zoom on an image in Webflow? Is it possible to achieve this without using interactions? I'm trying to create a webmap for a fantasy game project and want users to be able to pan and zoom high resolution rasterized images of our world. I've considered using Mapbox, but it seems too complex. Are there any other options available in Webflow?

You want to create a Google Maps-style pan-and-zoom experience for a high-resolution image in Webflow, ideally without custom JavaScript or Webflow Interactions. While Webflow alone doesn’t offer native support for draggable pan and scroll-to-zoom on images, you can achieve this using third-party libraries or embed tools.

1. Use a Zoom & Pan JavaScript Library via Embed

To achieve your goal in Webflow without complex configuration like Mapbox, use a lightweight JavaScript library that supports zoom and pan features:

• Panzoom (https://github.com/timmywil/panzoom): Ideal for adding drag-to-pan and scroll-to-zoom behavior.
• Drift.js or Wheelzoom are alternatives, but Panzoom is best for a map-like UX.

To use it in Webflow:

• Add your map image inside a div wrapper in the Designer.
• Use an Embed element to include the Panzoom initialization script.
• Host the library via CDN (e.g. from jsDelivr or unpkg).

You’ll include something like:

• Load Panzoom via script tag using Webflow’s Page Settings > Footer Code, or inside an Embed block on the page.
• Target your map container div in the script to enable interactions.

Even though this involves code, it’s simpler than Mapbox and avoids Webflow Interactions.

2. Use Third-Party Tools like Zoomify or OpenSeadragon

For very large, high-res images, Webflow has limitations:

• Tools like OpenSeadragon allow tiled, deep zoom similar to Google Maps.
• You prepare your image as tiles and embed the viewer using iframe or custom code.
• This route is more complex, but high-performing for large maps.

Webflow won’t natively tile large images, so for true map-like zoom at high resolution, tile-based tools are better, even if setup is heavier.

3. Optional: Use Webflow with Light Code Interventions

While you're avoiding interactions, a light-code approach may be a good compromise:

• You can disable Webflow Interactions.
• Use only native HTML+JS via Embed blocks for minimal overhead.
• This stays within Webflow and gives a very map-like experience.

Summary

Webflow doesn’t support native drag-to-pan and scroll-to-zoom on images, but you can replicate the behavior using lightweight libraries like Panzoom with minimal code embedding. For large-scale images, consider OpenSeadragon. These alternatives are simpler than full tools like Mapbox and avoid using Webflow Interactions.