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
Related
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.
I started with Ionic and I made some first app, and that app works great on browser (windows 8 PC), but when I build app and try on the phone doesn't want to show map. Location as a number I can get on the phone too, but position on map I can't. Can anyone knows why?
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">
<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body ng-app="inception">
<ion-nav-view></ion-nav-view>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic-material/dist/ionic.material.min.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>
<script src="app/application.js"></script>
<script src="app/controllers/mainController.js"></script>
<script src="app/controllers/locationController.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDVYeH02dc5EyoYaqpYSFsogSlkOx2S2o4&sensor=true"></script>
</body>
</html>
application.js
angular.module('inception', ['ionic','ionic-material','ngCordova'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
controller: 'locationController',
controllerAs:'locCtr',
templateUrl: 'app/views/location.html'
})
;
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/home');
});
controller
(function() {
'use strict';
angular
.module('inception')
.controller('locationController', locationController);
locationController.$inject=['$cordovaGeolocation','$http'];
function locationController($cordovaGeolocation,$http) {
var vm = this;
vm.locationOn = false;
vm.showSpinner = false;
vm.getMaps = getMaps;
function getMaps() {
var options = {timeout: 10000, enableHighAccuracy: true};
$cordovaGeolocation.getCurrentPosition(options).then(function(position){
var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var mapOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
vm.map = new google.maps.Map(document.getElementById("map"), mapOptions);
google.maps.event.addListenerOnce(vm.map, 'idle', function(){
var marker = new google.maps.Marker({
map: vm.map,
animation: google.maps.Animation.DROP,
position: latLng
});
});
}, function(error){
console.log("Could not get location");
});
}
}
})();
view
<ion-header-bar class="bar bar-header bar-calm">
<h1 class="title text-center">Test</h1>
</ion-header-bar>
<ion-content class="has-header">
<div class = "row colors-back">
<div class = "col col-100">
<button class="button button-block button-balanced" ng-click="locCtr.getMaps()">
Get the map
</button>
<div id="map"></div>
</div>
</div>
</ion-content>
I am learning to develop mobile app using Phonegap and jquery mobile.
I have the main page with a list (index.html).
If user taps on an item, it should go on the next page.
Now this next page takes the id of the item, and the next page (a separate html file, second.html) contains the details related to this item.
So I need to know the id of the item tapped on the main page, and this second.html should display data accordingly.
What I want to know is, what do I use to pass the id from main page to second page? I am currently trying to pass data by using GET parameter (second.html?id=xyz), but don't know how to catch it on the second page.
I also read a method using localstorage, But i am not sure if that is a good idea, considering this will go on with the user going to third page, fourth page, and so on. so there'll be a lot of data saving into the local storage.
First page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="js/Jquery/jquery.mobile-1.4.5.css" />
<title>Restaurant App</title>
<script type="text/javascript" src="js/configs/server.js"></script>
<script type="text/javascript" src="js/Jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/Jquery/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="page" id="local">
<div data-role="main" class="ui-content">
<h2> Nearby Restaurants</h2>
<ul data-role="listview" data-inset="true" id="nearbyrestaurs">
</ul>
<script type="text/javascript">
var li = "";
$.getJSON(hostname + "/restaurants/?format=json", function(data) {
$.each(data, function(item, value) {
li = "<li><a rel=external href='menu.html?restid=" + value["id"] + "'>";
li += "<img src='";
li += hostname;
li += value["dp"];
li += "' class='ui-li-icon'>";
li += value["name"]
li += "</a></li>";
$("#nearbyrestaurs").append(li).listview('refresh');
});
})
</script>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="js/Jquery/jquery.mobile-1.4.5.css" />
<title>Restaurant Menu</title>
<script type="text/javascript" src="js/configs/server.js"></script>
<script type="text/javascript" src="js/Jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/Jquery/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="page" id="menupage">
<script type="text/javascript">
</script>
<div data-role="main" class="ui-content">
<h2> Menu</h2>
<ul data-role="listview" data-inset="true" id="Menus">
</ul>
<script type="text/javascript">
$.urlParam = function(name) {
var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(location.search);
if (results == null) {
return null;
} else {
return results[1] || 0;
}
}
var li = "";
restid = $.urlParam('restid');
$.getJSON(hostname + "/menus/?format=json&restid=" + restid, function(data) {
$.each(data, function(item, value) {
li = "<li><a href='";
li += "#"
li += "' class='ui-li-icon'>";
li += value["name"];
li += "</a></li>";
$("#Menus").append(li).listview('refresh');
});
})
</script>
</div>
</div>
</body>
</html>
You can use location.search:
var params = location.search;
Params will have ?id=xyz. After that you can parse the string to obtain what you want.
Here is a related question :
Passing Data between pages with JQuery Mobile
You have a function like this already:
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
Usage:
var yourId = getParameterByName('Id');
Maybe, your specific case could be:
$.getJSON(hostname + "/menus/?format=json&restid=" + $.urlParam('restid'), function(data) {
Or possibly:
$.getJSON(hostname + "/menus/?format=json&restid=" + getParameterByName('restid'), function(data) {
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>
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.