Home / How To Display SharePoint List Items on a Google Map
This post demonstrates the display of SharePoint list items on a map using JSLink and the Google Maps JavaScript API.

In the steps that follow, we will create a new custom list named Companies. The Title field will hold the company name and a new column named 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 is used to associate the JavaScript with the list view which is 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 a complete, best practices, or warranted solution, but are intended to demonstrate possibilities and provide you with examples that you can begin to build upon. Do not attempt exercises in a production environment. Any use of 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 IncWorx. We’re here to help you get the most out of SharePoint.

Step By Step Guide to Display SharePoint List Items on a Google Map

Step 1: Create New “Companies” List

Go to Site Contents, click New and choose List.

Step 2: Name the “Companies” List 

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

Step 3: Add A New Column

Add a new Single line of text column.

Step 4: Create “Location” Column

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

Step 5: Populate “Companies” List

Populate the “Companies” list with sample company names and 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(‘<script type=”text/javascript” src=”https://maps.googleapis.com/maps/api/js?key=<<your google api key here>>“></script>’);
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.

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.

Step 9: Edit The SharePoint Page

From the Site Actions menu choose Edit Page.

Step 10: Add A Content Editor Web Part

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

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.

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.

<div id=’map-canvas’ style=’border: 1px solid black; height: 200px;’/>

Step 13: Edit Google Map Container

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

Step 14: Update Miscellaneous JSLink Field

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

~site/SiteAssets/JSLinkMapView.js

Step 15: Finish Up Editing

Click the Stop Editing button on the ribbon.

View SharePoint List Items on a Google Map!

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

Author: Heath Anderson
IncWorx since: 2009
Summary: Heath currently serves as Director of R&D at IncWorx and continues to provide professional consulting services to our clients. A developer at heart, he is always hands-on, designing and developing solutions using the latest technologies from Microsoft.

Please let us know if you enjoyed this article by leaving a comment below. Your feedback is appreciated!

Share This
[wpforms id="1422"]
<div class="wpforms-container wpforms-container-full" id="wpforms-1422"><form id="wpforms-form-1422" class="wpforms-validate wpforms-form" data-formid="1422" method="post" enctype="multipart/form-data" action="/blog/diy-custom-sharepoint-series"><noscript class="wpforms-error-noscript">Please enable JavaScript in your browser to complete this form.</noscript><div class="wpforms-field-container"><div id="wpforms-1422-field_0-container" class="wpforms-field wpforms-field-name" data-field-id="0"><label class="wpforms-field-label" for="wpforms-1422-field_0">Name <span class="wpforms-required-label">*</span></label><input type="text" id="wpforms-1422-field_0" class="wpforms-field-large wpforms-field-required" name="wpforms[fields][0]" required></div><div id="wpforms-1422-field_1-container" class="wpforms-field wpforms-field-email" data-field-id="1"><label class="wpforms-field-label" for="wpforms-1422-field_1">Email <span class="wpforms-required-label">*</span></label><input type="email" id="wpforms-1422-field_1" class="wpforms-field-large wpforms-field-required" name="wpforms[fields][1]" required></div><div id="wpforms-1422-field_3-container" class="wpforms-field wpforms-field-phone" data-field-id="3"><label class="wpforms-field-label" for="wpforms-1422-field_3">Phone</label><input type="tel" id="wpforms-1422-field_3" class="wpforms-field-large wpforms-masked-input" data-inputmask="&#039;mask&#039;: &#039;(999) 999-9999&#039;" data-rule-us-phone-field="true" name="wpforms[fields][3]" ></div><div id="wpforms-1422-field_2-container" class="wpforms-field wpforms-field-textarea" data-field-id="2"><label class="wpforms-field-label" for="wpforms-1422-field_2">How can we help you? <span class="wpforms-required-label">*</span></label><textarea id="wpforms-1422-field_2" class="wpforms-field-large wpforms-field-required" name="wpforms[fields][2]" required></textarea></div></div><div class="wpforms-field wpforms-field-hp"><label for="wpforms-1422-field-hp" class="wpforms-field-label">Name</label><input type="text" name="wpforms[hp]" id="wpforms-1422-field-hp" class="wpforms-field-medium"></div><div class="wpforms-submit-container" ><input type="hidden" name="wpforms[id]" value="1422"><input type="hidden" name="wpforms[author]" value="2"><input type="hidden" name="wpforms[post_id]" value="4395"><button type="submit" name="wpforms[submit]" class="wpforms-submit " id="wpforms-submit-1422" value="wpforms-submit" aria-live="assertive" data-alt-text="Sending..." data-submit-text="Submit">Submit</button></div></form></div> <!-- .wpforms-container --><div></div>