Integrate Google Maps with BPM Coach View

Introduction

Google makes available a technology for showing maps of various types inside a web page. This service from Google provides a wealth of features beyond just the simple display of the map. These features include placing markers, calculating directions, geolocation and much more. This Coach View provides a wrapper around the Google Maps technology such that it can be included within a Coach without the consumer having to learn the Google Maps technologies directly.

Using Coach View presents a Google Map with abilities to interact with that map. I am going to show how we can build Google map in Coach View.

Implementation

Before starting implementation of Google Map with Coach View, we should have below tools.

Ø  IBM BPM.

Ø  Google Account.

Before implementing IBM BPM code, we should have Google account, than we should get a Google API key for using Google map in our coach view.

Get the Google Map API key from

https://developers.google.com/maps/documentation/embed/guide#api_key

Create Process Application and upload images:

Open Process Designer and click on Create New Process App à Enter following details.

Process Application Name

Acronym

Enter description under documentation (Optional) as shown below.

Open the Google Map App process Application and select + symbol beside Files. Select the Image file (google Map image which can be downloaded in internet).

 

Create a Coach View

Click on + symbol beside User Interface select Coach View. Enter the Name as ‘Google Map CV’ then click on Finish.

 

Now it will open Coach View editor view. Select Layout Tab, drag the Custom HTML into pallet and enter below code under Properties à HTML à Text

 

Select Inline CSS under Behaviour tab and enter the below code as shown below.

 Select Load under Behaviour tab and enter the below code as shown below.

Select Overview tab and select Pallet Icon and layout Image which we have uploaded in first step.

Create a Human Service

Click on + symbol beside User Interface select Client Side Human Service. Enter the Name as ‘Google Map CHS’ then click on Finish.

 

Select Diagram Tab, drag a Coach into pallet and rename as Google Map than connect from Start to Coach and Coach to End node.

Select Coach Tab or double click on Google Map Coach. Drag Google Map CV from views to pallet as shown below.

Now we have implemented Google map using Coach View. We are ready to test our application now.

Test Application

Open Google Map CHS human service and click on Run button at top right corner as shown below.

 

Now we should able to see the google map location which was given default in our code.

Now we can enter location which we need to see in google map and click on geocode. I entered as ‘London’, now google map is updated location as London as shown below.

Download

S. No	File Name	Size	Download
1	Integrate Google Maps with BPM Coach View	600 KB	Download