Product

Easy Guide to Embedding Custom Maps on Websites, Notion and Docs

Vivien·Jun 27·14 min read

tl;dr Learn how to easily embed custom maps with Exping on your website, Notion and Docs by following this step-by-step guide.


When I first experimented with exping's map embedding feature, I was astounded by its versatility and impact. This seemingly simple function revolutionized my approach to storytelling and travel itinerary.

In my document and blog writing, I frequently reference various places. With the ability to embed maps, I can now complement my textual descriptions with interactive maps directly on the page.

These maps allow me to show places and routes, while readers can zoom, pan, and explore details just as they would in Google Maps or Apple Maps (as demonstrated below). This enhancement has significantly elevated the reader engagement with my content.

Recently, while planning an intricate long-distance trip with friends, I was reminded of the power of embedded maps. We utilized collaborative mapping to consolidate all our information - transportation options, accommodations, individual places - onto a single map.

We then embedded this into our Notion travel itinerary. This approach streamlined our planning process, eliminating the need to juggle multiple apps or websites. Viewing the markers and routes on the map, we could almost feel ourselves already embarking on our adventure.

We're thrilled to see exping maps being integrated into various platforms, enhancing interactive experiences across the board. The benefits of using embedded maps extend even further:

  • Elevating content professionalism: A meticulously crafted map lends an air of expertise and authority to your content.
  • Boosting SEO performance: Embedded maps improve content discoverability, helping search engines index your work and expanding your reach.
  • Simplifying updates: When geographical information changes, you need only update the map, leaving the surrounding content untouched.

Embedding in Notion

Our team was ecstatic to discover Notion's native support for exping share links. Here's how to embed:

  1. Paste the exping share link into Notion
  2. Select Create embed
embed-exping-map-in-notion
Embed in Notion

Once embedded, the exping map becomes an integral part of your Notion workspace.

For guidance on obtaining a share link, refer to the final section of this post.

Embedding in Feishu Docs

In Feishu docs, you can easily embed exping maps using the Web Card feature. It's a simple 3-step process:

  1. Insert a Web Card
  2. Enter the exping share link
  3. Adjust the view to Preview View

By following these steps, you can embed an exping map in your Feishu docs. The height of the view can be further adjusted as needed by stretching.

embed-in-feishu-docs
Embed in Feishu Docs

By following these steps, you can embed an exping map in your Feishu docs. The height of the view can be further adjusted as needed by stretching.

Embedding in Blogs/Websites

embed-exping-in-blog
Embed in your website

For blogs or websites, the iframe method offers a straightforward embedding solution:

  1. Insert an iframe element in your blog or website
  2. Replace the default iframe src with your exping share link

While using iframes might sound technical, it provides unparalleled flexibility for map embedding across various platforms.

The following website, showcasing the potential of exping maps in education and cultural dissemination:

App

The app offers two methods to generate share links:

  1. Creation: Tap the Share icon > Select Share > Tap Copy LinkObtain in exping creation
  2. Editor: Tap ··· > Select Share > Tap Copy LinkObtain in exping editor

Web

The web provides multiple ways to obtain share links:

  1. Creation: Right-click on the map > Choose Copy Linkobtain-link-in-creation
  2. Editor: Click Share > Select Copy Link from the Share menuobtain-share-link-in-editor
  3. Preview: Simply copy the URL from your browser's address barcopy-share-link

Looking ahead, exping plans to introduce even more user-friendly embedding options and expand its platform support. This means you'll soon be able to seamlessly integrate interactive maps into an even broader range of scenarios.

We hope this guide helps you harness the power of exping map embedding and that you'll come to appreciate this feature as much as we do.


Share