Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

Reply
Contributor
JUhrig
Posts: 31
Registered: ‎09-25-2012
My Device: N/A
My Carrier: Rogers
Accepted Solution

WebView + GoogleMaps , not sure I understand QML to js connection

Hi all,

 

I am not 100% on how to use evaluateJavaScript() function from QML to invoke external js code in the WebView. I am currently attempting to strip down the cascades tutorial mapWebView. The problem I am runniong into is that I can not seem to call the function zoomIn() or zoomOut from my QML.

 

Here is what I have dont to the example so far.

 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>

<script type="text/javascript" src="local:///assets/mapfunctions.js"></script>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=<key_removed>&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
initMap();
}
</script>

</head>
<body onload="initialize()">
<div id="map-canvas" style="width: 100%; height: 100%"></div>
</body>
</html>

 

The external JavaScript file (mapfunctions.js)

 

var map;

function initMap() {

var polyOptions = {
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 3
};

var mapOptions = {
center: new google.maps.LatLng(43.449766, -80.406096),
zoom: 8,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

poly = new google.maps.Polyline(polyOptions);
poly.setMap(map);

//Listeners
google.maps.event.addListener(map, 'click', addLatLng);

}

/**
* Handles click events on a map, and adds a new point to the Polyline.
* @param {google.maps.MouseEvent} event
*/
function addLatLng(event) {

var path = poly.getPath();

// Because path is an MVCArray, we can simply append a new coordinate
// and it will automatically appear
path.push(event.latLng);

}

function zoomIn() {
map.zoomIn(map.getZoom() + 1);
}

function zoomOut() {
map.zoomOut(map.getZoom() - 1);
}

 

The WebView im trying to create in QML (RouteMapView.qml)

 

import bb.cascades 1.0

Container {
id: root
property int height
property int width

layout: AbsoluteLayout {}

function zoomIn() {
var script = "zoomIn()"
mapView.evaluateJavaScript(script, JavaScriptWorld.Normal);
}
function zoomOut() {
var script = "zoomOut()"
mapView.evaluateJavaScript(script, JavaScriptWorld.Normal);
}

WebView {
id: mapView

preferredHeight: height
preferredWidth: width
url: "local:///assets/routemap.html"

gestureHandlers: [
PinchHandler {
property variant initial
onPinchUpdated: {
if (! initial) {
initial = event.distance;
}
if ((event.distance - initial) / 50 > 1) {
initial = event.distance;
root.zoomIn();
} else if ((event.distance - initial) / 50 < -1) {
initial = event.distance;
root.zoomOut();
}
}
}
]
}
}

 

 

Thanks in advance for any help :smileyhappy:

 

-J

 

 

 

Please use plain text.
Developer
yaolei
Posts: 19
Registered: ‎03-28-2013
My Device: www
My Carrier: www

Re: WebView + GoogleMaps , not sure I understand QML to js connection

I think the function should code in the WebView. Like this:

 

WebView{

id : mapView

function zoomIn(){}

function zoomOut(){}

}

 

Please use plain text.
Developer
yaolei
Posts: 19
Registered: ‎03-28-2013
My Device: www
My Carrier: www

Re: WebView + GoogleMaps , not sure I understand QML to js connection

Use the mapView.zoomIn() to call.

Please use plain text.
Contributor
JUhrig
Posts: 31
Registered: ‎09-25-2012
My Device: N/A
My Carrier: Rogers

Re: WebView + GoogleMaps , not sure I understand QML to js connection

[ Edited ]

Thanks for the reply, but this did not solve the issue I am still unable to call the external js function from QML

Please use plain text.
Developer
yaolei
Posts: 19
Registered: ‎03-28-2013
My Device: www
My Carrier: www

Re: WebView + GoogleMaps , not sure I understand QML to js connection

Sorry, i don't watch clearly.I think you you should  the functions in the js.

 

function zoomIn() {
map.setZoom(map.getZoom()+1);
}

function zoomOut() {
map.setZoom(map.getZoom()-1);
}

 

replace the old code. Try it.

Please use plain text.
Contributor
JUhrig
Posts: 31
Registered: ‎09-25-2012
My Device: N/A
My Carrier: Rogers

Re: WebView + GoogleMaps , not sure I understand QML to js connection

Thank you very much sir that was the issue
Please use plain text.