How to Embed an Interactive Map in SharePoint

Step-by-Step Instructions to Embed Your Map in SharePoint

Enhancing your SharePoint site with an interactive map can significantly improve user experience and engagement. In this guide, we will walk you through the steps to embed interactive maps in your SharePoint internal websites and intranets by following simple steps:

Get the map embed code

1. Open the “Share” menu.
2. Click on “Embed in a web page.”
3. Copy the embed code.

Review the related embed settings to optimize your map for your specific needs.

Step 2: Embed the Map in Your SharePoint Site

1. Access the Embed Code Section: Microsoft provides a detailed guide on how to embed an iFrame in a SharePoint site. Refer to the section on how to display content using embed code for additional details.
2. Paste the Embed Code: In your SharePoint site, navigate to the page where you want to embed the map.
   • Add a new web part by clicking the “+” icon.
   • From the list of web parts, select the “Embed </>” option.
   • Paste the Mapme embed code into the provided field.

Following these steps, you can seamlessly integrate interactive maps into your SharePoint site, enhancing the functionality and visual appeal of your internal websites and intranets.

Common SharePoint Map Embed Issues and Workarounds

Below are two common issues encountered when embedding maps in SharePoint and their respective workarounds:

1. HTML Field Security

SharePoint administrators can restrict embedding content from external websites. If you receive the error message:

“Embedding content from this website isn’t allowed.”

This means that the map domain is not whitelisted.

Workaround:

Contact your SharePoint administrator and request that they whitelist the map domain (e.g., mapme.com). The administrator can do this by navigating to:

Settings > Site settings > Site Collection Administration > HTML Field Security.

For further information, consult the official Microsoft support site.

2. x-frame Same-Origin Issue

Sometimes, a technical limitation in the browser may prevent the map from loading correctly within SharePoint due to x-frame restrictions.

Workaround:

To resolve this, remove the “https:” from the src attribute in the iframe embed code. This allows the URL to start with // and can help bypass the restriction.

Your iframe embed code should look like this:

<iframe width="100%" src="//viewer.mapme.com/myinteractivemap" frameborder="0" allowfullscreen allow="fullscreen; geolocation" scrolling="no" style="min-height: 90vh; max-height: 90vh; border: 1px solid lightgrey; border-radius: 2px;"></iframe> 

This solution should ensure the map loads properly within SharePoint.

Benefits of Using Maps for SharePoint

Integrating interactive maps into SharePoint transforms how organizations visualize and interact with their data, offering three key advantages:

• Enhanced Data Visualization: Interactive maps convert complex datasets into intuitive visual representations. This visualization capability makes it easier to identify trends, hotspots, and spatial distributions that might be missed in traditional spreadsheets or reports.
• Improved Collaboration: Teams can make better-informed decisions by accessing real-time map data directly within their familiar SharePoint environment. This seamless integration eliminates the need to switch between multiple platforms, streamlining workflow and ensuring all team members work with the most current information.
• Customizable Views: Create personalized map displays tailored to specific departmental needs. For example, sales teams can focus on customer locations and territories, while facilities management can view maintenance schedules and asset distributions. This targeted approach reduces information overload by showing each team exactly what they need to see.