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.
