I am doing a project with the following techs: phonegap (v 4.1.2), angular (v 1.3.0) and onsen ui (v1.2.1).
I am really having a hard time to include Angular Google Maps on it. I am really lost because I am no receiving any log to follow.
I am going to write the steps I have followed in order to hopefully anyone notice where is the mistake.
First, I always like to start with a simple example, so I decided to create a sample project. I used this:
http://angular-ui.github.io/angular-google-maps/#!/use
I create my phonegap project structure, follow the instructions and voilá, the map appears correctly.
Then, it's time to include the code in the project. it consists in the following elements (I will write which I think are important to the issue, if any more info is required I will add it later)
File: index.html
<script src="components/onsen/js/angular/angular.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>
<script src="components/lodash/lodash.js"></script>
<script src="components/angular-google-maps/angular-google-maps.js"></script>
<script src="cordova.js"></script>
<!--modules-->
<script src="app.js"></script>
<!--controllers-->
<script src="controllers/updateCtrl.js"></script>
<script src="controllers/geoCtrl.js"></script>
File: geolocalizacion.html
<ons-page on-device-backbutton="menu.setMainPage('main.html', {closeMenu: true});">
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.toggle()">
<ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">Geolocalización</div>
</ons-toolbar>
<div id="map_canvas" ng-controller="GeoCtrl">
<ui-gmap-google-map center='map.center' zoom='map.zoom'></ui-gmap-google-map>
</div
</ons-page>
File: app.js
//App module
angular.module('app', ['onsen', 'angularLocalStorage', 'ngSanitize', 'uiGmapgoogle-maps']);
//Configs
//Google Maps SDK
angular.module('app').config(function(uiGmapGoogleMapApiProvider) {
uiGmapGoogleMapApiProvider.configure({
key: 'xxx',
v: '3.17',
libraries: 'weather,geometry,visualization'
});
});
File geoCtrl:
angular.module('app').controller('GeoCtrl', function($scope, uiGmapGoogleMapApi, uiGmapLogger){
console.log('Loading geoCtrl');
uiGmapGoogleMapApi.then(function(maps) {
$scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 };
console.log('map: ', maps);
});
});
It seems to be all correct, nothing is shown is logs. I have used the same api key for the sample app and the project, but I think this is allowed. The logs 'Loading geoCtrl' is appearing, and the 'map:' is appearing blank, but the same occurs in the sample app but even though the map appears.
Any idea what can I test, what is wrong or any little hint. I am pretty new to angular developement, I think this is importan to mention to.
Thanks in advance guys for your time.
Regards,
Néstor
Finally I found out what was happening. There was no problem with the code posted. The error was mine, I was missing some css code to display the map.
css:
.angular-google-map-container { height: 400px; }
Related
I'm just starting with angularjs so I'm not an expert with ui router as well. I'm developing an app using cordova and ratchet. So right now here's my code
index.html
<header class="bar bar-nav">
<h1 class="title">Title</h1>
</header>
<div ui-view></div>
app.js
var myApp = angular.module('myApp', ['ngCordova','ui.router','myApp.controllers','myApp.services']);
myApp.config(function($stateProvider,$urlRouterProvider) {
$urlRouterProvider.otherwise('/tab/home');
$stateProvider
.state('tab',{
url:'/tab',
abstract:true,
templateUrl:'/template/tab.html'
})
.state('tab.home', {
url: '/home',
templateUrl: '/template/tab-home.html',
controller:'HomeCtrl',
controllerAs:'home'
})
.state('tab.history',{
url: '/history',
templateUrl:'template/tab-history.html'
})
.state('tab.sponsors',{
url: '/sponsors',
templateUrl:'template/tab-sponsors.html'
})
.state('tab.settings',{
url: '/settings',
templateUrl:'template/tab-settings.html'
})
});
The Code seems to be working fine on the browser; but it does not show any views when I use cordova run android. Please tell me what is wrong with the code.
I am not sure but i guess in your index.html you are calling in script files like below :-
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-cookies.min.js"></script>
..I also had the same issue(This was the problem that i faced).You need to ensure any external paths are absolute
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-cookies.min.js"></script>
I am trying to make a mobile app in html 5 using PhoneGap.
For this i am going to use button(like the menu button)
When i am searching in google i can find code, but it seems to me that only doesnt work for me.
My code so far from what i have tried(copied and not working):
http://pastebin.com/0U6ipFa7
Is there something wrong in the code?
Do i need to change something in the config so this will work?
document.write() can only be used when your script is inline with the HTML, for example:
<html>
<head>
<title>Foo</title>
</head>
<body>
<script language="javascript">
document.write("bar");
</script>
</body>
</html>
In your case you should use innerHTML:
<html>
<head>
<title>Foo</title>
<script language="javascript">
function onMenuKeyDown() {
document.getElementById("barCntr").innerHTML += "<h1>Menu</h1>";
}
</script>
</head>
<body>
<div id="barCntr"></div>
</body>
</html>
document.addEventListener("deviceready", function () {
document.addEventListener("menubutton", menuKeyDown, true);
}, false);
function menuKeyDown() {
alert('Menu button pressed.');
}
Refer this phonegap link for reference.
You should install phonegap plugins first.
Follow this tutorial here.
Install phonegap/cordova here and even in Eclipse IDE install phone-gap plugin by going to help --->eclipse market
for getting menu option in the mobile on click on mobile option you are supposed to get like setting ,logout....
menu option...
I have implemented a slide show using ResponsiveSlides.js V1.54. I am very impressed with the slideshow but I have found on a Samsung Galaxy Ace phone the page jumps to the top of the page when the slide changes? It works fine on all other devices I have been able to test the slideshow on.
I have a development version of my slideshow at:
http://brixhamgigclub.co.uk/multimedia-new.php?id=9
my js is in the head section of the html
Any ideas to fix this would be appreciated.
Bob
I have resolved this problem by methodically removing bits of my code. It appears there maybe contention with the Google Translate code used on my site.
I have removed the meta statement
and the html
<div id="googleTranslate">
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'bg,cs,cy,da,de,el,en,es,et,fi,fr,ga,hr,hu,it,lt,nl,no,pl,pt,ru,sk,sl,sr,sv', layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a /element.js?cb=googleTranslateElementInit">
</script>
</div>
and problem resolves.
Bob
I'm taking my first steps in PhoneGap with Android (How come you have to pick a platform, anyway? It's supposed to be cross-platform!). I'm trying to call a RESTful service, get some JSON in return and put it on the screen. Tutorials for this are incredibly hard to find. I'm using the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>JSON Demo</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
$.getJSON('http://MyServerIP/json/GetJobDetails/717/MyKey?callback=?', {
success:function(data)
{
data = evalJSON(data);
$('body').append('<strong>X </strong>');
},
error: function()
{
$('body').append('<strong>Error </strong>');
}
});
</script>
</head>
<body>
test 10
</body>
</html>
...But I get no response, neither success nor error. The server reports that it has been hit though, and returned the data. Browsing to the same URL also returns data. How come nothing appears in the emulator?
You can find a good tutorial about Android + jquery mobile here in the official wiki of PhoneGAP here:
http://wiki.phonegap.com/w/page/36868306/UI%20Development%20using%20jQueryMobile
For your problem Make sure this line is in phonegap app manifest file:
< uses-permission android:name="android.permission.INTERNET" >< /uses-permission >
Plus, you can set the server headers to: 'Access-Control-Allow-Origin: *'
Good Luck!
For some reason the success: and error: were killing it, ie this works:
<script type="text/javascript">
$.getJSON('http://MyServerIP/json/GetJobDetails/717/MyKey?callback=?', function(data)
{
data = evalJSON(data);
$('body').append('<strong>X </strong>');
});
</script>
I wanted to use FusionCharts with android 2.2 (may be on emulator).
I tried using Javascript and the HTML but did not get the expected result.
Any help??
My code is as follows :
WebView web;
/** Called when the activity is first created. */
#Override
public void on Create(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
web=(WebView)findViewById(R.id.webView1);
web.loadUrl("file:///android_asset/Fusioncharts/myChart.html");
}
}
Also my html,xml files :
<html>
<head>
<title>My First chart using FusionCharts
</title>
<script type="text/javascript" src="JavaScripts/FusionCharts.js">
</script>
</head>
<body>
<div id="chartContainer">FusionCharts will load here!
</div>
<script type="text/javascript">
<!--
var myChart = new FusionCharts("Pie2D.swf? dataURL=Data.xml","myChartId", "400", "300", "0", "1" );
myChart.setXMLUrl("Data.xml");
myChart.render("chartContainer");
// -->
</script>
</body>
</html>
and Data.xml :
The above code just displays me : FusionCharts will load here!
Thanks
Sneha
EDIT> NEW CONTENT:
You might need to enable JavaScript and plugins for the WebView:
webview.getSettings().setJavaScriptEnabled(true);
webview.getSettings().setPluginsEnabled(true);
http://developer.android.com/reference/android/webkit/WebView.html
What does "install Flash plugin" in WebView mean?
How to Enable Flash Plugin in Webview?
Also you might need to set proper path to the SWF and JS files. Please debug or attach code here.
OLD CONTENT:
There seems to be a JavaScript error or FusionCharts not getting loaded to do the rendering as stated by Duniyadnd.
Please check the Android debug (using adb logcat or other processes) if it traces any error.
Moreover, I did an implementation using PhoneGap which you can check-out from:
PhoneGap API to query call-logs
This is a small PhoneGap Android application which has FusionCharts to show call logs from the device. The post though showcases creation of plugin to get the calllog, you might derive the other elements which you require. Hope this might help.