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.

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.

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 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.

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:

You may like the following SharePoint web part tutorials:

• SharePoint employee of the month web part using the client-side object model and bootstrap
• Create custom announcement web part using Rest API in SharePoint Online/2013/2016
• Create SharePoint Quote of the day web part using Rest API and Bootstrap
• Enable Chart Web Part in SharePoint 2013 or SharePoint 2016 and SharePoint Online
• Content Search web part in SharePoint Online
• Content query web part SharePoint Online or SharePoint 2013/2016
• Site Feed web part in SharePoint 2013/2016/Online

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