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


#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.org/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: []


#15

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