How to define a custom script in config.js so I can use Google Maps

Camunda Platform 7 Topics Cockpit / Tasklist / Admin & Web C7
1

Hello everyone

I’m embedding a Google Map into an embedded User Task form.

<form class="form-horizontal">
	<div>
		<input type="text" id="iLat1" placeholder="latitude, eg -34" onchange="fMap1()" ng-model="vLat1">
		<input type="text" id="iLon1" placeholder="longitude, eg 19" onchange="fMap1()" ng-model="vLon1">
		<div id="iMap1" style="width:100%;height:300px;" ng-show="vLat1 && vLon1"></div>
		<script>
			function fMap1() {
				var vLat = document.getElementById("iLat1").value;
				var vLon = document.getElementById("iLon1").value;
				var mapOptions = {
					zoom: 8,
					center: {lat:parseFloat(vLat),lng:parseFloat(vLon)},
				};
				map = new google.maps.Map(document.getElementById('iMap1'), mapOptions);
			};
		</script>
        <script async defer type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=KEY"></script>
	</div>

It works successfully, however :
1 the api is sourced each time the form is rendered, causing errors
2 I do not have access to the Angular $scope variables and is compelled to use document.getElementById

I’ve read all the references to adding custom scripts in config.js, but for the life of me i just cannot figure out how to configure it. What are the values for ngDeps, deps and paths?

https://forum.camunda.io/t/form-failure-google-is-not-defined-google-maps-api-in-forms/475/2?u=eugene

https://docs.camunda.org/manual/latest/webapps/tasklist/configuration/#custom-scripts

https://groups.google.com/forum/#!topic/camunda-bpm-users/HxiwfDKEOlY

If anyone can please help, even the tiniest hint will be much appreciated.

3

Thanks @hassang. I’ll attempt it tomorrow and let you know how I fared.

4

You don’t need to set values for ngDeps as it is used for AngularJS module names (no angularjs modules in your case)

Try the following…

deps: [‘gmaps’],
paths: {
‘gmaps’: ‘https://maps.googleapis.com…’
},

I’ve tried the above advice but still do not know how to reference the sourced code.

I defined a custom script in config.js :

customScripts:{deps: [‘gmaps’],paths: {‘gmaps’: ‘https://maps.googleapis.com/maps/api/js?key=KEY’}},

and then tried to access it from the embedded form in a cam-script type=“text/form-script” script :

var mapOptions = {
zoom: 8,
center: {lat:parseFloat(-34.0),lng:parseFloat(18.45)},
};
map = new google.maps.Map(document.getElementById(‘iMap1’), mapOptions);

but get an error saying ‘google is not defined’.

All the forum threads related to this topic invariably seem to feature @sebastian.stamm. Somehow I believe you’d know exactly what to do.
Please, any advice will be much appreciated.

5

Hi @eugene,

As google apis script is non-AMD script then use shim with exports config to specify the global ‘google.maps’ as module value

    deps: ['gmaps'],
    paths: {
       'gmaps': 'https://maps.googleapis.com/maps/api/js?'
    },
    shim: {
       'gmaps' : {exports: 'google.maps'}
    }

http://requirejs.org/docs/api.html#config-shim

6

Thanks so much for your response @hassang.

I’ve tried your recommendations, but just cannot get it to work. I use the 7.9 distribution and Chrome 67.

I’ve removed all superfluous code to make sure nothing else is introducing or causing the error:

config.js.

  1. Notice that I’ve changed the ‘window.camTasklistConf = {’ to ‘var camTasklistConf = {’.
  2. I’ve removed my API key and replaced it with KEY
var camTasklistConf = {
  customScripts:{
    deps:['gmaps'],
    paths:{'gmaps':'https://maps.googleapis.com/maps/api/js?key=KEY'},
    shim:{'gmaps':{'exports':'google.maps'}}
  }
};

I then try to access the api in my embedded UserTask form

<!DOCTYPE html>
<form class="form-horizontal" role="form" name="nForm" id="iForm">
	<div id="iMap1" style="width:100%;height:300px;"></div>
	<script cam-script type="text/form-script">
		var mapOptions1 = {zoom: 8,center: {lat:parseFloat(-34.0),lng:parseFloat(18.45)}};
		var map1 = new google.maps.Map(document.getElementById("iMap1"), mapOptions1);
	</script>
</form>

However, I get this error in the console

require.js:1 Error: [$injector:nomod] Module ‘cam.tasklist.custom’ is not available!

7

Hi @eugene…

Why you have changed ‘window.camTasklistConf’?
Try it as it… Please…

8

Hello @hassang

I’ve noticed the var vs window several places and thought I’ll investigate whether it is causing my problems:

http://requirejs.org/docs/api.html#config-shim Note: It is best to use var require = {} and do not use window.require = {}, it will not behave correctly in IE.

The error code remains the same irrespective of var or window.

9

Hi @eugene
Please… Try https://maps.googleapis.com/maps/api/js?
Without the key parameter

10

Hello Hassang

I get the same error message, and in addition the following warninig : Google Maps JavaScript API warning: NoApiKeys

11

Hi @eugene,
Could you please upload your config.js file…

12

Hi Hassan.
It is identical to the above code snippet. So is my form’s .html.
The API key has no impact on the error, so it’s not necessary for a key to reproduce the error.

13

Hi @eugene,
My test worked with no errors on version 7.6 but I had one custom angular module added to ngDeps

14

Hi @eugene,
Try to se ngDeps to an empty array… as below
ngDeps: []

3 Likes
15

Voila !!
It works. Thanks so much @hassang for all your assistance.