How to add a branded interactive map to your website

Choose an embed or a dedicated page

An iframe is a window that displays the hosted map inside another webpage. Where your site supports it, an iframe or another agreed embed method can keep the map beside your content. An embedded interactive map keeps the reader inside an article, hotel neighborhood page, or property listing. A dedicated map page gives the guide more room and a stable address you can share in emails, newsletters, and QR codes. Both can be useful for the same collection.

Choose an embed when the map supports the surrounding story. Choose a dedicated page when exploring places is the main task, or when your publishing platform limits custom embeds. We agree the hosting address and any domain setup before work begins.

Check your publishing platform

You do not need to identify every technical requirement yourself. Send the site address and, if you know it, the platform and plan. We can coordinate with your existing developer or website administrator.

• WordPress: the hosting setup and permissions matter. WordPress.com restricts iframe and JavaScript code on some plans; its custom-code guidance explains the requirements. A self-hosted WordPress site may have different plugin and administrator controls.
• Squarespace: code blocks can be used for third-party content, but iframe and JavaScript support depends on the plan. We check the site's current eligibility against Squarespace's code-block guidance.
• Wix: the editor provides options to embed HTML or an external website. The container needs to be sized and checked for the map; see Wix's embed guidance.
• Webflow and Ghost: Webflow has a custom-code embed element, and Ghost offers HTML cards for external content. We check the map on the published website as well as in the editor.
• Other platforms: if you use Webflow, Shopify, Ghost, Framer, Carrd, Duda, Weebly, GoDaddy Website Builder, HubSpot CMS, or a custom website, tell us which editor and plan you have. We assess the available code, embed, and link options for that setup. We recommend the publishing route that fits your account and the experience you want.

Platform plans and controls change. These are integration options to check, rather than a promise that every account supports the same code.

Publish on Substack or another newsletter platform

You can keep publishing on Substack while giving your map its own branded home. For example, readers could follow a link from a restaurant story to maps.yourpublication.com, where they explore the places and follow links back to your articles.

Substack's current guidance says its post editor does not support custom HTML, CSS, or raw iframe embeds. A normal link to the map is a practical publishing route that avoids depending on those features.

We can host the map separately, for example on Cloudflare Pages, and help connect an available subdomain of a domain you control. The map lives on its own hosting while visitors use your branded address. Your newsletter can stay where it is; the map does not need to run inside Substack.

Connecting a subdomain requires access to your domain's DNS settings and the hosting configuration. We work through that with you or your developer. A hosted map link is also available if you do not have your own domain. Cloudflare's custom-domain guidance explains the underlying setup.

Other newsletters, blogs, and publishing channels

beehiiv supports HTML snippets and iframe content in web posts, but iframes do not render in the email version. We can assess a web embed and use a normal map link in the newsletter. The same linked-map approach can serve a Medium or Blogger publication, a Ghost site, a Mailchimp or Kit email campaign, or another publishing channel. Available embed features differ, and a link is often the clearest route from an email to an interactive map. We choose the approach for your actual account and audience.

Give the map enough room to work

A map needs space for its selected place, readable descriptions, and clear controls. On a wide screen, a list and map can sit together. On a phone, compact cards or a list view can help people browse without losing their location.

We check the surrounding page as well as the map: whether it fits the content column, whether the header covers it, whether scrolling the page feels natural, and whether place links open as expected. A full-page link beside an embed can give visitors another way to explore.

Review a working version before launch

We start with a phone or Zoom conversation about your website and audience. Together we confirm the content, design, and integration scope. Then you review a working preview and share feedback by email or on Zoom. We refine the map and check the final page with you or your developer before publication.

Useful checks include selecting a place, finding the corresponding pin, reading its description, following an official link, and returning to the list. On phones, we also check the intended touch interaction. A screenshot alone cannot confirm these behaviors.

Keep the map connected to your website

Add a short introduction explaining what the map contains and who it helps. Link to it from relevant articles, accommodation information, or property pages. Keep important context available as normal page text rather than putting every explanation inside the map.

If you later change your theme, page layout, domain, or content platform, let us know so we can check the integration again. For distribution ideas, see how to share your map with guests and readers.