Create Interactive Custom Google Map In SharePoint Online

Introduction

Maps have become a vital part of our life. In our day to day life, everyone is using maps for different purposes. So, here we are going to learn how to create a Google Map using custom list in SharePoint Online. For this purpose, we are going to use an Office app, downloaded from Office Store.

So, we follow the below scenario to create the Map. First of all, log into your SharePoint Online tenant, using your credentials.



After logging into your tenant, create a custom list to store the location related Information, like Location name, Latitude, Longitude etc.



Create list columns and store data into list.

Note - Our column names depend on the Apptex documentation to create Google Map using Apptex.



Now, go to the SharePoint Store to install the Apptex app from there.

Click on New --> App.



In the left side navigation, click on SharePoint Store that redirects you to the SharePoint Store where you can download different free and paid apps from the market. Search for Apptex in search navigation and you will find an app named Apptex Designer.



As we have already installed this app into our SharePoint tenant, we are not able to add it again but it is very simple to add the Apptex Designer into your SharePoint environment.

After some time, the Apptex icon gets shown under your site content, as shown below.



Apptex creates a default library named Apptexfiles to store the JavaScript and CSS files, required to create a Google Map.

Now, create a new web part page (CSharp Corner Chapters) and add your previously created C# Corner Chapters list as a list view webpart. It looks like below.



Now, the actual journey to create the Map starts here.

Open Apptex app that is installed in your SharePoint site.


Image- Landing page of Apptex Designer app.

Note - Apptex provides a complete documentation on how to use Apptex Designer.

Click on Maps in the left pane. It expands like an accordion. Click on Custom Google Map.



In Custom Google Map overview tab, it shows all the requirements for us to create the Map. One important point is that you should only have the appropriate column from your list (View), set at your page where you are going to show your Map.



Now, click on "Apply" tab at the top, which opens a window to apply different settings. Here, it is important that you fill all the details carefully.

Target Page- The page on which you added your list to create a Map.

Target List View- Select the list in which you are going to apply the JS file to create Google Map.

Note - Actually, Apptex creates a JavaScript file for us that is used to apply onto the list and it creates a map for us.