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
Posts: 10
Registered: ‎05-20-2013
My Device: Z 10
My Carrier: Blackberry

WebView Post message

[ Edited ]

Hi,

 Iam trying to create google Map using webView and javaScript.I want to pass the latitude and longitude (which is the center of the map) to the webView.Iam using postMessage function.

 

My problem is:

 

PostMessage function seems to be fired only here:

 onLoadingChanged: {
               if (loadRequest.status == WebLoadStatus.Succeeded) 
                    {
                            webView.postMessage(Latitude)
                     } 
                }

 It is not getting fired on  onCreationCompleted:   or   WebLoadStatus.Started.As it is getting fired after the webView is getting loaded Iam not getting the lat long to set ad the center of the map.

 

My question is :

 

Is it is possible to post message to webView before it is succeded.

 

any one plz plz help me out.Iam stucked here Smiley Sad

New Developer
Posts: 20
Registered: ‎07-21-2013
My Device: Q10
My Carrier: VZW

Re: WebView Post message

[ Edited ]

The most efficient way is to make the Google Map inside the webview (which is running a separate javascript interpreter instance for that page) load your lat/lon pair as its initial location (instead of having it try to find you first and then change later to the new center). This is very easy to do with the Maps JS API, but we would have to see your current JS code (the one that loads the google map) to know where to help you insert the lat/lon pair.

 

In other words, I think the solution to your problem may be solved in a better way than "post message to webView before it is succeeded."

Contributor
Posts: 10
Registered: ‎05-20-2013
My Device: Z 10
My Carrier: Blackberry

Re: WebView Post message

Thank you for the response. 

 

The JS code I use to load the map is below.

 WebView {
            id: webView
            onLoadingChanged: {
               
                if (loadRequest.status == WebLoadStatus.Started) 
                {
          
                    
                } else if (loadRequest.status == WebLoadStatus.Succeeded) 
                {
                    console.log("Load success." + latitude+title)
                    var pass_data = {
                        'Heading': title,
                        'Address': address,
                        'duLatitude': latitude,
                        'duLongitude': longitude,
                        'currentLatitude': currentLatitude,
                        'currentLongitude': currentLongitude
                    }
                    webView.postMessage(JSON.stringify(pass_data));

                }
            }
            onMessageReceived: {
                hai.setText(message.data);
            }

            html: "
           <!DOCTYPE html>
           <html>
           <head>
           <script type='text/javascript'>
          
    <meta name='viewport' content='initial-scale=1.0, user-scalable=no'>
    <meta charset='utf-8'>
    <title>Directions service</title>
    <link href='http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.0/src/infobox_packed.js'></s...
    //<script src='https://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js'></script>
    <link href='https://maps/documentation/javascript/examples/default.css' rel='stylesheet'>
    <script src='https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true'></script>    
    <script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

           var heading; 
           var address;
           var duLatitude;
           var duLongitude;
           var currentLat;
           var currentLongi;
         
         
         navigator.cascades.onmessage = function test(message)
         {
             
         var JSONObject = JSON.parse(message);    
         heading = JSONObject.Heading;
         address = JSONObject.Address;
         duLatitude = JSONObject.duLatitude;
         duLongitude = JSONObject.duLongitude;
         currentLat = JSONObject.currentLatitude;
         currentLongi = JSONObject.currentLongitude;
         
         navigator.cascades.postMessage(duLatitude + duLongitude+heading);
         }
 
          
var duLatitude = 55.930
var duLongitude = -3.118

var currentLat = 50.087
var currentLongi = 14.421

//var duLocation1 = new google.maps.LatLng(duLatitude1, duLongitude1);

  var duLocation = new google.maps.LatLng(duLatitude, duLongitude);
  var currentlocation = new google.maps.LatLng(currentLat, currentLongi);

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var mapOptions = {
    zoom:4,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: duLocation
  }
            
            
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);


 directionsDisplay.setMap(map);
 directionsDisplay.setOptions( { suppressMarkers: true } );

  var infowindow = new google.maps.InfoWindow({
      content: heading,
      maxWidth: 200

  });

  var duLocationMarker = new google.maps.Marker({
      position: duLocation,
      map: map,
      icon: image,      
  });

 var currentLocationMarker = new google.maps.Marker({
      position: currentlocation,
      map: map,     
  });

  google.maps.event.addListener(duLocationMarker, 'click', function()
{
      var infowindow = new google.maps.InfoWindow({
      content: heading,
      maxWidth: 200

  });
    infowindow.open(map,duLocationMarker);
    navigator.cascades.postMessage(heading);
   

  });

}
            

function calcRoute() {
    
  var request = {
      origin:duLocation,
      destination:currentlocation,
      travelMode: google.maps.DirectionsTravelMode.DRIVING
  };
            
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>

 <style>
 #map-canvas{
 position:absolute;
left:20px;
 top:20px;
 z-index:-1;
 width: 700px;
 height: 1280px;
 }
            
 </style>

  </head>
  <body>
    <div id='panel'>
     
      <input type='button' value='Plot' onclick='calcRoute()'>
    </div>

    <div id='map-canvas'></div>
 <div id='popup-div'></div>

  </body>
</html>	"
        } //web

The problem is when using these coordinates as the center of the map and loads it. I use the function postMessage to send the coordinates to webview from our qml file. But we get the coordinates in the webview only when the webview loading is finished. 

 In this, I get the values only in the else if

(loadRequest.status == WebLoadStatus.Succeeded) 

condition. Because of this, the webview is not getting the coordinates before it is loaded, so the map is not getting loaded.  

New Developer
Posts: 20
Registered: ‎07-21-2013
My Device: Q10
My Carrier: VZW

Re: WebView Post message

On loadStatus.STARTED, the DOM is not ready yet, so you cannot manipulate page elements yet (hence the wait until loadStatus.SUCCEEDED. However, the Javascript World has been created, including the global "window" object. One way to fix your issue is to delete these four lines from your innermost js in the html:

 

           var duLatitude;
           var duLongitude;

var duLatitude = 55.930
var duLongitude = -3.118

 And instead, pre-set these values as globals on the window object before the page even loads with something like:

                if (loadRequest.status == WebLoadStatus.Started) 
                {
                    webView.evaluateJavascript('window.duLatitude = ' + latitude + ';');
                    webView.evaluateJavascript('window.duLongitude = ' + longitude + ';');
                } else if (loadRequest.status == WebLoadStatus.Succeeded) 
                {
                    ...
                }

 This way, they will already exist when you construct your map the first time without having to hard-code values into the inner JS.

 

Then you can change your innermost 

navigator.cascades.onmessage

to just call something like map.panTo(lat, lon) to re-center the map as necessary.