How to embed google maps in SharePoint 2013/2016/Online

In this blog, I will show you how to embed a Google Maps in SharePoint 2013/2016 or SharePoint Online.

Recently I got a requirement to add our office location in our SharePoint application. Here I will show you how you can add a google map using script editor web part in SharePoint.

Here I explain in a very simple way to integrate embed code with the application.

Generate Embed code in Google Maps

There are two ways to generate the embed code for Google maps.

Open embedgooglemap.net. Here we have to provide the location name and other details. Next click on get-HTML code like below.

How to Embed Google Maps to a SharePoint 2013/2016 or Online page
Embed Google Maps to a SharePoint

Otherwise, we can use simple Google Maps.

Create Embed code in Google Maps

On your computer, open Google Maps. Then Go to the directions, map, or Street View image you want to share.

Then On the top left, click Menu. Select Share or embed map. If you don’t see this option, click Link to this map.

embed google maps in SharePoint
embed google maps in SharePoint

You can copy the same code and integrate it inside your SharePoint page.

<div class="mapouter">
    <div class="gmap_canvas"><iframe width="600" height="500" id="gmap_canvas" src="https://maps.google.com/maps?q=Qatar%20General%20Electricity%20%26%20Water%20Corporation%20(KM1)%2C%20Al%20Funduq%20Street%2C%20Doha&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe><a rel="nofollow" href="https://www.emojilib.com"></a></div>
    <style>
        .mapouter {
            position: relative;
            text-align: right;
            height: 500px;
            width: 600px;
        }

        .gmap_canvas {
            overflow: hidden;
            background: none !important;
            height: 500px;
            width: 600px;
        }
    </style>
</div>

Embed Google Maps in SharePoint

Log into SharePoint site and open your web part page where you want to embed google maps and click the Page tab from the Ribbon. From here, click on the Setting icon on the upper right and select Edit Page:

On the Edit page, select the Insert tab from the Ribbon.

embed google map in sharepoint 2013
embed google map in sharepoint 2013

Next copy the above code and paste it inside Embed code and click the Save button on the right corner of your site. Once you have successfully completed the embed, you will see the results of your code displayed on your site, similar to the following:

add google map to sharepoint online
add google map to sharepoint online

You may like the following SharePoint web part tutorials:

Hope this SharePoint tutorial helps to learn how to add google maps in SharePoint 2013/2016/Online.

>