How To Create a SharePoint Google Map

This post demonstrates the display a SharePoint Google map full of SharePoint list items using JSLink and the Google Maps JavaScript API.

We will create a new custom list named Companies in the following steps. The Title field will hold the company name and a new column called Location will hold the company address information.

We will use a Content Editor Web Part placed above the list view as the container for the map. JavaScript will be used to call the Google API for generating the map, obtaining the geolocation of each list item’s location, and adding the markers to the map.

JSLink associates the JavaScript with the list view executed client-side during the list view’s rendering process (client-side rendering).

 

Prerequisites

Google Maps API Key – if you want to follow along and implement the solution on your own you will need an API key from Google.

 

Versions

SharePoint 2013, Office 365*

*JSLink is not supported in the Office 365 modern site experience. Microsoft recommends SPFx when developing custom solutions for modern sites.

Disclaimer: The solutions in this series are not intended to provide complete, best practices, or suitable solutions, but are designed to demonstrate possibilities and provide you with examples you can begin to build upon.

Do not attempt exercises in a production environment. Any use of the information contained in this article is strictly at your own risk. If you need additional SharePoint support or advisory hours, please don’t hesitate to contact us. We’re here to help you get the most out of SharePoint.

 

Step By Step Guide to Create a SharePoint Google Map

Step 1: Create New “Companies” List

Go to Site Contents, click New and choose List.

add SharePoint list

 

Step 2: Name the “Companies” List 

Name the list “Companies” and click the Create button.

create SharePoint list

 

Step 3: Add A New Column

Add a new Single line of text column.

add SharePoint column text

 

Step 4: Create “Location” Column

Name the column “Location” and click the Create button.

SharePoint new text column

 

Step 5: Populate “Companies” List

Populate the “Companies” list with sample company names and locations.

sample SharePoint list company names locations

 

Step 6: Create JSLinkMapView.js File

Using your favorite editor create and save a file named JSLinkMapView.js and add the following code.

Note: be sure to enter your own Google API key!

document.write(‘’);
function RegisterCustomOverrides() {
var obj = {};
obj.Templates = {};
obj.Templates.OnPostRender = LoadMap;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(obj);
}
function LoadMap(ctx) {
var mapOptions = {
center: new google.maps.LatLng(42, -88),
zoom: 6
};
var map = new google.maps.Map(document.getElementById(“map-canvas”), mapOptions);
var geo = new google.maps.Geocoder();
var bounds = new google.maps.LatLngBounds();
var rows = ctx.ListData.Row;
var idx = 0;
for (var i = 0; i < rows.length; i++) {
geo.geocode({‘address’:rows[i][“Location”]},function(results, status) {
new google.maps.Marker({map: map, position: results[0].geometry.location, title: rows[idx++].Title});
bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);
});
}
}
RegisterModuleInit(“/SiteAssets/JSLinkMapView.js”, RegisterCustomOverrides);
RegisterCustomOverrides();

 

Step 7: Upload JSLinkMapView.js File

 

Upload the JSLinkMapView.js file to the Site Assets document library of your site.

upload jslink SharePoint site assets library

 

Step 8: Change View to Classic SharePoint

Return to the “Companies” list and click Return to classic SharePoint.

Note: At the time of this writing Microsoft’s new “modern pages” do not support many of SharePoint’s customization features including JSLink.

return to classic SharePoint

 

Step 9: Edit The SharePoint Page

From the Site Actions menu choose Edit Page.

SharePoint edit list view page

 

Step 10: Add A Content Editor Web Part

  • Click Add Web Part
  • Choose Media and Content
  • Choose Content Editor
  • Click Add

SharePoint add content editor web part

 

Step 11: Edit The Content Editor Web Part Code

With the Content Editor Web Part now added above the list items, click to edit the web part and activate the ribbon options, then choose Edit Source.

SharePoint content editor edit source

 

Step 12: Create Container for Google Map

Paste the following in the Content Editor Web Part Source window and click the OK button.  You have now created the container for the Google map.

container SharePoint Google map

 

Step 13: Edit Google Map Container

Click Edit Web Part from the list view web part’s context menu.

SharePoint content editor edit web part

 

Step 14: Update Miscellaneous JSLink Field

Expand Miscellaneous and paste the following in the JSLink field and click OK:

~site/SiteAssets/JSLinkMapView.js

SharePoint add jslink list view

 

Step 15: Finish Up Editing

Click the Stop Editing button on the ribbon.

SharePoint stop editing page

 

View SharePoint List Items on a Google Map!

SharePoint list items Google map

 

I hope you’ve enjoyed this brief introduction to JSLink. Thanks for reading!

Related Articles to Help Grow Your Knowledge

Power BI Datamart: A New Way to Access & Analyze Data
Power BI Datamart: A New Way to Access & Analyze Data

In May 2022, Power BI introduced a new addition to its ever-growing list of features, Power BI Datamart. Datamart is a new way to access and analyze data stored in a Power BI data model. Microsoft Power BI Datamarts provide users an SQL interface to query data in the...

Microsoft Azure Security vs AWS Security
Microsoft Azure Security vs AWS Security

This article aims to compare Microsoft Azure Security vs AWS Security. We look at how each addresses the size pillars of cyber security. As of March 2022, 60% of corporate data is stored in the cloud. Most of that data resides in either Amazon's Amazon Web Service...

What is the Microsoft Power Platform?
What is the Microsoft Power Platform?

What is the Microsoft Power Platform? It sounds like something you want to add to your list of valuable technologies to enhance your business. Today, we will look at the Microsoft Power Platform and the differences between PowerApps and the Power Platform. When you...

Get our free, 30-second weekly newsletter. Used by 2000+ people to keep up with always-changing Microsoft technology.