I'm trying to Create Android PhoneGap using Polymer ,it is worked very well on browser http://192.168.1.2:8080/ , But don't work on the phone
code Polymer Starter Kit
index.php
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="Polymer Starter Kit">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>My App</title>
<meta name="description" content="My App description">
<script>
// Setup Polymer options
window.Polymer = {
dom: 'shadow',
lazyRegister: true,
};
// Load webcomponentsjs polyfill if browser does not support native
// Web Components
(function() {
'use strict';
var onload = function() {
// For native Imports, manually fire WebComponentsReady so user code
// can use the same code path for native and polyfill'd imports.
if (!window.HTMLImports) {
document.dispatchEvent(
new CustomEvent('WebComponentsReady', {bubbles: true})
);
}
};
var webComponentsSupported = (
'registerElement' in document
&& 'import' in document.createElement('link')
&& 'content' in document.createElement('template')
);
if (!webComponentsSupported) {
var script = document.createElement('script');
script.async = true;
script.src = '/bower_components/webcomponentsjs/webcomponents-lite.min.js';
script.onload = onload;
document.head.appendChild(script);
} else {
onload();
}
})();
// Load pre-caching Service Worker
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/service-worker.js');
});
}
</script>
<link rel="import" href="/src/my-app.html">
<style>
body {
margin: 0;
font-family: 'Roboto', 'Noto', sans-serif;
line-height: 1.5;
min-height: 100vh;
background-color: #eeeeee;
}
</style>
</head>
<body>
<my-app></my-app>
<!-- Built with love using Polymer Starter Kit -->
</body>
</html>
/src/my-app.html:
<!--
#license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/app-layout/app-drawer/app-drawer.html">
<link rel="import" href="../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="../bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../bower_components/app-route/app-location.html">
<link rel="import" href="../bower_components/app-route/app-route.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="my-icons.html">
<dom-module id="my-app">
<template>
<style>
:host {
--app-primary-color: #4285f4;
--app-secondary-color: black;
display: block;
}
app-header {
color: #fff;
background-color: var(--app-primary-color);
}
app-header paper-icon-button {
--paper-icon-button-ink-color: white;
}
.drawer-list {
margin: 0 20px;
}
.drawer-list a {
display: block;
padding: 0 16px;
text-decoration: none;
color: var(--app-secondary-color);
line-height: 40px;
}
.drawer-list a.iron-selected {
color: black;
font-weight: bold;
}
</style>
<app-location route="{{route}}"></app-location>
<app-route
route="{{route}}"
pattern="/:page"
data="{{routeData}}"
tail="{{subroute}}"></app-route>
<app-drawer-layout fullbleed>
<!-- Drawer content -->
<app-drawer id="drawer">
<app-toolbar>Menu</app-toolbar>
<iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
<a name="view1" href="/view1">View One</a>
<a name="view2" href="/view2">View Two</a>
<a name="view3" href="/view3">View Three</a>
<a name="new-view" href="/view">New View</a>
</iron-selector>
</app-drawer>
<!-- Main content -->
<app-header-layout has-scrolling-region>
<app-header condenses reveals effects="waterfall">
<app-toolbar>
<paper-icon-button icon="my-icons:menu" drawer-toggle></paper-icon-button>
<div main-title>My App</div>
</app-toolbar>
</app-header>
<iron-pages
selected="[[page]]"
attr-for-selected="name"
fallback-selection="view404"
role="main">
<my-view1 name="view1"></my-view1>
<my-view2 name="view2"></my-view2>
<my-view3 name="view3"></my-view3>
<my-view name="view"></my-view>
<my-view404 name="view404"></my-view404>
</iron-pages>
</app-header-layout>
</app-drawer-layout>
</template>
<script>
Polymer({
is: 'my-app',
properties: {
page: {
type: String,
reflectToAttribute: true,
observer: '_pageChanged',
},
},
observers: [
'_routePageChanged(routeData.page)',
],
_routePageChanged: function(page) {
this.page = page || 'view1';
if (!this.$.drawer.persistent) {
this.$.drawer.close();
}
},
_pageChanged: function(page) {
// Load page import on demand. Show 404 page if fails
var resolvedPageUrl = this.resolveUrl('my-' + page + '.html');
this.importHref(resolvedPageUrl, null, this._showPage404, true);
},
_showPage404: function() {
this.page = 'view404';
},
});
</script>
</dom-module>
Please help me.
This has to do with using absolute paths vs relative paths & is kind of a complicated issue (see https://github.com/PolymerElements/polymer-starter-kit/issues/919 as an entry point for more details).
To just get things working you should be able to change this line in your index file:
script.src = '/bower_components/webcomponentsjs/webcomponents-lite.min.js';
to
script.src = 'bower_components/webcomponentsjs/webcomponents-lite.min.js';
However you'll possibly then need some changes to your app routing when running on Cordova, but see if this gets you started.
Related
So I am trying to import google maps into my ionic 2 application. And so far all everything works. the problem arises with me importing the VeiwChild pack from #angular/core. Hence everytime I run the code it gives me the same error.
` Module '"C:/Users/Jay/Documents/maps/node_modules/#angular/core/core"' has no exported member 'VeiwChild'.
C:/Users/Jay/Documents/maps/src/pages/home/home.ts
import { Component, VeiwChild } from '#angular/core';
import { NavController } from 'ionic-angular'; `
Here is my index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Ionic App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#4e8ef7">
<!-- cordova.js required for cordova apps -->
<script src="cordova.js"></script>
<script src="cordova.js"></script>
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.error('Error', err));
}
</script>-->
<link href="build/main.css" rel="stylesheet">
</head>
<body>
<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>
<script src="http://maps.google.com/maps/api/js?key=AIzaSyB0i4Rwgm2oyIOevkQNPydd1BwXJOV2WBk"></script>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<!-- The bundle js is generated during the build process -->
<script src="build/main.js"></script>
</body>
</html>
This is the home.html code
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<div #map id="map"></div>
</ion-content>
this is my home.scss code
page-home {
.ios, .md {
home-page {
.scroll {
height: 100%
}
#map {
width: 100%;
height: 100%;
}
}
}
}
And finally here is my home.ts code
import { Component, VeiwChild } from '#angular/core';
import { NavController } from 'ionic-angular';
declare var google;
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
#VeiwChild('map') mapElement;
map: any;
constructor(public navCtrl: NavController) {
}
ionVeiwDidLoad()
{
this.loadMap();
}
loadMap(){
let latLng = new google.maps.LatLng(-34.9290, 138.6010);
let mapOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
}
}
I'm not entirely sure why i keep on getting this error. This is the video i used as reference.
link
Its just a typo.
This:
import { Component, VeiwChild } from '#angular/core';
Should be this:
import { Component, ViewChild } from '#angular/core';
View NOT Veiw
NOTE: It is also misspelled in several other places, such as here:
#VeiwChild('map') mapElement;
I'm trying to get current address on Google map with Cordova and Ionic framework, very simple project.
Here is the code I have done.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *">
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane ng-controller="AppCtrl">
<ion-header-bar class="bar-stable">
<h1 class="title">Location</h1>
<button class="button button-clear button-royal pull-right" ng-click="uploadLocation()">
<i class="icon ion-ios-upload">Upload</i>
</button>
</ion-header-bar>
<ion-content>
<div id="map" data-tap-disabled="true"></div>
</ion-content>
</ion-pane>
<script src="https://maps-api-ssl.google.com/maps/api/js?libraries=places"></script>
</body>
</html>
app.js
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic', 'ngCordova'])
.controller('AppCtrl', function($scope, $cordovaGeolocation, $ionicLoading, $http, $ionicPopup, $ionicPlatform) {
$ionicLoading.show({
template: '<ion-spinner icon="bubbles"></ion-spinner><br/>Acquiring location!'
});
var posOptions = {
enableHighAccuracy: true,
timeout: 20000,
maximumAge: 0
};
$scope.currentLocation = null;
$cordovaGeolocation.getCurrentPosition(posOptions).then(function (position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
var myLatlng = new google.maps.LatLng(lat, long);
var mapOptions = {
center: myLatlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var geocoder = new google.maps.Geocoder;
geocoder.geocode({ 'location': myLatlng }, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'I an here!'
});
$scope.currentLocation = results[0].formatted_address;
console.log($scope.currentLocation);
}
})
$scope.map = map;
$ionicLoading.hide();
}, function(err) {
$ionicLoading.hide();
console.log(err);
});
$scope.uploadLocation = function() {
console.log(5555555555)
var link = 'http://dashboard.tiniestory.com/api/set';
$http.post(link, {location: $scope.currentLocation})
.then(function(res) {
$ionicPopup.alert({
title: 'Alert',
template: 'Your location "' + $scope.currentLocation + '" has been sent to the server.'
});
});
}
})
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
style.css
#map {
height: 100%;
width: 100%;
}
It works fine on both Browser and iOS device.
But not working on Android, how can I fix this?
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
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>
In my application when I move from index1.html to index2.html,It shows black screen while retriving large amount of data from the server, stored in local database and retrieving the data from local database in onload of index2.html.How to show the progress bar when the black screen is appeared or how to remove that black screen?.
update
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Login</title>
<script type="text/javascript" charset="utf-8" src="js/phonegap-1.0.0.js"></script>
<link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script type="text/javascript">
function submit()
{
alert("welcome");
window.open("index2.html");//while loading index2.html i need the progress bar
}
</script>
<style type="text/css">
.ex2{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-color:#FBB917;
border: 1px solid;
}
body {
font-family:Arial,Geneva,Verdana,sans-serif;
font-size: 0.8em;
overflow-x: hidden;
}
#loadingScreen {
background: url(images/ajax-loader.gif) no-repeat 5px 8px;
padding-left: 25px;
}
/* hide the close x on the loading screen */
.loadingScreenWindow .ui-dialog-titlebar-close {
display: none;
}
</style>
</head>
<body >
<input type="button" style="width:80%" value="Submit" onClick="submit()"/>
</body>
</html>
Android code
public class MobilyzerActivity extends DroidGap {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// setContentView(R.layout.main);
super.loadUrl("file:///android_asset/www/index.html");
}
}
If you are using frameworks like JQueryMobile then you have the option of showing loading dialog.
showing
$.mobile.showPageLoadingMsg()
hiding
$.mobile.hidePageLoadingMsg()
Are you using plain HTML?? any framework??