Google Maps

1
+1
-1

Hi again,

Now I'm trying to use the Google Maps service, but I don't know how to include it in my process. I have a human task which should show a google map from an address previously introduced in another human task. I guess, I need an HTML widget to declare the space in which the map will be shown, but I need to include a "JavaScript widget" for adding the functionality that makes the map works. I have found a very old example in the comunitty ( example google map ), buy I cannot see the code used, neither how to include JS code, of course. Besides, because of the old date of the link, the Bonita version does not match, and I don't know if there is another way to do that (maybe easier) or not. For example, I'm using version 6.5 [community] and I cannot see the BonitaApplication.html file.

So please, I would thank some help for include google maps in my process and a explanationo about how to add JS code would be great too.

Thanks in advance. Regards.

P.S: An answer to my other posts would be absolutely fantastic, too... help with calendar Connector help creating a spreadsheet connector

Comments

Submitted by yannick.lombardi on Tue, 05/26/2015 - 14:06

Hi.

You can include javascript code in a HTML Widget by using the < script> tag.

For example :

<script>
// add your google map code here
alert('example');
</script>
Submitted by javiermmm.fujitsu on Wed, 05/27/2015 - 08:43

Hi,

Ok, Tha's what I suposse, but How can I code that? I mean I have a code like this:

<script type="text/javascript">
        var directionsService = new google.maps.DirectionsService();
        directionsDisplay = new google.maps.DirectionsRenderer();

        var mapOptions = {
                zoom:7,
                mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map;

        //id_html is identifier of HTML widget

        id_html.setVisible(true);
        var start = document.getElementById("id_direccion").value; //id_souce is identifier of Source

        var end = document.getElementById('id_tecnico').value; //id_destination is identifier of Destination

        map = new google.maps.Map(document.getElementById('dynamic_map'), mapOptions);

        directionsDisplay.setMap(map);

        var request = {
          origin:start,
          destination:end,
          travelMode: google.maps.TravelMode.DRIVING
        };
        directionsService.route(request, function(response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                  directionsDisplay.setDirections(response);
                }
        });
</script>

<div align="left" id="dynamic_map" style="width:500px; height: 300px; margin-top: 10px;">
</div>

This code is in a file in my PC, and what I'm doing is attach this document to the data section of mi htmlWidget (Like it's shown on this picture htmlWidget )

However when I execute the process, in the task which has the form in the image, I get the error Failed to get the list form pages. ("Error al obtener la lista de páginas de formulario", in Spanish) I attach image with the error I get, too: error

What am I doing wrong?

Submitted by Sean McP on Thu, 05/28/2015 - 13:46

Hi Javier,

First things first, again start simple...do a couple of lines at a time and get them to work first.

In this case remove all the code and try the div only, I'm sure you need something else in there too, as div is a placeholder not a data holder, are you missing an img or textbox?

The other thing is script is position dependent, that is divs etc must appear before the JavaScript unless loaded from file With jquery I think you can put it anywhere but don't quote me on that.

So in your example above your doc and scripts are the wrong way round...

I use console.log a lot to get messages from my script, very useful...

Regards

Submitted by javiermmm.fujitsu on Fri, 05/29/2015 - 08:52

Hi,

I'm sure you need something else in there too, as div is a placeholder not a data holder, are you missing an img or textbox?

I'm not sure, I understand you... Why would I need anything else? I've used Google Maps many times before (even in another BPM software) and the only thing I've always needed is a div with a unique id to identify it.

In fact, I'm getting the same error whatever I write in my document. If I write, only something like:

<script>
// add your google map code here
alert('example');
</script>

I get the same error. I've tried to write another simple HTML code like:

<p>HTML Test</p>

And both tries, throw the same error:

Failed to get the list form pages. ("Error al obtener la lista de páginas de formulario", in Spanish) I attach image with the error I get, too: error

So I think, independently of my code, there is something wrong in my Bonita config.

What can I do?

thanks and regards.

Submitted by yannick.lombardi on Fri, 05/29/2015 - 08:59

I don't think that the HTML widget create this error. This may be another wigdet in your form that do create the error. If your form is empty, you can try to delete it and create a new form with only the HTML Widget.

Submitted by javiermmm.fujitsu on Fri, 05/29/2015 - 10:52

Hi yannick,

My form only has the html widget and a button to continue (by default), so I've tried to delete the form and create a new one, but the error is still there. What should I do?

thanks and regards.

Submitted by Sean McP on Fri, 05/29/2015 - 15:32

Create a new process and start again? That's what I do when I have unexplained errors.

BUT, before you do that, I hope you've POC'ed the actual Google Map first? POC = Proof-of-Concept.

Create a ONE step process, and use this to get it to work first before taking the code and making it work in your final process. That way you don't damage the primary function of the process.

So

create new process->create a form on Step 1->RUN add HTML widget->add div code as a constant (or other HTML as required, PS I see what you mean only DIV required)->RUN click on POOL->Application->Look 'n' Feel->click on EDIT for the top HTML page (process layout) add your before the -> save->RUN - check the library is loaded from the website Back to your application page->Add another HTML Widget AT THE BOTTOM OF THE PAGE->add simple script code to start with say

-> RUN and check the Console log...

Go back and change the script

-> RUN and check the Console log...and the form - does the text show? If so then Good, now start adding code till it does what you want and you get to your end result.

I recommend HARDCODING everything first then add variables as required to get to the final result. Why? getting it to work first is challenging, getting it to work after is easy....

Hope that helps, let us know how you get on

regards Seán

Submitted by javiermmm.fujitsu on Mon, 06/01/2015 - 09:37

Hi,

I'll start again trying each and every step... Anyway, it seems like your message has some lack of text:

click on POOL->Application->Look 'n' Feel->click on EDIT for the top HTML page (process layout) add your

before the -> save->RUN - check the library is loaded from the website

Back to your application page->Add another HTML Widget AT THE BOTTOM OF THE PAGE->add simple script code to start with say

-> RUN and check the Console log...

I'll be back with my experiences.

Regards.

Submitted by javiermmm.fujitsu on Mon, 06/01/2015 - 11:09

I'm testing now in another process. The error I have in the other one has gone, but I cannot include de JS I need.

When I try to add the maps script reference like:

in the process layout (process.html). Is it enough? Because I have been testing step by step, an after working only HTML and HTML + simple JS, I'm tryinig to code a very very simple "helloWorld" with Google maps. My code right now is:

<script type="text/javascript">
        function initialize() {
                var mapOptions = {
                        center: { lat: -34.397, lng: 150.644},
                        zoom: 8
                };
                console.log(mapOptions);
                var map = new google.maps.Map(document.getElementById('dynamic_map'),mapOptions);
                console.log(map);
        };
        initialize();
</script>

The javascript console in Chrome says there is an undefined function (which is at line 8, after testing) referring to the map function. So it means, the library is not correctly added (Until the first console.log(), there is no error). I've tried to add it editing the three first options in the 'click on POOL->Application->Look 'n' Feel' panel, but even so the function is not recognized.

Where should I write the script reference to the maps lib?

thanks in advance and regards.

Submitted by yannick.lombardi on Mon, 06/01/2015 - 11:30

To include a js file, I use this :

<script>
$.getScript( "https://maps.googleapis.com/maps/api/js?v=3.ex&callback=initialize" )
        .done(function( script, textStatus ) {
                console.log('init js');
        })
        .fail(function( jqxhr, settings, exception ) {
                console.log("echec chargement js");
        });
</script>

I try to create a simple form with a google map but I have an error "google.maps.event is undefined".

Submitted by Sean McP on Mon, 06/01/2015 - 14:53

for the script in process.html try...

<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?libraries=drawing,geometry,place...>
</script>

and see what happens, this loads all the libraries (supposedly)

regards

Submitted by javiermmm.fujitsu on Mon, 06/08/2015 - 12:05

Hi again,

Let's see: - I've tried the Sean McP's Suggestion but I'm having a Js error that says "Uncaught ReferenceError: google is not defined", what I think is still the problem of not recognizing the library inclusion, referencing the same line and object: google.maps.Map(...). The div is in the code, and in the form it has his own place reserved, but It doesn't work at all. - I've tried too, the yannick's suggestion and I'm a little confused... I'm writting that piece of code just before my google map script, in the Initial Value field of my HTMLwidget, and I'm getting the same error: "Uncaught ReferenceError: google is not defined", but the map is working and my console.log write the mapOptions and map variables correctly after showing the mentioned error.

I think I should use de process.html option, but that's not working. Why is this happening? What method should I use?

thanks in advance and regards.

EDIT: I have another doubt. In order to making the map work, I have been filling the variables, with exact values I wrote, but I will need to put the value of a process variable defined at my pool process into a javascript variable. How can I do that? I've tried something like

var start = ${start_address}

but this isn't working. How can I fill a javascript variable with a process variable value???

Submitted by Sean McP on Mon, 06/08/2015 - 14:49

I've gone through all of this again and have decided there is an issue waiting for the google libraries to load, and in the execution of the code that is dependent on it in that window.onload is not working as expected.

I have opened a bug here if you wnat to add your comments too.

regards Seán

Submitted by Sean McP on Mon, 06/08/2015 - 14:52

EDIT: I have another doubt. In order to making the map work, I have been filling the variables, with exact values I wrote, but I will need to put the value of a process variable defined at my pool process into a javascript variable. How can I do that? I've tried something like

var start = ${start_address}

but this isn't working. How can I fill a javascript variable with a process variable value???

Have a hidden field on the page and access it by using document.getElementByName("myEleName").innerHTML();

or something like that, bare in mind everything is surrounded by DIV - check out the structure of the page to get your real reference to the element...

regards

Submitted by javiermmm.fujitsu on Tue, 06/09/2015 - 10:01

Ok, the bug would explain the behavior for not loading the libraries, but then why is the yannick's solution working, but throwing the same error? I don't understand that...

thanks and regards.

P.S: So... If I need the value of, for example, 7 variables, Do I need to add 7 hidden fields for being able to access it from JavaScript?

EDIT: I've tried to add a couple of not editable text Widget with a variable as the initial value, and I have got the content of these widgets with something so horrifying as:

var start = document.getElementById("Texto1").getElementsByClassName("bonita_form_text bonita_form_static_field_bottom")[0].innerHTML;

However, your idea of hide the widgets, doesn't work. I guess you were referring to the "Insert widget if" option, with a false condition, but then, the widget is not included in the HTML, so the access with getElementBy... returns undefined. Is there any other way to move the value of a variable from a Bonito proces to a javascript variable? Or at least, Is there any way to hide the widgets, including them in the HTML?

thanks again and regards.

Submitted by Sean McP on Tue, 06/09/2015 - 10:21

You edited your response just before I gave my last answer...return the string to a single HTML widget.

Because these fields are not Bonita fields and only yours you should be able to do:

Note: changed the input above to include the id=

"<input type=\"hidden\" id=\"var1\" name=\"var1\" value=\""+myBonitaVariable1+"\">"+
var start = document.getElementById("var1").innerHTML;
var middle = document.getElementById("var2").innerHTML;
var end = document.getElementById("var3").innerHTML;
Submitted by Sean McP on Tue, 06/09/2015 - 10:22

I'm not sure Yannicks's solution is actually working, he says:

I try to create a simple form with a google map but I have an error "google.maps.event is undefined".

It may load the starting library API but it then doesn't seem to work with the lower down modules which are downloaded separately (and hidden).

Re: PS With seven variables - I would do this...

Add an HTML Widget and for data use a script that returns a String as in:

return
"<input type=\"hidden\" name=\"var1\" name=\"var1\" value=\""+myBonitaVariable1+"\">"+
"<input type=\"hidden\" name=\"var2\" name=\"var2\" value=\""+myBonitaVariable2+"\">"+
"<input type=\"hidden\" name=\"var3\" name=\"var3\" value=\""+myBonitaVariable3+"\">"+
etc.;

That way - Only one widget...

regards

Submitted by javiermmm.fujitsu on Tue, 06/09/2015 - 10:30

Ok, I think I've got the idea about the variables question.

About the maps, I don't know what you mean with "working", but I'm using the following as Initial Value in HTMLWidget:

<script>
        $.getScript( "https://maps.googleapis.com/maps/api/js?libraries=drawing,geometry,place...&callback=initialize" )
                .done(function( script, textStatus ) {
                        console.log('init js');})
                .fail(function( jqxhr, settings, exception ) {
                        console.log("echec chargement dataTables");});
</script>
<script type="text/javascript">
        function initialize() {
                var directionsService = new google.maps.DirectionsService();
                var directionsDisplay = new google.maps.DirectionsRenderer();
                console.log(directionsService);
                console.log(directionsDisplay);
               
                var start = document.getElementById("Texto1").getElementsByClassName("bonita_form_text bonita_form_static_field_bottom")[0].innerHTML;
                var end = document.getElementById("Texto2").getElementsByClassName("bonita_form_text bonita_form_static_field_bottom")[0].innerHTML;
                console.log("START:  " + start);
                console.log(end);
               
                var mapOptions = {
                        mapTypeId: google.maps.MapTypeId.ROADMAP,
                        zoom: 8
                };
                console.log(mapOptions);
               
                var map = new google.maps.Map(document.getElementById('dynamic_map'),mapOptions);
                console.log(map);
               
                directionsDisplay.setMap(map);
                console.log(directionsDisplay);
               
                var request = {
                        origin:start,
                        destination: end,
                        travelMode: google.maps.TravelMode.DRIVING
                };
                console.log(request);
               
                directionsService.route(request, function(response, status) {
                        if (status == google.maps.DirectionsStatus.OK) {
                                directionsDisplay.setDirections(response);
                        }
                });
        };
       
        initialize();
       
</script>

<div align="left" id="dynamic_map" style="width:500px; height: 300px; margin-top: 10px;">
</div>

The Javascript console throws: Uncaught ReferenceError: google is not defined

But after that, all console.log function shows the correct values about my variables, and the map takes two variables I've introduced before and marks a route between two address considering driving travel mode. (I attach an image with my view, using this code,)

So, why should I consider that the map is not working? Maybe, I'm not understanding what is the problem...

thanks in advance and regards.

Submitted by Sean McP on Tue, 06/09/2015 - 10:43

Ahhh OK,

I did a quick search, have a look at these - I don't believe the error is too bad, but it is nice to get rid of it...

http://stackoverflow.com/questions/26338704/uncaught-reference-error-google-is-not-defined http://stackoverflow.com/questions/12500654/uncaught-referenceerror-google-is-not-defined

They will help, regards

Submitted by javiermmm.fujitsu on Tue, 06/23/2015 - 11:14

It seems the error is for loading the scripts in an unexpected order. Whatever. I have another question: For testing the code I posted before, I have been using an editor and copying the code directly to the initial value field, however, for making this task more comfortable I would like to put the initial value like the file where I have the code. I've tried to do it with a document variable but then I get the error I posted some posts ago: Failed to get the list form pages. ("Error al obtener la lista de páginas de formulario", in Spanish)

The steps I make are: 1.- Create a document (pool level) 2.- "Link" it with the file where I have the code (I've copied it in ..../workspace/default/attachments) 3.- Select the document in the initial value of the HTML Widget 4.- Boom!

Why is this hapennig? I have lost some step?

thanks in advance and regards.

EDIT: I'm trying to use another google service, in this case google charts, and I'm trying using the same structure I used to make the map work (using the $.getScript() before, and writing the code directly in the initial value field), but in this case the library is not loaded. The code I'm using is working outside Bonita. The code and the errors are: CODE:

<script>
        $.getScript( "https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}&callback=drawChart" )
                .done(function( script, textStatus ) {
                        console.log('init js');})
                .fail(function( jqxhr, settings, exception ) {
                        console.log("echec chargement dataTables");});
</script>
<script type="text/javascript">
        function drawChart(html_id,array_data,array_column,pie_title,chart_width,chart_height) {
                // Create our data table.
                var data = new google.visualization.DataTable();
                for(i=0;i<array_column.length;i++)
                {
                data.addColumn(array_column[i].type, array_column[i].title);
                }

                var array_array_data = new Array();
                for(i=0;i<array_data.length;i++)
                {
                array_array_data.push([array_data[i].label,array_data[i].value]);
                }

                data.addRows(array_array_data);

                var options = {
                        width: chart_width,
                        height: chart_height,
                        is3D: true,
                        title: pie_title,
                        legend: 'none',
                        pieSliceText: 'label',
                        slices: {  
                                0: {offset: 0.2},
                        },
                };

                // Instantiate and draw our chart, passing in some options.
                var chart = new google.visualization.PieChart(document.getElementById(html_id));
                chart.draw(data, options);
        }

        var array_data = [
                                        {"label":"Spain","value":"10"},
                                        {"label":"France","value":"8"},
                                        {"label":"Italy","value":"6"},
                                        {"label":"Germany","value":"4"},
                                        {"label":"Netherlands","value":"2"},
                                        {"label":"Russia","value":"1"}
        ];

        var array_column = [{"type":"string","title":"Country"},{"type":"number","title":"User Score"}];

        var html_id = "chart_div";
        var pie_title = "Countries Score";
        var chart_width = 800;
        var chart_height = 400;

        drawChart(html_id,array_data,array_column,pie_title,chart_width,chart_height);
</script>

<div id="chart_div"><div>

ERRORS: Uncaught ReferenceError: google is not defined Uncaught TypeError: Cannot read property 'DataTable' of undefined

I don't understand why the same method, is not working with a different library. Why could it be?

No answers yet.
Notifications