The embed code Mapvera hands you is already responsive — it scales to whatever width its container has, on phones and desktops alike. This guide explains how it works so you can adjust it confidently when your page layout needs something specific.
Grab the snippet
-
Publish the map first
The embed link only works once the map is published, so Publish it before you copy anything.
-
Open the Embed tab
In the editor, open Embed on Your Site. Copy the Embed code (click it, or use Copy code / Download).
-
Paste it into your page
Drop the snippet into the spot on your website where the map should appear.
How the responsive snippet works
The snippet is a wrapper <div> with a percentage of top padding, holding an <iframe> pinned to fill it. The padding keeps the map's aspect ratio at any width — that's the whole trick:
| Part | What it does |
|---|---|
div with padding-top:NN% | reserves height as a ratio of the container's width |
iframe with position:absolute;inset:0;width/height:100% | fills that reserved box exactly |
loading="lazy" | the map only loads when it scrolls into view |
allow="fullscreen; picture-in-picture; geolocation" | lets the map go fullscreen and use the visitor's GPS |
Adjust the height yourself
-
Make it taller or shorter
Change the
padding-toppercentage on the wrapper. Bigger = taller. For examplepadding-top:75%gives a 4:3 frame;padding-top:56.25%is 16:9.Only edit the wrapper's padding — leave the iframe's inline styles alone.
-
Use a fixed height instead
If you'd rather set an exact height, drop the padding trick: give the wrapper a height like
height:600pxand keepposition:relative. The iframe still fills it. -
Fill a whole section or the viewport
Put the wrapper in a sized container (e.g. a section with
height:80vh) and give the wrapperheight:100%. The map fills the section.
Tips for a clean fit
Give the map room to breathe — very short frames hide the bottom sheet and directory. On narrow phone layouts a slightly taller ratio usually reads better than a wide one. If the map looks letterboxed, your wrapper ratio doesn't match the artwork; nudge the padding-top until the map fills the frame. Always check the result on a real phone, not just a narrowed desktop window.