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 replicate Google Maps-style pan and scroll zoom behavior in Webflow using a high-resolution image, without diving into Webflow Interactions or external platforms like Mapbox. While Webflow doesn’t natively support full pan-and-zoom interactivity for static images, you can integrate lightweight third-party libraries that work well with Webflow’s embed components.

​

1. Use a Lightweight JavaScript Library Like Panzoom

​

• A great alternative is Panzoom — a minimal, dependency-free JavaScript library that allows click-and-drag panning and scroll-to-zoom on any DOM element.
• Panzoom is much simpler than Mapbox and works well with raster images (JPG/PNG).

​

2. Embed the Image and Library in Webflow

​

• Add your high-res image to a div block in Webflow.
• Set the div to a fixed size and use overflow: hidden to contain the image inside the viewport.
• Add a Custom Code Embed block inside the div and include:
• The Panzoom script (via CDN)
• Your image wrapped in a container div with an ID (e.g., #map)
• A simple initialization script like panzoom(document.querySelector('#map'))

​

3. Steps to Implement in Webflow

​

• Add a Div Block (e.g., map-container) and set its styles:
• Width/Height: Fixed dimensions (like 100vw x 100vh or custom size)
• Overflow: Hidden
• Positioning: Relative if needed
• Inside the Div, add an Embed element and paste:

  ```html

  <div id="map">

    <img src="YOURIMAGEURL" alt="Map" style="width:100%; height:auto;" />

  </div>

  <script src="https://unpkg.com/@panzoom/panzoom/dist/panzoom.min.js"></script>

  <script>

    const element = document.getElementById('map');

    const panzoom = Panzoom(element, {

      maxScale: 5,

      contain: 'outside'

    });

    element.parentElement.addEventListener('wheel', panzoom.zoomWithWheel);

  </script>

  ```

• Replace YOURIMAGEURL with the actual image path from your Webflow assets or external hosting.
• You do not need Webflow Interactions for this — just plain JavaScript with an embed.

​

4. Key Considerations

​

• Make sure the image is optimized and not overly large to avoid performance issues.
• You can modify maxScale and other options in Panzoom to suit your use case (e.g., enabling bounded panning).
• Works in desktop and mobile (with touch gestures), though you may need to tweak settings for better mobile control.

​

5. Alternative Option: Magic Zoom Plus (Paid)

​

• If you’re willing to consider a paid or licensed tool, Magic Zoom Plus is a commercial plugin that offers zoom/pan behavior for images and can be embedded in Webflow using similar steps.

​

Summary

​

To replicate Google Maps-style click-and-drag pan and scroll zoom on a static image in Webflow without using interactions or Mapbox, use the Panzoom JavaScript library. It’s free, easy to embed via Custom Code, and works smoothly with Webflow’s native layout tools.