Javascript does not work outside index.html page:
Project Test 1:
Index.html (with GEOLOCATION PAGE CODE) works fine
Project Test 2:
Index.html (with MENU PAGE CODE)
Geolocation.html (with GEOLOCATION PAGE CODE) javascript does not work
The page Geolocation.html opens up, but javascript does not run.
What am i missing?
GEOLOCATION PAGE CODE:
<!DOCTYPE html>
<html>
<head>
<!-- <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />-->
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" charset="utf-8" src="js/cordova-2.5.0.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
var element = document.getElementById('geoTemp');
element.innerHTML = 'Ready...';
navigator.geolocation.getCurrentPosition(onSuccess, onError, { maximumAge: 3000, timeout: 10000, enableHighAccuracy: false });
}
function onSuccess(position) {
var element = document.getElementById('geoTemp');
element.innerHTML = 'Success...';
initialize(position.coords.latitude, position.coords.longitude);
}
function onError(error) {
var element = document.getElementById('geoTemp');
element.innerHTML = 'Error...';
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
function initialize(latitude, longitude) {
var mapOptions = {
center: new google.maps.LatLng(latitude, longitude),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
function onBodyLoad(){
alert("test!");
}
</script>
</head>
<body>
<h2>Location</h2>
<p id="geolocation">Finding geolocation...</p>
<p id="geoTemp"></p>
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
MENU PAGE CODE:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.3.0.css">
<link rel="shortcut icon" href="favicon.ico">
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.3.0.js"></script>
<script type="text/javascript" src="js/cordova-2.5.0.js"></script>
</head>
<body>
<div data-role="page" id="pageMain">
<div data-role="header">
<h1>
TestPage
</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="geolocation.html" data-transition="slide">
<h2>Geolocation Test</h2>
<p>Testing</p>
</a></li>
</ul>
</div>
</div>
</body>
</html>
I have also tried to add an onload function to the body tag and call a test function but it didn't work either.
In the link to geolocation.html, add this attribute data-ajax="false". This will prevent jQuery from loading the page via Ajax.
Related
I have this weird error in a Cordova/AngularJS app.
Sometimes (rarely) AngularJS cannot find the controller and chrashes, leaving users with a half-loaded unresponsive view.
The error only seems to happen when the phone has been locked for some time and is next to impossible for me to recreate at a regular basis. It just happens sometimes.
When the user close the app and restart it everything works fine again.
Thus far I have only received complaints about this error for Android devices and not for iOS devices.
EDIT: I have also now seen the error on iOS devices.
I really hope someone is able to shed light on this issue.
My index.html looks like this
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="guideApp">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; script-src * 'self' 'unsafe-eval' 'unsafe-inline' https://api.tiles.mapbox.com/mapbox.js/v2.1.6/mapbox.js http://connect.facebook.net/en_GB/sdk.js;">
<link rel="stylesheet" href="css/snap.css" />
<link rel='stylesheet' href='css/mapbox.css' />
<link rel="stylesheet" href="css/leaflet.css" />
<link rel="stylesheet" href="css/guideapp.css" />
<link rel="stylesheet" href="css/xpengineicons.css" />
<!--<link rel="stylesheet" href="css/guideappTest.css" />-->
<title></title>
<link rel="icon" type="image/png" href="img/favicon.png"/>
<meta name="application-name" content="GuideApp"/>
<meta name="msapplication-TileColor" content="#000000" />
<meta name="msapplication-TileImage" content="img/favicons/mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="img/favicons/mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="img/favicons/mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="img/favicons/mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="img/favicons/mstile-310x310.png" />
</head>
<body ng-controller="globalCtrl" data-snap-ignore="true">
<div class="snap-drawers">
<div class="snap-drawer snap-drawer-left sideMenu">
{{::langPack.startPage[lang]}}
{{::langPack.selectTour[lang]}}
{{::langPack.map[lang]}}
{{::langPack.news[lang]}}
{{::langPack.photoMenu[lang]}}<i class="icon-angle-down fotoToggleAngle"></i>
<div class="fotoMenu" id="fotoMenu">
{{::langPack.followAnothersTour[lang]}}
{{::langPack.endPhototour[lang]}}
{{::langPack.seePreviousTour[lang]}}
<!--{{::langPack.photoFromGallery[lang]}}-->
{{::langPack.selectFromGallery[lang]}}
<!--[Smaller radius]-->
<!--[Larger radius]-->
<!--[{{langPack.toggleActionRadius[lang]}}]-->
<!--[End waypoint tour] -->
</div>
{{::langPack.about[lang]}}
<a href="#" ng-click="sync.checkUpdates();">
{{::langPack.sync[lang]}}
<span id="updateCheck" class="updateCheck"><div class="circle"></div>{{::langPack.checkForUpdates[lang]}}</span>
<span id="uptodate" class="updateCheck uptodate"><i class="icon-ok"></i>{{::langPack.upToDate[lang]}}</span>
</a>
{{::langPack.showIntroOverlay[lang]}}
</div>
</div>
<div id="content" class="snap-content content" ng-style="customBg">
<nav id="header" ng-controller="cameraCtrl">
<img src="img/menu-regular.svg"><!--<div class="menuNotification" ng-if="photosInUploadQue > 0">{{photosInUploadQue}}</div>-->
<i class="icon-angle-up"></i>
<h1></h1>
<img ng-src="{{customLogo}}" id="logo">
<!-- Kamera når det virker -->
<i class="icon-camera"></i>
<!-- <i class="icon-angle-down"></i> -->
<!-- <i class="icon-angle-up"></i> -->
<!-- <a onclick = "window.open('http://guideapp.tmts.dk/', '_blank', 'location=yes'); return false;" id="viewInBrowser" class="uploadBtn"><i class="icon-angle-down"></i></a> -->
<div id="uploadPopupOverlay" class="popupOverlay" ng-click="closeUploadPopup();"></div>
<section id="uploadPopup">
<p>{{::langPack.uploadAndShare[lang]}}</p>
<form novalidate ng-submit="uploadPhotosSubmittedByPopup($event)">
<label for="emailInput" ng-show="showEmail === true">
{{::langPack.yourEmail[lang]}}
<div class="error" ng-if="emailMsg">{{::emailMsg}}</div>
</label>
<input type="email" value="{{emailAdress}}" required name="emailInput" ng-model="emailAdress" ng-show="showEmail === true" id="emailAdress">
<label for="titleInput">
{{::langPack.yourTitel[lang]}}
<div class="error" ng-if="titleMsg">{{::titleMsg}}</div>
</label>
<input type="text" value="{{tourTitle}}" name="titleInput" ng-model="tourTitle" id="uploadTitle" required>
<p class="emailExists" ng-show="showEmail === false"><span compile="langPack.sendTo[lang]"></span> [{{::langPack.editEmail[lang]}}]</p>
<button class="btn left" ng-click="closeUploadPopup();">{{::langPack.cancel[lang]}}</button>
<button type="submit" class="btn right">{{::langPack.ok[lang]}}</button>
</form>
</section>
</nav>
<div class="slideInLeft" ng-view></div>
</div>
<aside ng-class="{active: showIntro}" id="intro" ng-swipe-left="nextSlide()" class="" ng-swipe-right="prevSlide()">
<div>
<div id="introSwipe">
<section id="intro{{$index+1}}" class="introSlide" ng-class="{'active': $index === 0}" ng-repeat="slide in introSlides" style="background-image: url('{{slide}}')"></section>
</div>
<section id="noShow">
<div class="slideNavigation">
<button ng-click="prevSlide()" ng-class="{disabled: firstSlide}">{{::langPack.prevSlide[lang]}}</button>
<div class="slideProgress">{{slideProgress}}/{{introSlides.length}}</div>
<button ng-click="nextSlide()" ng-class="{disabled: lastSlide}">{{::langPack.nextSlide[lang]}}</button>
</div>
</section>
</div>
<a id="closeIntro" href="#" ng-click="toggleIntro(); $event.preventDefault()">{{::langPack.toggleIntroText[lang]}}</a>
</aside>
<section id="confirmOverlay" class="popupOverlay" ng-click="confirmValue = false;">
<section class="checkPopup confirmPopup" id="confirmPopup">
<p id="confirmMessage"></p>
<button class="btn right" ng-click="confirmValue = true;">{{::langPack.ok[lang]}}</button>
<button class="btn left" ng-click="confirmValue = false;">{{::langPack.cancel[lang]}}</button>
</section>
</section>
<section id="spinnerOverlay" class="popupOverlay">
<section class="checkPopup spinnerPopup" id="spinnerPopup">
<div class="circle"></div>
<div class="spinnerText" id="spinnerText"></div>
</section>
</section>
<section id="statusOverlay" class="popupOverlay" ng-click="status.hide()">
<section class="checkPopup statusPopup" id="statusPopup">
<p id="statusText"></p>
<button class="btn" ng-click="status.hide()">Ok</button>
</section>
</section>
<!-- JavaScript libraries -->
<script src="cordova.js"></script>
<script src="js/libs/angular.min.js"></script>
<script src="js/libs/angular-locale_da-dk.js"></script>
<script src="js/libs/angular-route.min.js"></script>
<script src="js/libs/angular-animate.min.js"></script>
<script src="js/libs/angular-touch.min.js"></script>
<script src="js/libs/snap.min.js"></script>
<script src="js/libs/md5.js"></script>
<script src="js/libs/angular-listview.min.js"></script>
<!-- Mapbox -->
<!--<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.6/mapbox.js'></script>-->
<!-- <script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js'></script> Draw GPX 20151014 -->
<!-- leaflet -->
<script src="js/libs/leaflet.js"></script>
<script src='js/libs/leaflet-omnivore.min.js'></script> <!-- Draw GPX 20151014 -->
<script src='js/libs/leaflet-tilelayer-cordova.js'></script> <!-- Offline maps -->
<!-- Custom script files -->
<script src="js/app.js"></script>
<script src="js/index.js"></script>
<!-- included controllers -->
<script src="controllers/globalCtrl.js"></script>
<script src="controllers/homeCtrl.js"></script>
<script src="controllers/aboutCtrl.js"></script>
<script src="controllers/tourSelectCtrl.js"></script>
<script src="controllers/mapCtrl.js"></script>
<script src="controllers/cameraCtrl.js"></script>
<script src="controllers/viewtoursCtrl.js"></script>
<script src="controllers/commonToursCtrl.js"></script>
<script src="controllers/highscoreCtrl.js"></script>
<script src="controllers/downloadCtrl.js"></script>
<script src="controllers/waypointCtrl.js"></script>
<script src="controllers/waypointGalleryCtrl.js"></script>
<script src="controllers/endCtrl.js"></script>
<script src="controllers/newsCtrl.js"></script>
</body>
</html>
AngularJS is loaded with app.js:
// Init angular.js
var guideApp = angular.module('guideApp', ['ngRoute', 'ngAnimate', 'ngTouch']);
guideApp.config(['$routeProvider', '$compileProvider', function ($routeProvider, $compileProvider) {
$routeProvider.when('/', {
controller: 'homeCtrl',
templateUrl: 'views/home.html'
}).when('/home', {
controller: 'homeCtrl',
templateUrl: 'views/home.html'
}).when('/tourSelect', {
controller: 'tourSelectCtrl',
templateUrl: 'views/tourSelect.html'
}).when('/map', {
controller: 'mapCtrl',
templateUrl: 'views/map.html'
}).when('/about', {
controller: 'aboutCtrl',
templateUrl: 'views/about.html'
}).when('/viewtours', {
controller: 'viewtoursCtrl',
templateUrl: 'views/viewtours.html'
}).when('/commonTours', {
controller: 'commonToursCtrl',
templateUrl: 'views/commonTours.html'
}).when('/highscore', {
controller: 'highscoreCtrl',
templateUrl: 'views/highscore.html'
}).when('/download', {
controller: 'downloadCtrl',
templateUrl: 'views/download.html'
}).when('/waypoint', {
controller: 'waypointCtrl',
templateUrl: 'views/waypoint.html'
}).when('/waypointGallery', {
controller: 'waypointGalleryCtrl',
templateUrl: 'views/waypointGallery.html'
}).when('/end', {
controller: 'endCtrl',
templateUrl: 'views/end.html'
}).when('/news', {
controller: 'newsCtrl',
templateUrl: 'views/news.html'
}).otherwise({
redirectTo: '/'
});
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|cdvfile|file):/);
}]);
guideApp.directive('compile', ['$compile', function ($compile) {
return function(scope, element, attrs) {
scope.$watch(
function(scope) {
// watch the 'compile' expression for changes
return scope.$eval(attrs.compile);
},
function(value) {
// when the 'compile' expression changes
// assign it into the current DOM
element.html(value);
// compile the new DOM and link it to the current
// scope.
// NOTE: we only compile .childNodes so that
// we don't get into infinite loop compiling ourselves
$compile(element.contents())(scope);
}
);
};
}])
// custom on touchstart directive
/*guideApp.directive('guideappTouchstart', [function () {
return function(scope, element, attr) {
element.on('touchstart', function (event) {
scope.$apply(function () {
scope.$eval(attr.guideappTouchstart);
});
});
};
}]);*/
The index.js file looks like this:
var http,
app = {
initialize: function () {
this.bindEvents();
},
bindEvents: function () {
if (!window.cordova) {
this.onDeviceReady();
} else {
document.addEventListener('deviceready', this.onDeviceReady, false);
}
},
onDeviceReady: function () {
app.receivedEvent('deviceready');
console.log('Device ready');
if (window.cordova) {
// find and set the filesystem root
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
window.requestFileSystem(1, 0, function (fileSystem) {
console.log("got filesystem: "+fileSystem.name); // displays "persistent"
//console.log(fileSystem.root.fullPath); // displays "/"
window.rootFS = fileSystem.root;
});
}
},
receivedEvent: function (id) {
//angularInit();
this.platform();
},
server: function (wwwroot) {
if (httpd) {
httpd.getURL(function (url) {
if(url.length > 0) {
document.getElementById('url').innerHTML = "server is up: <a href='" + url + "' target='_blank'>" + url + "</a>";
} else {
httpd.startServer({
'www_root' : wwwroot,
'port' : 8080
}, function (url) {
//updateStatus();
}, function (error) {
console.log('server error ', error);
});
}
}, function () {});
} else {
console.log('CorHttpd plugin not available/ready');
}
},
platform: function () {
var deviceType;
if (navigator.userAgent.match(/Android/i)) { // Android
if (navigator.userAgent.match(/Mobile/i)) { // Android smartphone
console.log('Android smartphone');
deviceType = 'mobile';
} else { // Android tablets
//console.log('Android tablet');
deviceType = 'tablet';
}
} else if (navigator.userAgent.match(/iPad/i)) { // IOS ipad
//console.log('IOS tablet');
deviceType = 'tablet';
} else if (navigator.userAgent.match(/iPhone/i)) { //IOS smartphone
//console.log('IOS smartphone');
deviceType = 'mobile';
} else { // Dekstop as default
//console.log('desktop');
deviceType = 'tablet';
}
}
};
app.initialize();
I am developing my application for Android Environment using IBM Worklight and the following Library: http://storelocator.googlecode.com/git/index.html
Whenever I enter any location from the textbox, I am getting the world map, not the location which I entered. I need to zoom in to see the exact location. It is working correctly on Worklight Console. But on device, Whenever I enter any city name, I am getting only world map. There is not any error on LogCat.
Also, I am getting two alerts continuously.
"Rate Limit Exceeded"
"The SQL Query is malformed. (there might be something wrong with these URL parameters: select, Where, orderBy, intersects)."
The following is HTML code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>testeApp</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,
minimum-scale=1.0, user-scalable=0">
<!--
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
-->
<link href="jqueryMobile/jquery.mobile-1.4.3.css" rel="stylesheet">
<link href="jqueryMobile/jquery.mobile.inline-png-1.4.3.css" rel="stylesheet">
<link href="jqueryMobile/jquery.mobile.inline-svg-1.4.3.css" rel="stylesheet">
<link href="jqueryMobile/jquery.mobile.structure-1.4.3.css" rel="stylesheet">
<link href="jqueryMobile/jquery.mobile.theme-1.4.3.css" rel="stylesheet">
<link href="jqueryMobile/jquery.mobile.external-png-1.4.3.css" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="jqueryMobile/jquery.mobile.icons-1.4.3.css">
<script>window.$ = window.jQuery = WLJQ;</script>
<script src="jqueryMobile/jquery.mobile-1.4.3.js"></script>
<script type="text/javascript" charset="utf-8"
src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript" src="js/gme.js"></script>
<script type="text/javascript" charset="utf-8" src="js/store-locator.min.js"></script>
<link rel="stylesheet" href="css/storelocator.css">
<script src="js/medicare-static-ds.js" type="text/javascript"></script>
<style type="text/css">
body { font-family: sans-serif; }
#map-canvas, #panel { height: 500px; }
#panel { width: 300px; float: left; margin-right: 10px; }
p.attribution, p.attribution a { color: #666; }
</style>
</head>
<body>
<div data-role="page" >
<div data-role="content">
<div id="panel" class="storelocator-panel" style="width : 100% ; height : 30%; " >
<form class="storelocator-filter" >
<div class="location-search" id="locationSearch" style="height :35%; ">
</div>
<div class="feature-filter">
</div>
</form>
</div>
<div id="map-canvas" >
</div>
</div>
</div>
</body>
The following is the javascript code for the Map.
google.maps.event.addDomListener(window, 'load', function() {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(43.67023, -79.38676),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var panelDiv = document.getElementById('panel');
var data = new storeLocator.GMEDataFeed({
tableId: '12421761926155747447-06672618218968397709',
apiKey: 'AIzaSyAtunhRg0VTElV-P7n4Agpm9tYlABQDCAM',
propertiesModifier: function(props) {
var shop = ([props.NAME]);
var locality = join([props.CITY, props.POSTAL_CODE], ', ');
return {
id: props.STORE,
title: props.NAME,
address: join([shop, props.ADDRESS, locality], '<br>'),
};
}
});
var view = new storeLocator.View(map, data, {
geolocation: false
});
new storeLocator.Panel(panelDiv, {
view: view
});
});
function join(arr, sep) {
var parts = [];
for (var i = 0, ii = arr.length; i < ii; i++) {
arr[i] && parts.push(arr[i]);
}
return parts.join(sep);
}
For the zoom issue, to get to street-level zooming, I use zoom: 18.
As for the "rate limit exceeded" warning, this warning is issued by Google Maps and you need to verify your usage of Google Maps: https://developers.google.com/maps/documentation/business/articles/usage_limits
I am using phonegap geolocation API in my phonegap android application.It always shows error code code 3,Timeout error.I am also try to change timeout variable value to increased,enableHighAccuracy to be true.But no change in result.But it will works on browser not runs in application.Give me the solution for this problem.
This is my code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="css/contact.css" type='text/css' />
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css"
type='text/css' />
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCJAbwOQjaVjDy9XJ0UEZCvTdZeW_atXak&sensor=false">
</script>
<script type="text/javascript" charset="utf-8" src="cordova-2.9.0.js"></script>
<script src="jquery.mobile/jquery-1.10.2.min" type='text/javascript'></script>
<script>
document.addEventListener("deviceready", onDeviceReady, false);
$(document).on("mobileinit", function() {
$.mobile.phonegapNavigationEnabled = true;
$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
$.mobile.loadingMessageTextVisible = true;
$.mobile.pageLoadErrorMessage;
});
$(document).ready(function() {
$('#Login').show();
$('#Contacts').hide();
});
function success(name) {
alert(name);
}
function error() {
alert("error");
}
function login() {
var name = $("#name").val();
if (navigator.notification) {
navigator.notification.alert("Welcome " + name, alertDismissed, 'Sample App', 'Ok');
} else {
alert("Welcome " + name);
}
var options = {
enableHighAccuracy: true,
timeout: 8000,
maximumAge: 10000
};
navigator.geolocation.getCurrentPosition(onSuccess, onError, options);
$("#Login").hide();
$("#Contacts").show();
}
function alertDismissed() {
console.log("ok");
}
function onSuccess(position) {
var latt1 = position.coords.latitude;
var lont1 = position.coords.longitude; //alert(latt1+" "+lont1);
var myLatlng1 = new google.maps.LatLng(latt1, lont1);
var mapOptions1 = {
center: myLatlng1,
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions1);
var marker1 = new google.maps.Marker({
position: myLatlng1,
map: map,
title: "You are here! (at least within a " + position.coords.accuracy + " meter radius)"
});
var circle = new google.maps.Circle({
radius: 26000,
strokeColor: "#00FF00",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#C0C0C0",
fillOpacity: 0.35,
map: map
});
marker1.setIcon("./images/blue_dot_circle.png");
marker1.setMap(map);
}
function onError(error) {
if (navigator.notification) {
navigator.notification.alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n', alertDismissed, 'Sample App', 'Ok');
} else {
alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n');
}
}
function AlertConfirmed(buttonIndex) {
if (buttonIndex == 1) {
device.exitApp();
console.log(buttonIndex);
} else {
console.log(buttonIndex);
}
}
function goHome() {
navigator.app.loadUrl("http://www.google.co.in", {
openExternal: true
});
}
</script>
<script src="jquery.mobile/jquery.mobile-1.3.1.min.js"
type='text/javascript'></script>
</head>
<body>
<div data-role="page" >
<div id="Login">
<div data-role="header" data-position="fixed" data-theme="b"
data-tap-toggle="false" class="header" data-transition="none"
id="myFixedHeader">
<p>Sample Application</p>
</div>
<div data-role="content">
<div id="title">
<div
style="width: 90%; padding-left: 5%; padding-right: 5%; padding-top: 3%; padding-bottom: 1%;">
<input type="text" name="password" id="name" data-mini="true"
placeholder="Enter Your Name " value="" data-inline="true">
</div>
<center>
<div id="log" onclick="login()">Login</div>
</center>
</div>
</div>
<div data-role="footer" data-theme="b" data-position="fixed"
class="footer" data-transition="none" data-tap-toggle="false">
<p onclick="goHome()">© 2014
Sample App Reserved, LLC.</p>>
</div>
</div>
<div id="Contacts">
<div data-role="header" data-theme="b" data-tap-toggle="false"
data-position="fixed" class="header" data-transition="none">
<h3 id="htitle">Home Page</h3>
</div>
<div data-role="content" id="map_canvas" >
</div>
<div data-role="footer" data-theme="b" data-position="fixed"
class="footer" data-transition="none" data-tap-toggle="false">
<p onclick="goHome()">© 2014
Sample App Reserved, LLC.</p>
</div>
</div>
</body>
</html>
I have added Permissions INTERNET,FINE_LOCATION,COARSE_LOCATION in manifest file
and corrova 2.9.0.js
Please make sure that you have <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> set in your android manifest.
I made one mistake in config.xml.Now,I have added
<access origin="*"/>
<access origin="*://*.googleapis.com/*" subdomains="true" />
<access origin="*://*.gstatic.com/*" subdomains="true" />
<access origin="*://*.google.com/*" subdomains="true" />
<access origin="*://*.googleusercontent.com/*" subdomains="true" />
in my config.xml file.googlemap geolocation showed successfully
Make entry in app/res/xml/config.xml
Entry:
And in app/AndroidManifest.xml
Entry:
Also make sure that the enablehighAccuracy parameter is set to true.
Cheers!!
I am trying to get ng-views to work in android phoneapp app. I get the following
error when I trying to navigate to one of the views via hyperlink.
"Origin is not allowed by Access-Control-Allow-Origin"
I have tried modifying the the cordova,xml in the res folder with no luck.
From
<access origin="http://127.0.0.1*"/> <!-- allow local pages -->
To
<access origin="*"/>
Any advice is appreciated, below is the code.
Thanks.
HTML:
<html ng-app="AngApp">
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Minimal AppLaud App</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<script type="text/javascript" charset="utf-8" src="angular.js"></script>
<script type="text/javascript" charset="utf-8" src="app.js"></script>
<script type="text/javascript" charset="utf-8">
var onDeviceReady = function() {
$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
// The message from the service is appearing, so Angular seems
// to be working fine without having to bootstrap it.
//angular.bootstrap(document, ['AngApp']);
};
function init() {
document.addEventListener("deviceready", onDeviceReady, true);
}
</script>
</head>
<body onload="init();" id="stage" class="theme">
<h2>Angular App</h2><br/>
View1
View2
<hr/>
<div data-ng-controller="MainCtrl">
<p>{{Message}}</p>
<input type="text" data-ng-model="Message"/>
</div>
<hr/>
<div data-ng-view></div>
</body>
</html>
APP.JS:
var angApp = angular.module('AngApp',[]);
angApp.config(function ($compileProvider){
$compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
});
angApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
controller: TestCtrl1,
templateUrl: 'view1.html'
})
.when('/view', {
controller: TestCtrl2,
templateUrl: 'view2.html'
});
});
angApp.factory('myService',function(){
return 'I am a service';
});
function MainCtrl($scope, myService){
$scope.Message = 'This is the main controller. '+ myService;
}
function TestCtrl1($scope){
$scope.Message = 'This is controller 1.';
}
function TestCtrl2($scope){
$scope.Message = 'This is controller 2.';
}
You are missing a # sign there in href="#/view".
For a school project I've to do a PhoneGap application. I want to do a div with a map, and after makes interest points. But it's impossible to have it in my android emulator, got the error "referenceError can't find variable google". I tried a lot of solution I've found and the only thing I can do it's to show a little piece of map on the top of my application, but only on an internet browser.
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="jquery.js"></script>
<link rel="stylesheet" href="jquery.mobile-1.3.0.css" />
<script src="jquery.mobile-1.3.0.js"></script>
<script src="jquery.mobile-1.3.0.min.js"></script>
<style type="text/css">
#footer {
position:fixed;
bottom:0;
left:0;
right:0;
}
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBKh2nx6OdT6pdPi-KtPNH_6Lc7Aj9z7d4&sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
</head>
<body>
If someone have a piece of code working on his computer, or find an error on mine i would be very happy.
Thanks.
The following works for me in my Nexus 4 emulator. Taken mostly from Google Maps JavaScript API:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script scr="jquery.js></script>
<link rel="stylesheet" href="jquery.mobile-1.3.0.css" />
<script type="text/javascript" src="cordova-2.4.0.js"></script>
<script type="text/javascript" src="jquery.mobile-1.3.0.min.js"></script>
<style type="text/css">
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>