Embedding Maps

Turn any public Mapiry map into an interactive widget on your website, blog, or application using iframe embedding. Perfect for business websites, blog posts, and portfolios.

What is Embedding?

Embedding places your interactive map directly on another webpage using an iframe. Visitors can:

• View all locations on the map
• Click markers to see location details
• Filter locations by category
• Search for specific locations
• Zoom, pan, and interact with the map
• Get directions to locations

Best of all: When you update your map on Mapiry, embedded versions update automatically!

How to Embed a Map

Step 1: Make Your Map Public

Only public maps can be embedded:

1. Open your map in Mapiry
2. Click the Share button
3. Toggle Make Public to ON
4. Save changes

Step 2: Get the Embed Code

1. Click the Share button on your map
2. Go to the Embed tab
3. Customize your embed settings (width, height, zoom, theme, etc.)
4. Click Copy Code to copy the generated iframe code

The basic embed code looks like this:

<iframe 
  src="https://mapiry.com/embed/abc123" 
  width="100%" 
  height="400px" 
  style="border:none; border-radius:4px;" 
  title="Mapiry Embedded Map"
  loading="lazy"
  allowfullscreen>
</iframe>

Step 3: Add to Your Website

Paste the embed code into your website's HTML:

WordPress:

1. Edit your page or post
2. Add a Custom HTML block
3. Paste the embed code
4. Publish

Wix, Squarespace, Webflow:

1. Add an Embed or Custom Code element
2. Paste the embed code
3. Adjust container size if needed
4. Publish

Custom HTML Sites:

1. Open your HTML file
2. Paste the code where you want the map to appear
3. Save and upload

Customizing Your Embed

Use the Embed Code Generator in the Share dialog to customize how your embedded map looks. Available options:

Size & Dimensions

Width:

• Percentage: width="100%" (responsive, fills container)
• Fixed pixels: width="800px" (fixed width)

Height:

• Fixed pixels: height="400px" (most common)
• Viewport units: height="80vh" (80% of browser height)

Change these values in the generator or edit them directly in the iframe code.

Zoom Level

Set the initial zoom level from 1 (world view) to 20 (street level). Default is 12.

The map automatically fits all locations within view on initial load.

Theme

Choose from 4 Mapbox map styles:

• Street (default) - Standard street map
• Light - Minimal light theme
• Dark - Dark theme
• Satellite - Satellite imagery with street labels

Show/Hide Elements

Toggle what appears on the embedded map:

• Show map controls - Navigation controls (zoom buttons, fullscreen button)
• Hide top bar - Removes the title bar and action buttons
• Title - Custom title override (if not hiding top bar)

What's NOT Available

Mapiry embeds do NOT support:

• Custom marker icons or styles (markers use category colors)
• Category filtering controls outside the sidebar
• Advanced popup customization
• Custom CSS/JS injection into the iframe
• JavaScript API for programmatic control
• Event tracking or callbacks
• Custom branding colors
• Border or corner radius customization (use CSS on the iframe element)
• Different popup styles (modal, sidebar, hover)
• Hiding specific UI elements individually (zoom, search, fullscreen)

For iframe styling (borders, shadows, etc.), apply CSS to the iframe element itself, not through embed parameters.

URL Parameters

Customize embeds by adding URL parameters to the iframe src attribute. Parameters override the default embed settings.

Available Parameters

Add these to the embed URL (e.g., https://mapiry.com/embed/abc123?parameter=value):

Display Options:

• width=VALUE - Set width (e.g., 100%, 800px)
• height=VALUE - Set height (e.g., 400px, 50vh)
• theme=street|light|dark|satellite - Choose map style
• hideTitle=true - Hide the top title bar
• hideSidebar=true - Hide the locations panel
• hideAttribution=true - Hide "Powered by Mapiry" badge (Pro only)
• title=TEXT - Override the map title

Map Controls:

• zoom=NUMBER - Set initial zoom level (1-20)
• controls=false - Hide zoom and fullscreen buttons

Examples

Hide top bar:

<iframe src="https://mapiry.com/embed/abc123?hideTitle=true" ...></iframe>

Dark theme with custom zoom:

<iframe src="https://mapiry.com/embed/abc123?theme=dark&zoom=14" ...></iframe>

Minimal embed (no UI):

<iframe src="https://mapiry.com/embed/abc123?hideTitle=true&hideSidebar=true&controls=false" ...></iframe>

Combine multiple parameters with &:

<iframe src="https://mapiry.com/embed/abc123?theme=satellite&hideTitle=true&zoom=15" ...></iframe>

What's NOT Supported

These parameters do NOT work (despite what some forums might suggest):

• hideBranding - Use hideAttribution instead
• hideSearch, hideZoom, hideFullscreen - Use controls=false to hide all controls
• category=slug - No category filtering via URL
• location=id - No auto-open location popup
• lat, lng - No custom center coordinates via URL
• Custom colors, fonts, or styling parameters

Responsive Embedding

Make your embedded map look great on all screen sizes.

Method 1: Percentage Width (Recommended)

Use width="100%" in the iframe to fill the container:

<iframe 
  src="https://mapiry.com/embed/abc123" 
  width="100%" 
  height="400px" 
  style="border:none;">
</iframe>

The map automatically scales to fit its container.

Method 2: Responsive Aspect Ratio

Maintain a consistent aspect ratio using CSS:

<div style="position: relative; padding-bottom: 56.25%; height: 0;">
  <iframe 
    src="https://mapiry.com/embed/abc123" 
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;">
  </iframe>
</div>

This creates a 16:9 aspect ratio that scales with the container width.

Method 3: Media Queries

Different sizes for different devices:

<style>
  .map-embed {
    width: 100%;
    height: 600px;
    border: none;
  }
  
  @media (max-width: 768px) {
    .map-embed {
      height: 400px;
    }
  }
</style>

<iframe 
  src="https://mapiry.com/embed/abc123" 
  class="map-embed">
</iframe>

Desktop: 600px tall / Mobile: 400px tall

Styling the Embed

You can style the iframe element itself with CSS:

<style>
  .styled-map {
    width: 100%;
    max-width: 1200px;
    height: 500px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin: 20px auto;
    display: block;
  }
</style>

<iframe 
  src="https://mapiry.com/embed/abc123" 
  class="styled-map">
</iframe>

This adds borders, rounded corners, shadows, and centering to your embedded map.

Best Practices

Recommended Sizes

• Blog posts: 100% width, 400-500px height
• Homepage: 100% width, 500-700px height
• Sidebar: 300-400px width, 400px height
• Full-page: 100% width, 100vh height

Performance Tips

• Use loading="lazy" attribute for below-the-fold embeds
• Limit to 2-3 embedded maps per page
• Test load times on mobile devices

Design Integration

• Match the theme to your website design
• Hide the top bar for minimal embeds
• Add CSS styling (borders, shadows) to the iframe element
• Provide context text above or below the embed

Keep Content Fresh

Embedded maps auto-update when you edit your map on Mapiry. No need to update embed codes!

Troubleshooting

Embed not showing

Check:

1. Is the map public? Private maps can't be embedded
2. Is the iframe code complete? Verify you copied the full code
3. Does your website use HTTPS? Mixed content (HTTPS site with HTTP iframe) is blocked by browsers
4. Ad blocker? Some ad blockers block iframes
5. CSP headers? Check if your site's Content Security Policy allows iframes from mapiry.com

Map is too small/large

• Adjust width and height attributes in the iframe code
• Use width="100%" for responsive width
• Increase height value if controls are cut off

Controls not working

• Ensure pointer-events: none isn't applied to the iframe via CSS
• Check that overlaying elements aren't blocking the iframe
• Test in an incognito window to rule out browser extensions

Wrong initial view

The map automatically fits all locations on load. If you need a specific view, use the zoom URL parameter.

Embed Features

What's Included

Embedded maps have:

• Interactive markers with category colors
• Click markers to see location details with images and descriptions
• "Get Directions" links to Google Maps
• Collapsible locations panel with search
• Category filtering
• Zoom and fullscreen controls (if enabled)
• Sharing buttons (copy link, Twitter, Facebook)
• Mobile-responsive design
• Auto-updates when map is edited

What's NOT Available

Embeds do NOT support:

• Private map embedding (maps must be public)
• Access tokens or password protection
• JavaScript API for programmatic control
• Custom event tracking or callbacks
• Custom marker icons or styles
• Advanced popup customization
• Filtering by specific categories via URL
• Auto-opening specific locations
• Setting custom center coordinates via URL
• Custom branding colors or fonts
• Multiple map showcases
• Embed view analytics (views are tracked for the map, not per embed)

Coming Soon

These features are planned but not yet available:

• JavaScript API for programmatic embed control
• Private map embedding with access tokens
• Embed showcase (multiple maps in one widget)
• Embed-specific analytics and referrer tracking
• Rate limiting and view quotas
• Advanced popup customization options

What's Next?

• Sharing Your Maps - Other ways to share maps
• Map Analytics - Track map views and engagement
• Map Customization - Customize map appearance before embedding