CHunky Universe of Vigourous Astonishing SHarepoint :)

Tag Archives: google maps

Provisioning Google Maps JSLink with SPMeta2


Among PnP Samples there is a solution for using Google Maps. Great solution where where you can pick a point on a map and define a spacial area on the map. Unfortunately it is a sandbox solution. I rewrote it to a code based template with SPMeta2 Framework. Now it can be installed on any site very easily, without needing UserCode Service and a cumbersome process of uploading a wsp package and activating it. The code is very simple, you can see it on github.


Let’s take a look at it. It does not contain a single line of SharePoint Legacy XML. There are following SharePoint artefacts that are getting provisioned:

  1. Two site columns (Location Point and Location Area)
  2. A SharePoint List (Locations) with two additional fields mentioned above
  3. Google Maps code in and CSR in a jslink file
  4. Auxiliary pages for selecting points and areas on the map.

Field Definitions

In SPMeta2 everything is separated in meaningful definitions. First we define our fields. The preferred place in the VS solution is Definitions – IA – Fields.


List Definitions

Then we define our List – Locations. That is also a SPMeta2 Definition. List Definitions reside in Definitions – IA – Lists. We do not add fields in our list definition. The fields are added while “assembling” the model.


ListView Definitions

ListView Definitions are also in the Definitions – IA folder. We inherit from the OOB AllItems view:


Modules (a.k.a. Files)

Resource files like javascript, css, aspx, html and so on are Modules. They are in the “Modules – Implicit” folder. The internal structure is copied to the web folder. The upload of files is easy and is defined in the web model, see next section.

Web Model

Now it is time to pick the definitions and create a model. The most common model is a Web Model. The model is created programmatically and relies on “Add” methods: AddField, AddList and so on:



The actual provisioning is the most fun, it is easy and straight forward, it takes models and deploys it to a SharePoint site. You can easily switch between SSOM and CSOM.



Another bonus of SPMeta2 Provisioning Framework is the ability to serialize and deserialize models to XML or JSON. In our project we define SharePoint Applications as SPMeta2 models serialized in XML and make them available for installation on any SharePoint Site.  A SharePoint Application is a meaningful collection of SharePoint artefacts that becomes an entity and solves a business need.


This Maps solution is a simple solution, but it is a very powerful one, originally created by the PnP team. If we just redesign the Provisioning Part, it becomes awesome. SPMeta2 provides a solid, well defined, easy-to-understand framework for define code-first models for SharePoint Applications.

Get coordinates from Google Maps

To get longitude and latitude can be tricky at the first time. There are many ways to do this, e.g. Good enough, but not so practical if you want to collect many coordinates. You can’t search after street names, you only can scroll and drag. Another way is to use javascript to show the longitude and latitude. See this example. This works in all web browsers.Just find your object in Google Maps and paste this javascript in URL bar:
You’ll be prompted the coordinates values. Just be sure the map is centered on your object.

There is a third, even better way. Use javascript, but don’t be annoyed with prompts.

In Chromium (or Google Chrome) navigate to find your object, open the Console in DevTools (press Ctrl-Shift-J).

Right click on the object → Center the map here

In console write:
copy ( gApplication.getMap().getCenter().toString() )
So now you can paste it wherever you need it. But the best with it is: you can do whatever you want and need before copying. In LUSites, I save the coordinates another way, first latitude and then longitude. So I can shift values, trim unnecessary stuff and so on. Look at it:
var loc = gApplication.getMap().getCenter().toString();
var locTrimmed = loc.replace(/[() ]/gi,"");
var locArray = loc.split(",");
var newLoc = locArray[1] + "," + locArray[0];
copy (newLoc)

First I get the string of the coordinates. Then I erase the unnecessary stuff: (), blank space. After splitting I shift the longitude and the latitude and create a new string which is copied.

Or, we can shorten this:

var coordinates = gApplication
.replace(/[() ]/gi,"")
copy (coordinates[1] + "," + coordinates[0]);

The same in one row (to copy-paste):
var coordinates = gApplication.getMap().getCenter().toString().replace(/[() ]/gi,"").split(","); copy (coordinates[1] + "," + coordinates[0]);

To avoid to copy this line of code, just press up arrow in the DevTools console.

Daniel Chronlund Cloud Tech Blog

News, tips and thoughts for Microsoft cloud fans

Вула Чăвашла

VulaCV - Чăвашла вулаттаракан сайт

Discovering SharePoint

And going crazy doing it

Bram de Jager - Architect, Speaker, Author

Microsoft 365, SharePoint and Azure

SharePoint Dragons

Nikander & Margriet on SharePoint

Mai Omar Desouki

PFE @ Microsoft

Cameron Dwyer

Office 365, SharePoint, Azure, OnePlace Solutions & Life's Other Little Wonders


Me and My doings!

Share SharePoint Points !

By Mohit Vashishtha

Jimmy Janlén "Den Scrummande Konsulten"

Erfarenheter, synpunkter och raljerande om Scrum från Jimmy Janlén

Aryan Nava

DevOps, Cloud and Blockchain Consultant


SharePoint for everyone


Ryan Dennis is a SharePoint Solution Architect with a passion for SharePoint and PowerShell

SharePoint 2020

The Vision for a Future of Clarity

Aharoni in Unicode

Treacle tarts for great justice

... And All That JS

JavaScript, Web Apps and SharePoint


Mostly what I know and share about...