Google Maps implementation - Service Portal

Micael Marinho1
Giga Contributor

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 !!!

7 REPLIES 7

Roger Poore
Tera Guru

This may not help but I used ng-map to show a world map with overlaying satellite locations.  It's fairly easy to do as a widget.  Something like that anyway.

 

HTML part:

<ng-map center="10, -75.712891" zoom="2" mapTypeId="TERRAIN" default-style="false" style="height:400px">  

  <info-window id="satinfo" pixel-offset="{width:0,height:-30}">
    <div class="pheader">{{vm.content}}</div>
  </info-window>   
  
  <custom-marker id="{{bird.name}}" position="{{bird.position}}" ng-repeat="bird in vm.birds" on-click="showInfo('{{bird.name}}')">  
    <img src="http://downloadicons.net/sites/default/files/satellite-icon-236.png" width="18px" title="{{bird.name}}"/>	   
    <!--<div style="color: #000; background-color: #ddd; border: 2px solid red; padding: 5px;">{{bird.name}}</div>-->
  </custom-marker>  
  
</ng-map>

Client part:

// Note:  I didn't want to violate any PIA (proprietary information agreement) so all but the name of the 
//   satellite has been removed...as is reflected in the code.

function GoogleMapsNow(NgMap, $scope, $timeout) {
	var vm = this;
	var m = JSON.parse(vm.data.bird);
	vm.birds = m;
	
	$scope.showInfo = function(e, bird) {
		console.log(e);
		$scope.map.showInfoWindow('satinfo', bird);		
		vm.content = bird;
	}	
}

Server part:

// Note:  I didn't want to violate any PIA (proprietary information agreement) so all but the name of the 
//   satellite has been removed...as is reflected in the code.

(function() {
  /* populate the 'data' object */
  /* e.g., data.table = $sp.getValue('table'); */
	
	var array = [];
	var gr = new GlideRecord("u_ii_satellites");
	var grOR = gr.addQuery('u_sat_nme','CONTAINS','Galaxy');
	grOR.addOrCondition('u_sat_nme','CONTAINS','Horizon');
	grOR.addOrCondition('u_sat_nme','CONTAINS','JSAT');
	grOR.addOrCondition('u_sat_nme','CONTAINS','IS');

	gr.query();

	while (gr.next()) {
		var obj = {};
		var loc = gr.u_orb_loc.toString();
	
		obj.position = '[0.1, ' + loc + ']';
		//obj.name = gr.u_sat_nme.toString().replace('Galaxy ', 'G-').replace('Horizons ', 'H-');
		obj.name = gr.u_sat_nme.toString();
		array.push(obj);		
	}

	data.bird = new global.JSON().encode(array);		

})();

Roger Poore
Tera Guru

I should add that I created that almost 2 years ago and I don't have access to the actual implementation anymore.  Here's another link for reference:  https://developer.servicenow.com/app.do#!/share/contents/7751922_google_maps_now?v=1.02&t=DISCUSSION...

At some point, I played around with using OpenStreetMap rather than Google Maps.  If you're interested, I'll see what I can do about recreating it in my personal dev instance. 

I would be interested in your OpenStreetMap work. 🙂

Carleen Carter
CMA, DEV MVP
https://www.smartcarleen.com/
https://www.linkedin.com/in/carleencarter/

Ok.  Give me a few days....l can't find the damn project anywhere so I have to recreate it.