Google Maps implementation - Service Portal

[Micael Marinho1]

Hi guys

I am implementing the google maps API on the portal, however to call it, it is necessary to place the code inside a <script> tag in HTML instead of using the common client script. The problem is that I need to pull information from tables in the servicenow to put on the map, so ideally I would be able to access the data object, from the <script> tag. I tried to use UI script with GlideAjax and the client's GlideRecord, but this type of call just doesn't work from the service portal.

Can someone help me?

I thank you for your attention, have a good day !!!

[Roger Poore]

Ok...so it's been more than a few days.  I should probably do a proper article for this.  And I might.  In a few days.  🙂   Here's the end result in the form of a widget: 

I used leaflet.js for this project.  For the marker positions, I just used the demo records in my personal dev instance's location table.  They have latitude and longitude values.

First thing I did was create a new widget dependency named Leaflet.  Then I created a new JS include that points to the URL of the of the leaflet library (https://unpkg.com/leaflet@1.6.0/dist/leaflet.js).  Though, it would be better to have a local copy of the library for your JS include.   

I had to grab a copy of the marker image as well:

Now we can build our widget.  So create a new widget with the following:

HTML

<div id="mapid" style="height: 580px"></div>

For the CSS, go to https://unpkg.com/leaflet@1.6.0/dist/leaflet.css and copy/paste that.

Server script

(function() {
	var location = [];
	var gr = new GlideRecord('cmn_location');
	gr.query();
	
	while (gr.next()) {
		var o = {};
		o.latitude = gr.latitude.toString();
		o.longitude = gr.longitude.toString();
		o.name = gr.name.toString();
		
		location.push(o);
	}

	data.locmarker = new global.JSON().encode(location);	
})();

Client controller

function($scope) {
    /* widget controller */
	var c = this;
	var m = JSON.parse(c.data.locmarker);
	
	console.log('RGP: ' + m[0].latitude);
	
	var mymap = L.map('mapid').setView([33.738045, -84.358662], 5);

	L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
		maxZoom: 18,
		attribution: 'Map data copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
		'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
		'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
		id: 'mapbox/streets-v11',
		tileSize: 512,
		zoomOffset: -1
	}).addTo(mymap);
	
	for (var i=0; i<m.length; i++) {
		L.marker([m[i].latitude, m[i].longitude]).addTo(mymap)
			.bindPopup(m[i].name);		
	}
	
}

As you can see in the client script above, I just, more or less, pasted in leaflet's example.  It's probably advisable to get your own token.

Lastly, link the dependency you created to this widget:

And that is that.

[Amal Catalin]

Hello Roger, do you by any chance remember how you added the markers? Cause my map doesn't seem to pick them up even even though I added the marker to the image table.

[Roger Poore]

Hey @Amal Catalin 

Sorry, I didn't see this until now.  Were you able to figure it out?  If you still need some help, I'll reach into the deep parts of my brain and see what I can find.

Let me know

 -Roger