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
New Contributor
fanfan20032002
Posts: 3
Registered: ‎07-22-2012
My Device: playbook

Geolocation unable to work on real playbook with OS 2.0

I have been trying to develop a navigation Webworks Application based on google maps API. The maps works fine on the browser on desktop as well as the standalone Ripple Emulator. However, when I try to install it on a real playbook, the map does not show on the page, which is really sad since most of my App is built based on that.

Here are my codes:

 this is the config.xml

<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets"
     xmlns:rim="http://www.blackberry.com/ns/widgets"
     version="2.1.0.0" id="BBDriveApp">  
    <name>BBB</name>
	<author>AAA</author>	
    <description>EV Car Display Panel</description>	
	<permission>read_geolocation</permission>
	<feature id="blackberry.ui.dialog" required="true" version="1.0.0"/>	
	
	<access subdomains="true" uri="http://gstatic.com"/>
	<access subdomains="true" uri="http://google.com"/>
	<access subdomains="true" uri="http://googleapis.com"/>

    <description>EV Car Display Panel</description>
    <icon src="icon.png"/>
    <content src="index.html"/>  
</widget>

 And here is the  js file.

// Google Maps globals:
var directionRenderer;
var directionsService = new google.maps.DirectionsService();
var stepDisplay;
var map;
var markerArray = [];

$(document).ready(function () {
	
	directionsRenderer = new google.maps.DirectionsRenderer();
	
			navigator.geolocation.getCurrentPosition(function(position){
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
        var coords = new google.maps.LatLng(latitude, longitude);
        var mapOptions = {
            zoom: 15,
            center: coords,
            mapTypeControl: true,
            navigationControlOptions: {
   			style: google.maps.NavigationControlStyle.SMALL
            },
            mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(
                document.getElementById("map"), mapOptions
                );
            var markerStart = new google.maps.Marker({
                    position: coords,
                    map: map,
                    title: "Start"
            });
			  directionsRenderer.setMap(map);
 
        });
 
    // Set up map starting point for Google Maps.


    
  
	
	function getLatLng(callback) {
    // test for presence of geolocation
    if (navigator && navigator.geolocation) {
        // make the request for the user's position
        navigator.geolocation.getCurrentPosition(function (position) {
            // success handler
            callback(position.coords.latitude, position.coords.longitude);
        },
        function (err) {
            // handle the error by passing the callback the location from MaxMind
            callback(geoip_latitude(), geoip_longitude(), true);
        }
		);
    } else {
        // geolocation not available, so pass the callback the location from
        // MaxMind
        callback(geoip_latitude(), geoip_longitude(), true);
    }
}

 
    // wire up button click
    $('#go').click(function () {
		 // First, clear out any existing markerArray
  		// from previous calculations.
  	for (i = 0; i < markerArray.length; i++) { markerArray[i].setMap(null); }
        // Use our new getLatLng with fallback and define an inline function to
        // handle the callback.
        getLatLng(function (latitude, longitude, isMaxMind) {
            // set the starting point
            var start = new google.maps.LatLng(latitude, longitude);
 
            // get the address the user entered
            var address = $('#address').val();
            if (address) {
                // set end point
                var end = $('#address').val();
    		
                // set the request options
                var request = {
                    origin: start,
                    destination: end,
                    travelMode: google.maps.DirectionsTravelMode.DRIVING
                };
 
                // make the directions request
                directionsService.route(request, function (result, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
 
                        // Display the directions using Google's Directions
                        // Renderer.
                        directionsRenderer.setDirections(result);

						 showSteps(result);
						// Instantiate an info window to hold step text.
  						stepDisplay = new google.maps.InfoWindow();
  				        // output total distance separately
                        var distance = getTotalDistance(result);
                        // output either miles or km
                        var units = $('#units').val();
                        if (units == 'IMPERIAL') {
                            $('#distance').html('Total Distance: <strong>' +
                                metersToMiles(distance) + '</strong> miles');
                        } else {
                            $('#distance').html('Total Distance: <strong>' +
                                metersToKilometers(distance) + '</strong> km');
                        }
 
                    } else {
                        error("Directions failed due to: " + status);
                    }
                });
 
            }
            else {
                error('Please enter an address');
            }
 
             });
    });
 
});
 
function getLatLng(callback) {
    // test for presence of geolocation
    if (navigator && navigator.geolocation) {
        // make the request for the user's position
        navigator.geolocation.getCurrentPosition(function (position) {
            // success handler
            callback(position.coords.latitude, position.coords.longitude);
        },
        function (err) {
            // handle the error by passing the callback the location from MaxMind
            callback(geoip_latitude(), geoip_longitude(), true);
        },
		{maximumAge: 60000}
		);
    } else {
        // geolocation not available, so pass the callback the location from
        // MaxMind
        callback(geoip_latitude(), geoip_longitude(), true);
    }
}
 
// return total distance in meters
function getTotalDistance(result) {
    var meters = 0;
    var route = result.routes[0];
    for (ii = 0; ii < route.legs.length; ii++) {
        // Google stores distance value in meters
        meters += route.legs[ii].distance.value;
    }
    return meters;
}
 
function metersToKilometers(meters) {
    return Math.round(meters / 1000);
}
 
function metersToMiles(meters) {
    // 1 mile = 1609.344 meters
    return Math.round(meters / 1609.344);
}
 
function error(msg) {
    alert(msg);
}
function showSteps(result) {
  // For each step, place a marker, and add the text to the marker's
  // info window. Also attach the marker to an array so we
  // can keep track of it and remove it when calculating new
  // routes.
  var myRoute = result.routes[0].legs[0];

  for (var i = 0; i < myRoute.steps.length; i++) {
      var marker = new google.maps.Marker({
        position: myRoute.steps[i].start_point,
        map: map
      });
      attachInstructionText(marker, myRoute.steps[i].instructions);
      markerArray[i] = marker;
  }
}

function attachInstructionText(marker, text) {
  google.maps.event.addListener(marker, 'click', function() {
    stepDisplay.setContent(text);
    stepDisplay.open(map, marker);
  });
}

 

Here is my html UI to show the map:

<!DOCTYPE html>
<html>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<head>
<title>Navigation </title>
<script src="http://maps.google.com/maps/api/js?sensor=true&language=en"></script>
<script src="https://maps.googleapis.com/maps/api/geocode/output?parameters"></script>
 <script src="http://j.maxmind.com/app/geoip.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>

<style type="text/css">
#map{
    height: 500px;
    width: 800px;
    border:10px solid #eaeaea;
}


</style>

</head>

<body>
<div class="field">
    <label for="address">Enter a Destination Address:</label>
    <input type="text" id="address" />
</div>
 
<div class="field">
    <label for="units">Units:</label>
    <select id="units">
        <option value="IMPERIAL">Miles</option>
        <option value="METRIC">Kilometers</option>
    </select>
</div>
 
<div>
    <input type="button" id="go" value="Get Directions" />
</div>
 
<div id="distance"></div>
<div id="map"></div>
</body>

</html>

 It seems there is something wrong with the getCurrentLocation and I have no idea what could go wrong.

 

Developer
Developer
LBP
Posts: 607
Registered: ‎04-29-2011
My Device: PlayBook 16GB, BB10 LE Z10 (red)
My Carrier: none

Re: Geolocation unable to work on real playbook with OS 2.0

Are you getting any error in the Web Inspector?


"Like" if you liked the post.
"Accept as Solution" if the post solves your question.