Google Map JavaScript in VFP implementation for WebView

**quiglyd** · 2022-09-12, 10:18

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!

**barrymavin** · 2022-09-12, 22:25

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().

**HankFay** · 2022-09-12, 22:46

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

Hank

**quiglyd** · 2022-09-13, 20:20

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!

**barrymavin** · 2022-09-14, 02:00

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)")

Thread: Google Map JavaScript in VFP implementation for WebView

Thread Tools

Search Thread

Display

Google Map JavaScript in VFP implementation for WebView

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions

Journey into the Cloud

Join us