Responsive Maps for WordPress

MapPress maps are responsive: they fit the space they’re given and adjust as the screen changes, from a full-width desktop banner to a phone in portrait. On narrow screens the location list folds away behind a toggle, so the map gets the room.

Try it: drag to resize

Drag the bottom-right corner of the box to make the map narrower or wider. Below 400 pixels (this site’s setting), the list switches to Map / List buttons.

The same map at three sizes

Full width (desktop)

Tide pools and sea caves.

Rock arches below the bluffs.

Malibu’s famous surf break.

Ferris wheel and the end of Route 66.

Boardwalk, skate park and Muscle Beach.

Volleyball and the roundhouse aquarium.

Half width (tablet or sidebar layout)

Tide pools and sea caves.

Rock arches below the bluffs.

Malibu’s famous surf break.

Ferris wheel and the end of Route 66.

Boardwalk, skate park and Muscle Beach.

Volleyball and the roundhouse aquarium.

Phone size

Tide pools and sea caves.

Rock arches below the bluffs.

Malibu’s famous surf break.

Ferris wheel and the end of Route 66.

Boardwalk, skate park and Muscle Beach.

Volleyball and the roundhouse aquarium.

How it works

• Fits its container. Set the width as a percentage and the map follows the column it sits in, on every screen size.
• Size it your way. Width and height in pixels, percent, or a share of the screen (vw and vh), for example a full-screen 100vw × 100vh map.
• Mobile view. On narrow screens the location list is replaced by Map / List buttons, and opening a location closes the list so the popup is visible. You choose the width where this switch happens.
• Reacts to changes. Maps adjust when a phone rotates or a window is resized, and inside tabs, accordions and page builder columns.
• Full screen. A full-screen button lets visitors expand any map.
• Preset sizes. Save the sizes you use most in Settings and pick them for each map.

Add it to your site

1. In the map editor, choose one of your preset sizes or enter a custom width and height.
2. Or set the size in the shortcode.
3. To change when the mobile view starts, set Mini width in MapPress › Settings.

[mappress mapid="23" width="100%" height="60vh"]

FAQ

How do I make a responsive map in WordPress?
Give the map a percentage width, such as 100%. MapPress maps then resize with the page on every device.

How do I make a full-width map?
Set the width to 100% to fill the content column, or 100vw to span the whole screen, and place it in a full-width block or template.

How does the map look on mobile?
On narrow screens MapPress shows Map / List buttons instead of the side list, so visitors get the whole screen for the map.

Is a responsive Google map supported?
Yes. Responsive sizing works the same on Google Maps, OpenStreetMap and Mapbox.

Is it free?
Yes. Responsive maps, sizing and the mobile view are all part of the free version.

Free vs Pro: responsive maps are free. Pro adds features such as a store locator and custom markers.