Create a Google Map/Where to Go Widget for New hires and Employees - Quick and Easy

[Apurva16]

Onboarding is vital for both the company and the new hire. Good onboarding acclimates employees to their new role, the company's philosophies, and what the company can offer.

ServiceNow offers a powerful Onboarding solution that you can utilize to create an engaging and insightful journey for the new hire

One of the ways you can make the transition easier for the new hires is by providing them with details of the location where they would be working.

You can easily create a Google Map widget that the new hire can use to locate the work location and find the best route to reach there.

This article will show you a quick and easy way to make a Google map widget that you can display on your employee center portal. It can be used by both new hires and existing employees.

Here are the steps to create the widget:

Navigate to Widgets (All – Service Portal – Widgets)

Create a new Widget

• You can call it any name as per your requirements. I have called mine “Where to find us”
• Do not forget to add an ID
• Ensure that you are in the correct scope. My widget is in the Employee Center/Employee Center Pro scope.

Use the below in the sections:

Body HTML template:

<div class="panel panel-{{options.color}} b" rect="rect" ng-show="data.canView">

  <div class="panel-heading">
    <h3 class="h4 panel-title">{{::data.title}}</h3>
  </div>

  <div class="panel panel-{{options.color}} b">

    <div id="map-container">
      <div class="mapouter">
        <div class="gmap_canvas"></div>
      </div>
    </div>

    <div ng-show="data.address" class="geo-address wrapper">
      <p><strong>{{::data.msgAddress}}</strong>: <span>{{::data.address}}</span></p>
      <p></p>
      <p><strong>{{::data.msgTime}}</strong>: <span>{{::data.time}}</span></p>
    </div>

  </div>

</div>

CSS:

.gmap_canvas {
	padding: 1em;
}

Server Script:

(function() {
	/* populate the 'data' object */
	/* e.g., data.table = $sp.getValue('table'); */

	data.sysUserID = gs.getUserID();

	// check HR/User Criteria "Where to find us (18 days before start)" and only if true then show/continue
	data.canView = new sn_hr_core.hr_Criteria().evaluateById("0709a43e0b3312009eaf2da0d5673a6e", data.sysUserID);
	
	if (!data.canView) {
		return;
	}

	
	data.title = options.title ? gs.getMessage(options.title) : gs.getMessage("Where to find us");
	data.msgAddress = gs.getMessage("Address for 1st working day");
	data.msgTime = gs.getMessage("Time for 1st working day");

	data.address = "";
	data.time = "";

	var hrProfileGR = new GlideRecord("sn_hr_core_profile");
	if (hrProfileGR.get("user", data.sysUserID)) {
		data.address = hrProfileGR.user.location.getDisplayValue("name");
		data.time = hrProfileGR.getDisplayValue("u_time_for_1st_working_day");
	}

	if (data.address) {
		// for iframe
		var address_query = encodeURIComponent(data.address);
		var language = gs.getSession().getLanguage() || "en";
		data.iframe_element = '<iframe id="gmap_canvas" src="https://maps.google.com/maps?t=&z=14&ie=UTF8&iwloc=&output=embed&language=' + language + '&q=' + address_query + '" height="220px" width="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>';
	}

})();

Client controller:

api.controller=function($scope, $element, $timeout, $http, cabrillo, $rootScope, spUtil) {
	/* widget controller */
	var c = this;
	$scope.mapInit = false;

	if (c.data.address) {
		$scope.mapInit = true;
		$element.find(".gmap_canvas")[0].innerHTML = c.data.iframe_element;
	}

};

You can check who should have access to this widget by HR criteria. Please take a look at the data.canView part and tag the relevant HR Criteria to it.

If your location address is different from the location.name on the user profile then refer to that address to fill in the data.address variable. In my example, I have fetched the location information. This can vary based on your config.

Bonus tip:

You can add more fields to the widget, e.g. I have added a custom field that displays the time the orientation would start for the new hire.

Once the widget is created, add it to the portal by going to the Employee Center portal -> Page designer.

Once added, test it and it should look something like this:

Note:

• Cross-scope access might be needed
• This method uses the iframe that comes with its own set of limitations, however, the method we used is a quick and easy method.
• You can also utilize the google APIs if you have the license.

I hope this has been helpful. Do feel free to provide your thoughts and input.

PS. Special thanks to Peter Kubán from devoteam who built the widget and allowed me to share it here.