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

Web and WebWorks Development

Reply
Developer
wantoun
Posts: 165
Registered: ‎10-04-2010
My Device: P'9982 & Z10
My Carrier: alfa Lebanon

HTML5 App - Google Maps not loading on a Real BlackBerry Deice

Hello,

 

I'm developing an HTML5 for BlackBerry smartphones using WebWorks SDK.

I'm still in the simple UI phase and I need Google Maps for users to be able to choose a place on the map and get it's coordinates.

This works fine in a browser on the computer and on the Ripple simulator. However when I package and sign the app and install it on my BlackBerry Bold 9900, the app loads fine except for the Google Maps div. Nothing loads there, just an empty white space. You can find the html code below.

 

Any help is appreciated. Thank you

 

 

<!DOCTYPE HTML>
<html>
<head>
	<meta name="viewport" content="initial-scale=1.0,user-scalable=no" />
	<title>App</title>
	<link  rel="stylesheet" type="text/css" href="css/style.css"><link />
	<link  rel="stylesheet" type="text/css" href="css/custom-theme/jquery-ui-1.8.18.custom.css"><link />
	<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
	<script type="text/javascript" src="js/general.js"></script>
	<script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=MY-KEY-GOES-HERE&sensor=true">
    </script>
    <script type="text/javascript">
	  var map;
	  var marker;
      function initialize() {
	    var myLatlng = new google.maps.LatLng(-5.889227, 38.49511);
	    var myOptions = {
	      zoom: 10,
	      center: myLatlng,
              streetViewControl: false,
	      mapTypeId: google.maps.MapTypeId.ROADMAP
	    }
	    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	    
	    marker = new google.maps.Marker({
		      position: myLatlng,
		      draggable: true,
		      map: map
		  });
		  	
	    google.maps.event.addListener(map, 'click', function(event) {
		 	placeMarker(event.latLng, event.lat, event);
		});   
	  }
	  	  
	  function placeMarker(location) {
		  marker.setPosition(location);
		  document.getElementById("lat").value = location.lat();
		  document.getElementById("lng").value = location.lng();
		  map.setCenter(location);
	 }
    </script>
</head>
<body onload="initialize()">

<div class="panel">
	<table style="margin-bottom: 5px">
		<tr>
			<td>Latitude</td>
			<td><input type="text" id="lat" name="lat" /></td>
		</tr>
		<tr>
			<td>Longitude</td>
			<td><input type="text" id="lng" name="lng" /></td>
		</tr>
	</table>
	<div id="map_canvas" style="width:100%; height:200px; margin-bottom: 5px"></div>
</div>

</body>
</html>

 

 

Wadi
Please use plain text.
BlackBerry Development Advisor
oros
Posts: 1,556
Registered: ‎04-12-2010
My Device: BlackBerry Z10
My Carrier: Bell

Re: HTML5 App - Google Maps not loading on a Real BlackBerry Deice

Hello Wadi,

 

This is going to be a bit more difficult to test as there are some files (style.css and general.js) which are not provided. Could you break down this application into two basic files:

1) config.xml; and

2) index.html

 

Where index.html is a self-contained HTML page that produces the issue in question? For the sake of producing the issue, it may even be best to leave out the jQuery scripts if possible. Basically we want to minimize the code to a basic sample.

 

If you could then provide the config.xml and index.html files, we'll be able to attempt reproducing the issue and hopefully provide some additional details.

 

Erik Oros

BlackBerry Development Advisor


Erik Oros | @WaterlooErik | eoros@blackberry.com | Developer Issue Tracker

If a reply has answered your question, please click Accept as Solution to help other visitors in the future.
Please use plain text.
Developer
wantoun
Posts: 165
Registered: ‎10-04-2010
My Device: P'9982 & Z10
My Carrier: alfa Lebanon

Re: HTML5 App - Google Maps not loading on a Real BlackBerry Deice

Thank you fo the reply Eric.

Here's the index.html file (I removed everything except for the Google Maps part.

 

<!DOCTYPE HTML>
<html>
<head>
	<meta name="viewport" content="initial-scale=1.0,user-scalable=no" />
	<title>gmaps_app</title>
	<script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=MY-KEY-GOES-HERE&sensor=true">
    </script>
    <script type="text/javascript">
	  var map;
	  var marker;
      function initialize() {
	    var myLatlng = new google.maps.LatLng(33.889227, 35.49511);
	    var myOptions = {
	      zoom: 10,
	      center: myLatlng,
          streetViewControl: false,
	      mapTypeId: google.maps.MapTypeId.ROADMAP
	    }
	    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	    
	    marker = new google.maps.Marker({
		      position: myLatlng,
		      draggable: true,
		      map: map
		  });
		  	
	    google.maps.event.addListener(map, 'click', function(event) {
		 	placeMarker(event.latLng, event.lat, event);
		});   
	  }
	  	  
	  function placeMarker(location) {
		  marker.setPosition(location);
		  document.getElementById("lat").value = location.lat();
		  document.getElementById("lng").value = location.lng();
		  map.setCenter(location);
	 }
    </script>
</head>
<body onload="initialize()">

<div>
	<div id="map_canvas" style="width:100%; height:200px; margin-bottom: 5px"></div>
</div>

</body>
</html>

 And this is the config.xml

<widget xmlns:rim="http://www.blackberry.com/ns/widgets" version="1.0.1" rim:header="RIM-Widget:rim/widget" xmlns="http://www.w3.org/ns/widgets">
  <rim:navigation mode="focus" />
  <name>Gmaps_app</name>
  <description>test app</description>
  <author href="https://github.com/tneil">Wadih Antoun</author>
  <icon src="images\icon.png" />
  <icon src="images\icon.png" rim:hover="true" />
  <rim:loadingScreen backgroundImage="images\background.png" foregroundImage="images\loading.gif" onFirstLaunch="true" onLocalPageLoad="true">
    <rim:transitionEffect type="fadeIn" />
  </rim:loadingScreen>
  <content src="index.html" />
  <access uri="http://chart.apis.google.com" subdomains="true" />
  <feature id="blackberry.ui.menu" />
  <feature id="blackberry.identity" />
</widget>

 

Again, this runs well on the PC browser and the Ripple Simulator, but on my Bold 9900 it just doesn't load.

Wadi
Please use plain text.
BlackBerry Development Advisor
oros
Posts: 1,556
Registered: ‎04-12-2010
My Device: BlackBerry Z10
My Carrier: Bell

Re: HTML5 App - Google Maps not loading on a Real BlackBerry Deice

Hello Wadi,

 

I loaded this onto my own 9900 and also got just a blank white screen. Typically this indicates that something in the JavaScript bombs out.

 

I added some try/catch blocks around the code in the initialize method and sure enough got the following error:

ReferenceError: Can't find variable: google

 

This is being thrown by the following line:

var myLatlng = new google.maps.LatLng(33.889227, 35.49511);

 

I should note that it takes ~3 minutes before the message actually appears. I also modified the config.xml file to white-list all URLs, however that hasn't seemed to make a difference.

<access uri="*" subdomains="true" />

 

I re-tried with the Hello World HTML provided here:

http://code.google.com/apis/maps/documentation/javascript/tutorial.html

 

(Subbing in my API key where required.)

 

I again added a try/catch block to the initailize method and the result was the same. Specifically, I saw the error:

ReferenceError: Can't find variable: google

 

Given the simplicity of the tests, and the white-listing in the config.xml file, I would have expected both samples to work; but by what I see I can only conclude that the <script> include for maps.googleapis.com is for some reason failing; thus the larger issue.

 

I wonder if the script simply has not loaded fully at the time the initialize function is being called and will give the Asynchronously Loading the API approach a try next as outlined in Google's Getting Started guide linked above.

 

In all honesty I'm not sure exactly why this is failing, but will investigate a little deeper and hopefully something makes sense sooner than later.

 

Erik Oros

BlackBerry Development Advisor


Erik Oros | @WaterlooErik | eoros@blackberry.com | Developer Issue Tracker

If a reply has answered your question, please click Accept as Solution to help other visitors in the future.
Please use plain text.
Developer
wantoun
Posts: 165
Registered: ‎10-04-2010
My Device: P'9982 & Z10
My Carrier: alfa Lebanon

Re: HTML5 App - Google Maps not loading on a Real BlackBerry Deice

Thank you for getting back to me with this Eric, I appreciate walking me through the process.

I'll post any updates if I run into anything new, I'm still trying.

Looking forward to any additional info.

Wadi
Please use plain text.
Developer
wantoun
Posts: 165
Registered: ‎10-04-2010
My Device: P'9982 & Z10
My Carrier: alfa Lebanon

Re: HTML5 App - Google Maps not loading on a Real BlackBerry Deice

I ran across this Eric:
http://code.google.com/p/gmaps-api-issues/issues/detail?id=3930

in short: WebWorks has a memory limit, and the app exceeds it when it runs the Google API. It looks like RIM officially stated that Google Maps is not supported in WebWorks... but I'm not sure how accurate this is.
Wadi
Please use plain text.
BlackBerry Development Advisor
oros
Posts: 1,556
Registered: ‎04-12-2010
My Device: BlackBerry Z10
My Carrier: Bell

Re: HTML5 App - Google Maps not loading on a Real BlackBerry Deice

Hello Wadi,

 

I tried with an asynchronous approach, however on the device, the specified callback does not seem to trigger. The loadScript method does complete, but initialize does not get triggered. I waited for ~10 minutes.

 

This could very well mean that the script is simply not loading. Which would explain the failure when the device attempts to leverage the google object in the other approach.

 

The issue you linked had to do with memory management in that the WebKit engine and the Google Maps APIs did not play well within the memory limit of a WebWorks application. I remember seeing the thread from before and the RIM people that provided that information before would certainly know their stuff.

 

I was hopeful that since we weren't actually seeing an Out of Memory error that we could get this to work, however based on the behaviour, and lack of callback being invoked during the asynchronous approach, it simply seems that the device is not loading the script. There isn't any error that I can identify as to where this loading is cut-off, however it does seem to reflect the statement that Google Maps aren't supported in a WebWorks application. Unfortunately I'm not sure how to work around this issue as the basic APIs are simply not working.

 

I also have a feeling that should be be able to load a map, it would shortly thereafter be followed by an out of memory error as noted in your link and the corresponding thread (found it here).

 

Erik Oros

BlackBerry Development Advisor


Erik Oros | @WaterlooErik | eoros@blackberry.com | Developer Issue Tracker

If a reply has answered your question, please click Accept as Solution to help other visitors in the future.
Please use plain text.
Developer
wantoun
Posts: 165
Registered: ‎10-04-2010
My Device: P'9982 & Z10
My Carrier: alfa Lebanon

Re: HTML5 App - Google Maps not loading on a Real BlackBerry Deice

This is very unfortunate. I was excited to develop a WebWorks app, and it seemed to have such potential but I have to say without a map, my app won't be as useful or easy to use. By the way, I tried Bing maps and you get the same issue.

Thanks again for your help Erik. I hope this gets managed somehow by RIM and I'll keep any eye out if I find any work arounds.
Wadi
Please use plain text.
Developer
shnuffy
Posts: 268
Registered: ‎08-19-2009
My Device: Bold 9700

Re: HTML5 App - Google Maps not loading on a Real BlackBerry Deice

Unfortunately, it won't ever be possible for OS 5.0 due to the "physical limitations" of memory the OS enforces on browser fields (and therefore WebWorks). OS 6.0 and 7.0 have more memory, and tend to be able to handle GMaps, but it's not guaranteed. BB 10 is supposed to have modern (!) memory management and be able to handle Google Maps, so in 5 years, when the majority of BB users have BB 10, you'll be set.

Please use plain text.
Contributor
dsokhan
Posts: 36
Registered: ‎07-06-2010
My Device: Blackberry Playbook tablet
My Carrier: MTS

Re: HTML5 App - Google Maps not loading on a Real BlackBerry Deice

I have the same troubles as oros described before. I've tried on Bold 9900 with 7.0 OS. Also tried the same code on playbook, and it was working fantastic. So as i understand developers can forget about using google maps on all smartphones untill BB10 devices will come on the market?

Please use plain text.