Google Map JavaScript in VFP implementation for WebView

Printable View

2022-09-12, 10:18
quiglyd

Google Map JavaScript in VFP implementation for WebView

I have a VFP form that uses the ActiveX Shell.Explorer.2 class to load a local .html page.

The Internet Explorer shell loads an instance of a Google Map with JavaScript methods that interact and modify the map based on input/events from VFP.

This is based on the work from Rick Strahl: https://west-wind.com/presentations/.../shellapi.html (Specifically, the section "Accessing HTML script from your VFP code" for the example of o.Document.Script.ValidateInput("parameter") )

Are there any examples I can use to create a similar form to be able to call and pass parameters to the JavaScript methods contained in a .rsp file in Lianja?

I have reviewed several of the .rsp examples and the calendar.rsp example seems to have similar concepts that I am looking for, however I need to be able to call the JavaScript code (call methods externally from a data based refresh event in VFP) as well as update and refresh page elements based on input/interaction from the Google Map (which I did by using hidden HTML fields and read them in VFP)

Thank you in advance for any assistance!
2022-09-12, 22:25
barrymavin

Lianja has a built-in Google map gadget which can be dynamically data bound. Look at the Lianjademo example. There is no coding involved in using this.

See doc,

https://www.lianja.com/doc/index.php...WebViewWidgets

Note:

A WebView section exposes the evaluate() method that can execute any internal JavaScript code from LianjaScript/VFP code.

https://www.lianja.com/doc/index.php/Webview#Methods

All WebViews expose the Lianja system object so you can use Lianja.evaluate() inside the WebView events to interact with external code.

https://www.lianja.com/doc/index.php/Lianja

So in your case you can interact with the map from LianjaScript/VFP code using section.evaluate() and call LianjaScript/VFP functions from javascript events within the map using Lianja.evaluate().
2022-09-12, 22:46
HankFay

Given that the map is a Google Map, the JS interfaces noted here might be helpful: https://developers.google.com/maps

Hank
2022-09-13, 20:20
quiglyd

Thank you for the response.

I have modified the googlemap.rsp example file to include the following addition:

Code:

<head> <meta charset='utf-8'> <meta name="viewport" content="initial-scale=1, maximum-scale=1"/> <link rel="stylesheet" href="&m_libpath/jquery.mobile-1.3.2/jquery.mobile-1.3.2.min.css" /> <script src="&m_libpath/jquery-1.10.2/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&key=AIzaSyBHokU4jRNQQFo0-XxFvTDgQBusXcmeRvI"></script> <script src="&m_libpath/jquery.mobile-1.3.2/jquery.mobile-1.3.2.min.js"></script> <script type="text/javascript"> function zoomMap(nZoomLvl) { map.setZoom(nZoomLvl); } </script>

I am trying to interact via a command button with the following code:

Code:

//////////////////////////////////////////////////////////////// // Event delegate for 'click' event proc page1_section4_field2_click() // insert your code here WAIT WINDOW 'TEST' NOWAIT oMap = Lianja.getElementByID("page1.section1.oGoogle") oMap.evaluate("zoomMap(10)") endproc

The button does not give an error, however the zoom function does not fire.

Any thoughts/suggestions are highly appreciated!

Thank you!
2022-09-14, 02:00
barrymavin

Google map gadgets use lib:/showdialog_map.rsp not googlemap.rsp (old legacy usage).

In the file showdialog_map.rsp the map variable is not accessible as its out of scope. I have changed this in Lianja 8 but for the currently shipping 7.1 version you need to edit lib:/showdialog_map.rsp and change the line:

var map = new google.maps.Map(document.getElementById('map_canva s'), {

to

window.map = new google.maps.Map(document.getElementById('map_canva s'), {

This declares the variable global and it will now be accessible using evaluate().

You can check variable access like this from the Command Window:

oMap = Lianja.getElementByID("page1.section1.oGoogle")
? oMap.evaluate("typeof map")

I don't recommend you edit these system library files as they will be overwritten when a new version is installed. Its better to write your own library that wraps evaluate() calls.

In the case of the zoom function you tested you would do this:

oMap.evaluate("map.setZoom(40)")