How to integrate Google maps & charts with newlook

Posted by Rasmiya Cader on Dec 17, 2013 10:04:54 PM

    

Google maps can be integrated with newlook screens to assist users to find an address, view maps, or get driving directions. 

To add a Google map we can either embed the Microsoft Web Browser activeX control in a form and use its navigate method to browse directly to the relevant Google maps URL, or we can open maps in a separate browser window using the OpenHyperlink action or method.

 

Embedding the Web Browser control 

To use this method you need to insert the “Microsoft Web Browser" activeX control onto your form in designer. Give the control a name and then create a scrip or macro to call the control's navigate method with the Google maps URL you wish to open. Typically you would pass some custom address information to the location parameter of the URL.

For example:

ActiveForm.activeXcontrolName.Navigate

"https://maps.google.com/maps?q=Address &output=embed"

Note the output parameter in the URL which allows you to embed just the map without the rest of the Google maps page.

The web browser control can be embedded into a host screen, an added custom form or a master form depending on your requirements, see Figure 1.

 

Ras-googlemaps-host-smartclient-example-IBMi

Figure 1: shows a working example of Google maps running in the Microsoft Web Browser activeX control on a host screen in smartclient.


ras-google-soarchitects-macro-editor

Figure 2: shows the macro that calls the control's navigate method.


Using OpenHyperlink to spawn a new browser session

Spawning a new browser session allows the user to open their host session and Google map, side by side, and allows the user to easily resize and move the map around. 

One of the simplest ways to do this is to insert a clickable control, such as a command button, within designer, give the control a name and then use its OnClick property to run an OpenHyperlink macro or script. The OpenHyperlink action would specify the Google maps URL containing the relevant location.

newlook-screen-with-address_details

Figure 3: newlook screen with address details


using-URL-directly-to-spawn-a-new_browser

Figure 4: shows a working example of the address details in Figure 3 opened in Google maps within a new browser window.

 

Integrating Google maps with lookserver

Launching external URLs in a thin (HTML) environment is a bit different. 

To add a Google map in lookserver you first need to add a label control to the screen. The caption property of the label must be set to a valid HTML link. When rendered in the browsers, this caption will display as a clickable link. Viewing the caption in the IDE or smartclient will display only the raw HTML. 

For example:  href="http://maps.google.com/maps?q=vAddress

 

Integrating Google Charts

A simple way to integrate Google charts with your screens is to create a HTML page containing your desired chart and pass it the relevant data using JSON. 

The HTML page could be deployed with your solution files or located on a web server. A script could then be used to read data from the host screen and pass it to a text file that the HTML file uses as its input source.

The chart could be launched as a separate web page or could be embedded in your form via the use of the Microsoft Web Browser activeX control, pointing to your HTML page.

 

google-charts-in-smartclient

Figure 5: shows a working example of an embedded Google chart running in smartclient.
 

For more information on the various Google charts that are available refer to the following website:

https://google-developers.appspot.com/chart/interactive/docs/index

There are also plenty of good Google maps reference sites which explain the various parameters available for use. 

If you would like a sample of any of the above google maps or charts examples please send a request to support@looksoftware.com

 

Blog Author
Rasmiya Cader
looksoftware support

Topics: Application Integration, newlook, looksoftware