I am new to ionic platform. I am trying to implement Google map in my app.Map is displaying when I am testing on browser but when running on real device on Android it is just displaying white screen. I have tried different number of things as recommended in different threads. I have applied changes in config file as mentioned in below link
https://github.com/driftyco/ionic-starter-maps/issues/10
but no luck and have applied changes using different number of meta tags individually as describes in other threads but no luck. In console I can see the error as 'Uncaught ReferenceError: google is not defined'. For this I have tried different thread as mentioned below
Uncaught ReferenceError: google is not defined
but still getting the same error. I am not able to figure this error out.What else I am missing below is the code I am sharing used in my app.Index page code is
This is my controller code
.controller('MapCtrl', function($scope, $ionicLoading) {
google.maps.event.addDomListener(window, 'load', function() {
var myLatlng = new google.maps.LatLng(37.3000, -120.4833);
var mapOptions = {
center: myLatlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var myDiv=document.getElementById("map");
var map = new google.maps.Map(myDiv, mapOptions);
});
})
and below are the lines I have added in config file as recommended in different threads
<access origin="*"/>
<access origin="http://maps.google.com"/>
<access origin="https://maps.google.com"/>
<access origin="http://*.googleapis.com"/>
<access origin="https://*.googleapis.com"/>
Any help
It seems that you haven't well imported Google Maps in the file index.html.
The issue is the line :
<script src="//maps.google.com/maps/api/..."></script>
On a browser it will load this script : http://maps.google.com/maps/api/... since you are serving the file through http.
But on a device, you are serving the file through file:// so it will try to load this script : file://maps.google.com/maps/api/...
That is not available.
So you need to specify https like this :
<script src="https://maps.google.com/maps/api/..."></script>
Related
I had to take over and android app working with phonegap - leaflet/MapQuest/openstreetmap
It broke because MapQuest stopped direct access to tiles and the map wouldn't show up anymore.
I then added the key and modified the code as suggested here : https://developer.mapquest.com/documentation/leaflet-plugins/maps/
I use this code :
<link rel="stylesheet" href="scripts/leaflet-0.7.7/leaflet.css" />
<script src="scripts/leaflet-0.7.7/leaflet.js"></script>
<script src="https://www.mapquestapi.com/sdk/leaflet/v2.s/mq-map.js?key=validKeyNumberThatIWontReveal"></script>
In the following structure :
And my JS :
var popup = L.popup();
var geolocationMap = L.map(b, {
layers: MQ.mapLayer(),
center: [40.731701, -73.993411],
zoom: 12
});
Which workout well when I try it on a browser.
But when I compile on my android phone with Android studio I get this error :
'MQ is not defined'
It used to work fine with scripts/vendor/leaflet-0.7.
My wild guess would be : it somehow doesn't reach the library scripts/leaflet-0.7.7 but I can't see why.
I ended up having 2 problems, one of my own and one that could help any reader :
I wasn't declaring the leaflet script at the right place (the page I declared it in). For reference see : https://developer.mapquest.com/documentation/leaflet-plugins/open/
Problem of URL described there : mapquest direct tile access discontinued
For the sake of easiness this is the answer
It's as simple as changing your tileUrl.
Replace this:
var tileUrl =
'http://otile{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png?x';
with this:
var tileUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
Then use as before:
L.tileLayer(tileUrl, { }).addTo(map);
#Joel Harris
I'm building a meteor / cordova app that consists of a template with a Leaflet map, where the tiles and icons are provided by mapbox (I'm not sure if it's relevant).
The app is using the bevanhunt:leaflet package, and is running fine when deployed on a web browser.
var map; //outside of the template
Template.map.rendered = function() {
L.Icon.Default.imagePath = 'images';
if (!map) {
map = L.map('map', {
doubleClickZoom: false,
zoomControl: false
});
}
var attributionText = "<a href='http://zencity.io/' target='_blank'>ZenCity © </a>" +
"<a href='https://www.mapbox.com/about/maps/' target='_blank'> Mapbox ©" +
" OpenStreetMap</a>";
L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: attributionText,
id: 'someID'
}).addTo(map);
//some code to put makers on the map
}
I should say that the markers / popups appear fine (But their images are not present; a minor problem, I will try to take care of that), but the map does not seem to initialize.
Do I need to create the map outside of the Template.map.rendered code?
Do I need to add configuration to enable leaflet / mapbox to work with Cordova/android?
Any help would be appreciated here.
Meteor 1.0.4 introduced the App.accessRule setting to mobile-config.js. You need to add the URL for the tile provider to it like this:
App.accessRule('https://*.tiles.mapbox.com/*');
Basically, for security reasons Cordova apps may not connect to any URL they like. This is what this white list is used for. It restricts from what URLs content may be loaded. As the tile URL is different from your app URL it gets rejected by default. Using the App.accessRule setting you allow additional URLs. The supported domain patterns vary slightly between Android and iOS, you can find them in the official docs. Asterisks (*) can (and must) be used as wild cards, here for supporting the dynamic subdomain.
-- Problem solved. The cauase was a malicious DNS server that masks google analytics code and loads altered code --
For 8 hours I'm struggling with a javascript file, still I couldn't solve issue.
In my Android application I use webview. So normally it loades pages from my webserver. But it seems like, when my android application is installed firstly, After page load a dynamical js file is loaded.
When I debug I see in my WebView's onLoadResource(WebView view, String url) method, it is from histats.com. I don't use histats page. I only use statcounter and google analytics.
So it seems like, one of the content of my page dynamically loads histats.js. When histats is loaded it shows an Adsense advertisement on top of my page. You can find loaded js files below.
To test this case, everytime I uninstall my application and reinstall it. Because this behaviour only happens in the first webview load.
Temporarily I stopped loading Google analytics code to not to show the advirtesements, that are loaded by histats. When analytics.js is not loaded, histats.js doesn't load or doesn't show an advertisement. But I need a permanent solution. Also note that when onLoadResource is fired, histats.js file is already loaded.
Notes:
- I don't think that will be the cause but last week I activated demographics and interests report
- In my website I use adsense but my opening page doesn't have adsense code.
So how can I find out which element causes this ?
http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css
http://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.4.33/example1/colorbox.css
http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js
http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js
http://cdn.jsdelivr.net/colorbox/1.5.6/jquery.colorbox-min.js
http://www.statcounter.com/counter/counter.js
http://netdna.bootstrapcdn.com/bootstrap/3.1.1/fonts/glyphicons-halflings-regular.woff
http://c.statcounter.com/t.php?sc_project=9470079&resolution=480&h=800&camefrom=&u=http%3A//example.com/mains/mypage/&t=Mobile%20hub%20-%20example.com&java=1&security=f927fd2c&sc_random=0.5743160555139184&sc_snum=1&p=0&invisible=1
http://www.google-analytics.com/analytics.js
http://s10.histats.com/js15_as.js
http://ad.exisolutions.com/gads/sp_336x280.html
http://s4.histats.com/stats/0.php?2672616&#f16&#g1&#h1&#i1&#j1400933555245&#k0&#l1&#mMobile%20hub%20-%20example.com&#n0&#o1000&#q0&#r0&#s0&#ten-IE&#u480&#vhttp%3A%2F%2Fexample.com%2Fmains%2Fmypage%2F&#w
http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
http://googleads.g.doubleclick.net/pagead/html/r20140520/r20140417/zrt_lookup.html
http://pagead2.googlesyndication.com/pagead/js/r20140520/r20140417/show_ads_impl.js
http://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-4244446356287789&format=336x280&output=html&h=280&slotname=1396969791&adk=1267119624&w=336&ea=0&flash=0&url=http%3A%2F%2Fexample.com%2Fmains%2Fmypage%2F&dt=1400933556220&bpp=179&shv=r20140520&cbv=r20140417&saldr=aa&correlator=1400933557079&frm=24&ga_vid=931282578.1400933557&ga_sid=1400933557&ga_hid=1996810608&ga_fc=0&u_tz=180&u_his=1&u_java=0&u_h=800&u_w=480&u_ah=800&u_aw=480&u_cd=32&u_nplug=0&u_nmime=0&dff=sans-serif&dfs=16&adx=0&ady=0&biw=-12245933&bih=-12245933&isw=336&ish=280&ifk=1348755138&eid=317150304%2C317150313&oid=3&rx=0&eae=2&jp=2&brdim=0%2C38%2C0%2C38%2C480%2C0%2C480%2C762%2C336%2C280&vis=1&fu=0&ifi=1&dtd=967
http://pagead2.googlesyndication.com/pagead/osd.js
http://googleads.g.doubleclick.net/mads/static/formats/templates.js
http://pagead2.googlesyndication.com/pagead/images/adc-i-00aecd.png
http://googleads.g.doubleclick.net/simgad/17675984934948895957
http://googleads.g.doubleclick.net/pagead/images/mobile_unified_button_icon_white.png
http://csi.gstatic.com/csi?v=3&s=gmob&action=&rt=crf.526,cri.947
http://www.gstatic.com/bg/BcR1_JHsmtBAKR1Crki_wuwBn2NQgHTsJL0mibVeye0.js
http://pagead2.googlesyndication.com/activeview?id=osdim&avi=BAqEktoyAU9C0FaTHiQa57YGoCwCJuoeQugEAABABOAHIAQKgBgKoE4AB&adk=1267119624&p=0,0,280,336&tos=0,0,0,0,0&mtos=0,0,0,0,0&rs=1&ht=0&swf=-&fp=client%3Dca-pub-4244446356287789%26url%3Dhttp%253A%252F%252Fexample.com%252Fmains%252Fmypage%252F%26correlator%3D1400933557079%26ifk%3D1348755138%26eid%3D317150304%252C317150313%26oid%3D3&afp=%26format%3D336x280%26output%3Dhtml%26slotname%3D1396969791%26flash%3D0%26dt%3D1400933556220%26adx%3D0%26ady%3D0%26ifi%3D1&r=i&bs=-12245933,-12245933&bos=480,762&ps=-12245933,-12245933&ss=480,800&tt=2470&pt=2195&deb=1-1-1-4-5--1&iframe_loc=http%3A%2F%2Fad.exisolutions.com%2Fgads%2Fsp_336x280.html&is=336,280
http://s4.histats.com/stats/e.php?2672616&#Ab&#R78479&#w
I also added following script to end of my page. And checked for HTML code.
<script type="text/javascript">
$( document ).ready(function() {
setTimeout(function() {
var htmlData=$("html").html();
var formData = {html:htmlData};
$.ajax({
url : "/log_this/",
type: "POST",
data : formData
});
}, 4000);
});
</script>
It seems like this code is injected to the head section of webpage:
< script type="text/javascript" async="" src="http://s10.histats.com/js15_as.js" >
< /script >
< script type="text/javascript" async="" src="http://s10.histats.com/js15_as.js" >
< /script >
Edit 1:
histats also loads this page: http://ad.exisolutions.com/gads/sp_336x280.html
Regarding to that page's source, it loads adsense ads with this publisher: ca-pub-4244446356287789
Edit 2:
I beautified initial file to find out who injects this.
Ugly file: http://s10.histats.com/js15_as.js
You can find beautified version here: http://jsbin.com/tenunike/1/
Edit 3:
To isolate the problem I stopped all css and js file includes.
No adsense occured. But then I enabled google analytics js file include it happened again.
So histats.js file is included whenever I include google analytics.js file
Edit 4:
After getting that problem is based on google analytis code, I checked my development environment for viruses, etc. So I get that a virus changed my DNS server to an unknown IP, like this: 37.220.8.189.
So analytics code address is this: http://www.google-analytics.com/analytics.js
But my DNS server gives this IP: 188.165.174.188
So resultant analaytics file is this, it has malicious code in it: http://188.165.174.188/analytics.js
I put a copy of this malicious code here for future references: http://jsbin.com/mukijojo/1/edit
Edit 5:
For months this problem occurs every once in a while. So I add mlicious DNS serer address here:
37.220.8.189
31.3.252.69 and 31.3.252.68
Also similar problems:
https://nakedsecurity.sophos.com/2012/10/01/hacked-routers-brazil-vb2012/
http://www.cbits.co.uk/ourblog/news/fake-flash-player-update-virus-routers-tp-link/
http://www.gohacking.com/dns-hijacking/
http://www.gohacking.com/hack-ethernet-adsl-router/
I solved my problem.
The cauase was a malicious DNS server that masks google analytics code and loads altered code.
When I try to access
http://www.google-analytics.com/analytics.js
actually I was reaching
http://188.165.174.188/analytics.js
Although the IP address of 188.165.174.188 doesn't belong to Google IP ranges.
info: https://en.wikipedia.org/wiki/DNSChanger
checking: http://www.dcwg.org/detect/
fixing: http://www.dcwg.org/fix/
I am using AngularJS with Trigger.io to develop a mobile application for both iOS and Android.
When I try to open a link that looks like this:
<a ng-href="#/offers/{{featured_offer.Id}}"></a>
It works perfectly fine on iOS, but on Android I get this message in the trigger console, and the link is not navigated to:
[WARNING] Attempted to open a URL which could not be handled: unsafe:content://io.trigger.forge722b6464a0e211e2ba9d12313d00dc45/src/index.html#/offers/8
How can I get this to work in Android the same as it works in iOS?
Looks like Angular adds unsafe: to url schemes it doesn't recognise, I think you want to include something like:
app.config(function($compileProvider){
$compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel|content):/);
});
Which adds content: to the accepted url schemes.
I had this same problem, specifically with trying to display an img with a src of a file returned by forge.file.getImage. Angular adds unsafe: to the content: prefix of the local img URL, and as connorhd said, you need to add content: to the url whitelist.
Note that compileProvider's API has changed with recent versions of Angular, so I'm commenting here in case anyone else finds an updated version of this workaround useful.
app.config(['$compileProvider',
function($compileProvider) {
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel|content|blob):|data:image|/);
// note: you'll also have to do imgSrcSanitizationWhitelist if you want to use general links as well as ng-src on images.
}]);
I too had this problem just add sanitizer in you config.xml
var app = angular.module( 'myApp', [] )
.config( [
'$compileProvider',
function( $compileProvider )
{
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension):/);
// Angular before v1.2 uses $compileProvider.urlSanitizationWhitelist(...)
}
]);
I really hate asking questions that I feel were asked a thousand times before. This is one of those questions I feel others must have encountered, but having searched stack overflow, none of the supposed solutions work for me so I must be doing something wrong.....
I have an extremely simple app setup. index.htm, and terms.htm. There is some textual data in test.htm. I set both $.support.cors = true; and $.mobile.allowCrossDomainPages = true; at the appropriate time after stuff has loaded.
At first I tried loading terms.htm's data into an element within index using $('#elementid').load('terms.htm'); (both test and index are in the same root /assets/www/ directory, and my webview loads index oncreate) but absolutely nothing was happening. So I opted to try .ajax so that I could at least get an error message, and all I get is 'error'. Surely, it is possible to load local textual assets with JQ on DroidGap?
$('#header').load('terms.htm');
$.ajax({
type:"GET",
timeout:10000,
async: false,
url: "terms.htm",
success: function(data) {
$('#header').html(data);
},
error: function(xhr,msg){
alert( msg);
}
});
I'm not 100% sure, but I think it's a problem with ICS 4.0.3. On 4.0.2 ajax seems to work completely fine, but for me too on 4.0.3, no ajax. Like you, I've tried everything, and nothing has worked..
I'm using PhoneGap btw. Ajax works fine in the standard browser, but not in a PhoneGap app..
If you are running your application in Chrome
Then you need to disable-web-security and enable loading local files see Cross-domain requests using PhoneGap and jQuery doesn't work
Else if Safari or simulator or web-server
Then it should work
See this link. I had the same problem and this solved it. Also, I think they fixed it in 1.6.0 but I am now seeing the same issue on iOS with PhoneGap 1.6.1.
it is just a long shot, but you say "I set both $.support.cors = true; and $.mobile.allowCrossDomainPages = true; at the appropriate time after stuff has loaded.". The jQuery mobile documentation says you have to set your global configuration before you load JQM:
Because the mobileinit event is triggered immediately, you'll need to bind your event
handler before jQuery Mobile is loaded. Link to your JavaScript files in the following
order:
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>
In your case this would be:
<script src="jquery.js"></script>
<script>
$(document).bind("mobileinit", function(){
$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
});
</script>
<script src="jquery-mobile.js"></script>
Like I said, just a guess ...