I am trying to add a google map to my android tablet to detect where the terminal is.But the map is not displayed completely. only a small part was displayed. and after rotate the screen, it can displayed perfectly.
I did all this according to http://www.digitalnoiz.com/mobile-development/geolocation-jquery-mobile-maps/
This is my html code:
<head>
<link href='stylesheets/jquery.mobile-1.1.0.css' rel='stylesheet' />
<link href='stylesheets/my.css' rel='stylesheet' />
<script charset='utf-8' src='javascripts/jquery/jquery-1.7.1.min.js' type='text/javascript'></script>
<script charset='utf-8' src='javascripts/jquery.ui.map.min.js' type='text/javascript'></script>
<script charset='utf-8' src='http://maps.google.com/maps/api/js?sensor=true' type='text/javascript'></script>
<script charset='utf-8' src='javascripts/application.js' type='text/javascript'></script>
<script charset='utf-8' src='javascripts/jquery/jquery.mobile-1.1.1.js' type='text/javascript'></script>
<script type="text/javascript" charset="utf-8" src="javascripts/phonegap/cordova-2.0.0.js"><\/script>
</head>
<body>
<!-- Diagnostic -->
<div data-role='page' id='diagnostic_page'>
<div data-position='inline' data-role='header' data-theme='a'>
<h2>
Diagnostic
</h2>
<a data-icon='arrow-l' href='#index_page'>
Back
</a>
<a data-role='button' href='#diagnostic_page' id='PageRefresh'>
Refresh
</a>
</div>
<div data-role='content' style='padding: 15px'>
<ul data-divider-theme='a' data-inset='true' data-role='listview'>
<!--there are some other list variables-->
<li data-theme='c'>
Show current location:
<a class='classspan' href='#location_page'>
Click on me
</a>
</li>
</ul>
</div>
</div>
<!-- show current location -->
<div data-role='page' data-theme='c' id='location_page'>
<div data-position='fixed' data-role='header' data-theme='a'>
<a data-icon='arrow-l' href='#diagnostic_page'>
Back
</a>
<h2>
DigitalNoiz
</h2>
<div data-role='header'></div>
Geolocation
<div id='map_canvas'></div>
<div id='geolocation'></div>
</div>
</div>
</body>
This is my Jquery code, all my function code are edited in application.js.
function onLoad() {
console.log('Init reached');
$.mobile.allowCrossDomainPages = true;
$.mobile.showPageLoadingMsg();
$.support.cors = true;
document.addEventListener('deviceready', onDeviceReady, false);
}
function onDeviceReady() {
console.log('Starting up...');
// navigator.app.overrideBackbutton(true);
document.addEventListener("backbutton", onBackKeyDown, false);
console.log('Initializing db');
refreshpage();
getPosition();
}
function getPosition(){
var geoOptions = { enableHighAccuracy: true, timeout: 10000 };
navigator.geolocation.getCurrentPosition(function(position){ // geoSuccess
// we have the position
var geolocation = $('#geolocation');
geolocation.html('<table></table>');
var table = geolocation.find('table');
if(position.coords.latitude)
table.append('<tr><th>Latitude</th><td>' + position.coords.latitude + '</td></tr>');
if(position.coords.longitude)
table.append('<tr><th>Longitude</th><td>' + position.coords.longitude + '</td></tr>');
if(position.coords.altitude)
table.append('<tr><th>Altitude</th><td>' + position.coords.altitude + '</td></tr>');
if(position.coords.accuracy)
table.append('<tr><th>Accuracy</th><td>' + position.coords.accuracy + '</td></tr>');
if(position.coords.altitudeAccuracy)
table.append('<tr><th>Altitude Accuracy</th><td>' + position.coords.altitudeAccuracy + '</td></tr>');
if(position.coords.heading)
table.append('<tr><th>Heading</th><td>' + position.coords.heading + '</td></tr>');
if(position.coords.speed)
table.append('<tr><th>Speed</th><td>' + position.coords.speed + '</td></tr>');
if(position.coords.timestamp)
table.append('<tr><th>Timestamp</th><td>' + new Date(position.timestamp) + '</td></tr>');
//show position on map
var map_canvas = $('#map_canvas');
map_canvas.gmap(
{'center' : position.coords.latitude + ',' + position.coords.longitude,
'zoom' : 12,
'disableDefaultUI':true,
'callback':function(){
var self = this;
var marker = self.addMarker({ 'position' : this.get('map').getCenter() });
marker.click(function(){
self.openInfoWindow({ 'content' : 'This is your current location' }, this);
});
}
});
}, function(error){ // geoError
navigator.notification.alert('error: ' + error.message + '\n' + 'code: ' + error.code);
}, geoOptions);
}
Can anybody could give me some advices?
I had this too (especially in Chrome on the desktop) and solved it by resizing the map when it had finished rendering (in 'idle' state):
google.maps.event.addListenerOnce(map, 'idle', function() {
google.maps.event.trigger(map, 'resize');
});
Give your map div a size ( both width and height):
<div id='map_canvas' style="width:400px; height:500px"></div>
Related
I have created a phonegap app and I added Android platform to it. But unfortunately, deviceready event is not getting fired. It works fine on ripple emulator but it is not working on chrome (desktop) and on the android phone as well.
If I run it on chrome (desktop) or my Android L phone, I get the error gap:
["Device","getDeviceInfo","Device1231860141"]
and the browser as well as NetBeans hangs.
I have the cordova.js file in my www folder. I tried removing it, and the error goes away, but deviceready is still not fired.
The following is my code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=320, user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" href="js/libs/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css"/>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/libs/jquery/jquery.js"></script>
<script type="text/javascript">
function init(){
document.addEventListener("deviceready", onDeviceReady, true);
}
function onDeviceReady() {
startWatch();
}
// Start watching the acceleration
//
function startWatch() {
// Update acceleration every 3 seconds
var options = { frequency: 3000 };
watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options);
}
// Stop watching the acceleration
//
function stopWatch() {
if (watchID) {
navigator.accelerometer.clearWatch(watchID);
watchID = null;
}
}
// onSuccess: Get a snapshot of the current acceleration
//
function onSuccess(acceleration) {
var element = document.getElementById('accelerometer');
element.innerHTML = 'Acceleration X: ' + acceleration.x + '<br />' +
'Acceleration Y: ' + acceleration.y + '<br />' +
'Acceleration Z: ' + acceleration.z + '<br />' +
'Timestamp: ' + acceleration.timestamp + '<br />';
}
// onError: Failed to get the acceleration
//
function onError() {
alert('onError!');
}
</script>
</head>
<body onload="init()">
</body>
</html>
deviceready is a cordova event it will not work in browser.
...
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, true);
function onDeviceReady() {
startWatch();
}
...
</script>
</head>
<body onload="onDeviceReady()">
</body>
</html>
I am buiding an app with Cordova 3.6.3 in netbeans and trying to emulate with Ripple 0.9.15.
Whenever I run the code I keep getting:
Uncaught TypeError: Cannot read property 'fire' of undefined ripple.js:40
deviceready has not fired after 5 seconds. cordova.js:1168
Channel not fired: onPluginsReady cordova.js:1161
Channel not fired: onCordovaReady
The code is supposed to access the file system, create some files and display them in
a listview. Here it is:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Directory Reader</title>
<meta name="viewport" content="user-scalable=no,
initial-scale=1, maximum-scale=1,
minimum-scale=1, width=device-width" />
<link rel="stylesheet" href="css/jquery.mobile-1.4.3.min.css" />
<script type="text/javascript" src="js/libs/jquery/jquery-1.10.0.min.js"></script>
<script src="js/libs/jquery-mobile-1.4.3/jquery.mobile-1.4.3.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {navigator.alert('file access');
window.requestFileSystem(
LocalFileSystem.PERSISTENT,
0, onFileSystemSuccess, fail
); navigator.alert('file access');
}
function onFileSystemSuccess(fileSystem) {
// Create some test files
fileSystem.root.getDirectory("myDirectory",
{create: true, exclusive: false},
null, fail);
fileSystem.root.getFile("readthis.txt",
{create: true, exclusive: false},
null, fail);
var directoryReader = fileSystem.root.createReader();
// Get a list of all the entries in the directory
directoryReader.readEntries(success, fail);
}
function success(entries) {
var i;
var objectType;
for (i = 0; i < entries.length; i++) {
if (entries[i].isDirectory === true) {
objectType = 'Directory';
} else {
objectType = 'File';
}
$('#directoryList').append('<li><h3>' + entries[i].name + '</h3><p>' + entries[i].toURI() + '</p><p class="ui-li-aside">Type:<strong>' + objectType + '</strong></p></li>');
}
$('#directoryList').listview("refresh");
}
function fail(error) {
alert("Failed to list directory contents: " + error.code);
}
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h2>Directory Reader</h2>
</div>
<div data-role="content">
<ul id="directoryList" data-role="listview"
data-inset="true">
</ul>
</div>
</div>
</body>
</html>
Please what can I do?
Please what could the problem be?
Let me first start by saying that I have seen a lot of these questions, and many of them just says it <script src="cordova-x-x-x.js"></script> and some says not include the cordova.js file into Phonegap Build.
So I have been testing and fixing my code for some time now, and still getting the error from onError function. I have also copied and pasted the code from phonegap docs.
So here's the clean code from the url:
<!DOCTYPE html>
<html>
<head>
<title>Acceleration Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
navigator.accelerometer.getCurrentAcceleration(onSuccess, onError);
}
function onSuccess(acceleration) {
alert('Acceleration X: ' + acceleration.x + '\n' +
'Acceleration Y: ' + acceleration.y + '\n' +
'Acceleration Z: ' + acceleration.z + '\n' +
'Timestamp: ' + acceleration.timestamp + '\n');
}
function onError() {
alert('onError!');
}
</script>
</head>
<body>
</body>
</html>
And in my config.xml file I have added:
<gap:plugin name="org.apache.cordova.device-motion" />
<gap:plugin name="org.apache.cordova.device-orientation" />
After testing and asking the Phonegap Build crew, they showed me a code with all the functions. And this is the best way to get the accelerometer to work with Phonegap Build
<!DOCTYPE html>
<html>
<head>
<title>Device Ready Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
alert("Device is Ready");
alert(device.available);
}
function getAcceleration(){
navigator.accelerometer.getCurrentAcceleration(onAccelSuccess, onError);
}
function onAccelSuccess(acceleration) {
var element = document.getElementById('accelerometer');
element.innerHTML = 'Acceleration X: ' + acceleration.x + '<br />' +
'Acceleration Y: ' + acceleration.y + '<br />' +
'Acceleration Z: ' + acceleration.z + '<br />' +
'Timestamp: ' + acceleration.timestamp + '<br />';
}
function onError() {
alert('onError!');
}
function startWatch() {
// Update acceleration every 1 seconds
var options = { frequency: 1000 };
watchID = navigator.accelerometer.watchAcceleration(onAccelSuccess, onError, options);
}
function stopWatch() {
if (watchID) {
navigator.accelerometer.clearWatch(watchID);
watchID = null;
}
}
</script>
</head>
<body onload="onLoad()">
<p>
<button onclick="getAcceleration()">Get Acceleration</button>
</p>
<p>
<button onclick="startWatch()">Watch Acceleration</button>
</p>
<p>
<button onclick="stopWatch()">Stop Watching Acceleration</button>
</p>
<div id="accelerometer">Waiting for accelerometer...</div>
</body>
</html>
I would say you try a total clean reinstall/rebuild with cordova. First off all you have to install cordova for that. If you want to know, how to get started with that you should have a look into the cordova documentation: Cordova CLI-Docs
After you installed cordova, you enter the Terminal and type in the following commands:
cd ~/desktop
cordova create test com.example.test test
cd test
cordova platform add android
cordova plugin add org.apache.cordova.device-motion
cordova build
Open the builded project in Eclipse and add
<!DOCTYPE html>
<html>
<head>
<title>Acceleration Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
//
function onDeviceReady() {
navigator.accelerometer.getCurrentAcceleration(onSuccess, onError);
}
// onSuccess: Get a snapshot of the current acceleration
//
function onSuccess(acceleration) {
alert('Acceleration X: ' + acceleration.x + '\n' +
'Acceleration Y: ' + acceleration.y + '\n' +
'Acceleration Z: ' + acceleration.z + '\n' +
'Timestamp: ' + acceleration.timestamp + '\n');
}
// onError: Failed to get the acceleration
//
function onError() {
alert('onError!');
}
</script>
</head>
<body>
<h1>Example</h1>
<p>getCurrentAcceleration</p>
</body>
</html>
Save all and deploy the project to your device. And let me know, if this worked or not.
Can't comment, so answering instead.
In reference to above comment re "Phonegap and Cordova are similar (Same codebase)"
From http://docs.build.phonegap.com/en_US/3.1.0/introduction_getting_started.md.html:
To do so, simply ensure that the following reference is made in your
index.html
<script src="phonegap.js">
Note that this is interchangeable with
<script src="cordova.js">
I am new to use google maps on mobile phones, and I am using phonegap framework for that. below is the example code I am using to get the google maps on android phone. but it is of the version 3.8 and when I try to load the latest version 8.1.0 it shows a blank screen. So need help to go in right direction in using google maps.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, minimum-scale=1, maximum-scale=1">
<title>Map</title>
<link href="css/jquery/jquery.mobile-1.4.2.min.css" rel="stylesheet"
type="text/css" />
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="cordova-2.4.0.js"></script>
<script type="text/javascript">
var map;
var marker;
var infowindow;
var watchID;
$(document).ready(function(){
document.addEventListener("deviceready", onDeviceReady, false);
//for testing in Chrome browser uncomment
//onDeviceReady();
});
//PhoneGap is ready function
function onDeviceReady() {
$(window).unbind();
$(window).bind('pageshow resize orientationchange', function(e){
max_height();
});
max_height();
google.load("maps", "3.8", {"callback": map, other_params: "sensor=true&language=en"});
map();
}
function max_height(){
var h = $('div[data-role="header"]').outerHeight(true);
var f = $('div[data-role="footer"]').outerHeight(true);
var w = $(window).height();
var c = $('div[data-role="content"]');
var c_h = c.height();
var c_oh = c.outerHeight(true);
var c_new = w - h - f - c_oh + c_h;
var total = h + f + c_oh;
if(c_h<c.get(0).scrollHeight){
c.height(c.get(0).scrollHeight);
}else{
c.height(c_new);
}
}
function map(){
var latlng = new google.maps.LatLng(55.17, 23.76);
var myOptions = {
zoom: 6,
center: latlng,
streetViewControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl: true
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
google.maps.event.addListenerOnce(map, 'tilesloaded', function(){
//get geoposition once
//navigator.geolocation.getCurrentPosition(geo_success, geo_error, { maximumAge: 5000, timeout: 5000, enableHighAccuracy: true });
//watch for geoposition change
watchID = navigator.geolocation.watchPosition(geo_success, geo_error, { maximumAge: 5000, timeout: 5000, enableHighAccuracy: true });
});
}
function geo_error(error){
//comment
alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n');
}
function geo_success(position) {
map.setCenter(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
map.setZoom(15);
var info =
('Latitude: ' + position.coords.latitude + '<br>' +
'Longitude: ' + position.coords.longitude + '<br>' +
'Altitude: ' + position.coords.altitude + '<br>' +
'Accuracy: ' + position.coords.accuracy + '<br>' +
'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '<br>' +
'Heading: ' + position.coords.heading + '<br>' +
'Speed: ' + position.coords.speed + '<br>' +
'Timestamp: ' + new Date(position.timestamp));
var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
if(!marker){
//create marker
marker = new google.maps.Marker({
position: point,
map: map
});
}else{
//move marker to new position
marker.setPosition(point);
}
if(!infowindow){
infowindow = new google.maps.InfoWindow({
content: info
});
}else{
infowindow.setContent(info);
}
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
</script>
</head>
<body>
<!-- Main Page-->
<div data-role="page" data-theme="b" id="main">
<div data-role="header">
<h1>RealTrac</h1>
</div>
<div data-role="content">
<h3>Select the application</h3>
<a data-role="button" href="#jnytimetracker">Journey-Time Tracker</a>
<a data-role="button" href="#qtimetracker">Queue-Time Tracker </a>
</div>
</div>
<!-- First Page End -->
<div data-role="page" id="jnytimetracker">
<div data-role="header" data-theme="b">
<h1>Map Header</h1>
</div>
<div data-role="content" style="padding: 0;">
<div id="map" style="width: 100%; height: 100%;"></div>
</div>
<div data-role="footer" data-theme="b">
<h4>Map Footer</h4>
</div>
</div>
</html>
THanks
I have worked on the google map on my mobile website . And its based on JQuery mobile . Here is what worked for me
This is the most common problem in JQM. I totally agree with #Omar about the solution .
Cause of the problem
The JQM uses script to layer divs over your normal div to make it more enrich and look better
So when you initialize the google map these hidden layer causes the problem to show it completely
Most of the time as I have researched in Google that the map is shown in the upper left corner of the window :).
Easy fix
This one goes only for JQM pages
$( document ).on( "pageshow", "#map", function() {
});
Just put your google map code inside the above code what it does is that the map will load only after all the divs have been loaded . Please see the event pageshow in JQM website.
My Script Look something like this
$( document ).on( "pageshow", "#map-page", function() {
<?php $coordenadas=explode(',',$fila['Googlemap']);?>
var defaultLatLng = new google.maps.LatLng('<?php echo $coordenadas[0];?>','<?php echo $coordenadas[1];?>');
$('#map-canvas').height( $(window).height() - $('#head1').height());
drawMap(defaultLatLng); // Default to Hollywood, CA when no geolocation support
//var latlng = marker.getPosition();
function drawMap(latlng) {
var myOptions = {
zoom: 18,
center: latlng,
streetViewControl:true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
// Add an overlay to the map of current lat/lng
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: "Greetings!"
});
// this is our gem
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
}
});
Just change the #map selector to the id of the page where the map has to be loaded .
Hope I have helped you or others who have been facing the same problem :)
Thanks & Regards
I am using Cordova 2.0.0 and i am testing on Android 2.2.
So after 2 threads and alot of searching i am finally able get get my geolocation and have it shown in google maps. Now every time i open the app it will get my geolocation and show it in google maps with a marker. Now i want the program to store the data. This is the first time i use html5,JS. When i made a native app i just used the SQLite database.
How would i go on about storing the data?
This is what i have so far, any help tutorials, samples, help and advice would be greatly appreciated.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width; height=device-height; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Beer Me</title>
<link rel="stylesheet" href="/master.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
<script type="text/javascript">
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
navigator.geolocation.getCurrentPosition(onSuccess, onError,{'enableHighAccuracy':true,'timeout':10000});
}
//GEOLOCATION
var onSuccess = function(position) {
alert('Latitude: ' + position.coords.latitude + '\n' +
'Longitude: ' + position.coords.longitude + '\n');
var myLat = position.coords.latitude;
var myLong = position.coords.longitude;
//MAP
var mapOptions = {
center: new google.maps.LatLng(myLat, myLong),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
};
// onError Callback receives a PositionError object
//
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
</script>
</head>
<body onload="onLoad()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
You can use a simple SQLite database as usual: http://docs.phonegap.com/en/2.0.0/cordova_storage_storage.md.html#Storage