How to Add Google Maps to SharePoint Online?

Requirement: Add Google Maps to SharePoint Online Modern Page.

Display Google Maps in SharePoint Online

Adding a Google Map to SharePoint Online is a great way to display geographical information directly on your SharePoint pages and sites. It can be used to pinpoint exact locations, such as a business address, customer location, or any other information that requires a geographical location.

SharePoint Online provides an easy way to add a Google Map to any page or site. With a few simple steps, Google Maps can easily be integrated into SharePoint Online. First, you will need to get the embed code for your desired location from Google Maps. Once you have obtained the Embed HTML, you need to add it to the SharePoint Online page using the “Embed” web part.

Here is how to add Google Maps location to your Modern SharePoint Online page:

Step 1: Get the Embed Code from Google Maps

To start, Open the Google Maps Platform, search, and locate your point of interest.

1. Go to Google Maps, and find the location you want to display on the SharePoint site. You can then customize the map to meet your needs. You can set the center point, zoom level, width, and height of the map.

   

2. Click on “Share” to get the HTML embed code for the selected location.
3. Copy the Embed code for the location.

   

You can also use the https://www.embedgooglemap.net/ URL to get the embed code for Google Maps location.

The Embed HTML code will be something like this:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7219.557218584543!2d55.273407776546144!3d25.210687542466783!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3e5f428f0d45e889%3A0x5c0e0c234547d18!2sTrade%20Centre%20-%20DIFC%20-%20Dubai!5e0!3m2!1sen!2sae!4v1673698135592!5m2!1sen!2sae" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

Step 2: Add Embed Web Part to Display Google Maps

Now, you can add the HTML code for Google Maps to your SharePoint Online site. For classic sites, You can use “Script Editor Web Part” to do the same!

1. Go to the SharePoint Online page where you want to add the map.
2. Edit the page and click on the “+” button on the relevant section of the page to add a new web part.
3. In the web parts popup, select the “Embed” web part.

   

4. In the Embed web part, click on the “Edit” button and paste the Embed code you have copied from the previous step.
5. In the “Embed code” field, paste the code for the Google Map you have obtained in the previous stage.

   

6. Close the web part properties and publish the page to save the changes.

That’s all! Adding a Google Map widget to SharePoint Online is an easy way to provide location-based information directly on your website or intranet page. By following these steps, anyone who has access to their organization’s Sharepoint site should be able to easily add a comprehensive yet user-friendly interactive mapping feature right within their site!

Last, but not least: Make sure www.google.com is added to the HTML Field security of your site settings. Otherwise, You may get the “Embedding content from this website isn’t allowed, but your admin can change this setting. They will need to add ‘www.google.com’ to the list of sites that are allowed.” error. More here: Configure HTML Field Security in SharePoint Online