Just started developing hybrid apps with the ionic framework, and ran into a little problem.
I am trying to embed a Google map, but can't wrap my head around a lille issue.
First, I downloaded and implemented the "Angular Google Maps" from
http://angular-ui.github.io/angular-google-maps/
Then I created a API key through the Google developer console.
Added my applications id, from the config.xml, to the allowed url's
Added the key as part of the config section:
uiGmapGoogleMapApiProvider.configure({
key: 'added the key here',
v: '3.20', //defaults to latest 3.X anyhow
libraries: 'weather,geometry,visualization'
});
Added uiGmapgoogle-maps as a module
Placed <ui-gmap-google-map center='map.center' zoom='map.zoom'></ui-gmap-google-map> where I wanted the map to be.
....and now the problem:
When I fire up the app in the Ripple emulator, the maps shows just fine, for a second, and then tells me that the page was unable to display a Google Maps element, and gives me an "InvalidKeyOrUnauthorizedURLMapError", but it is an periodic error, because somethimes it actually works, without throwing an error, but then I try it on a live device, and the screen is just blank.
It is pretty safe to say, that I forgot something, or doing something wrong, but thank you very much in advance.
[EDIT]Well, if I remove all the restrictions for the Google Maps API, it works in the Ripple emulator, so I can change the question to: What url am I supposed to specify as allowed, when it is a cordova app?
And what causes the empty map when executed on a real device?[/EDIT]
Related
I have a personal project which consumes my free time and effort for about a year without significant profit. I have problems with it appearance in Google and would really appreciate to get help here.
This project (http://yuppi.com.ua - similar to craiglist in US) is WEB-based AngularJS 1.2 application that uses PHP rest API hosted on GoDaddy. And in order to make this application popular it have to be very visible in internet and very searchable in Google and users have to be able to share pages via social networks or skype.
According to Google specification, google crawlers doesn't run javascript to get content of a web page before index, so I've added _escaped_fragment_ page that displays content of web page without javascript. For example:
Page: http://yuppi.com.ua/#!/items/sub/18/_
Dirty : yuppi.com.ua/?_escaped_fragment_=/items/sub/18/_
This dirty page will be redirected here where google will see content.
http://yuppi.com.ua/server/crawler_proxy/routee.php?path=/items/sub/18/
So basically I have two versions on HTML file for that page. One version is the one that available to users, which has styles, a lot more HTML tags etc. And the second is the version for Google crawler - very light-weight without any styles. And I am expecting to see clean link to my site in Google, not dirty.
So, If to search all links to a web site in Google you will see that one of the links displays it's "dirty" state.
Another problem is sharing links in Skype.
When I send a link to someone, I am expecting that this link will be transformed to thumbnail image but it is not happens. Instead I see ungly link to my web site.
Please help me to understand how to make happy everyone: users, google crawler, GoDaddy and me.
I was encountering the same problems last year with a big project and we ended to use : https://prerender.io/.
It's a prerendering system that work with a phantomjs browser to detect bot request and render a full html template. It does also instanciate a cache service to not render again a template that haven't change.
Hope it help's.
I have an issue with share/like button from Angular app. I finally made it working correctly with links but share/like preview if completely wrong. I tried XFBML.parse(), switching to html 5 mode, etc.
There are two complete enigmas:
1. I got "Given URL is not allowed by the Application configuration..." despite adding all possible variants to fb app setting.
When share preview appear - it has "Angular", but I never added it anywhere.
Here is the link
Would be grateful for any ideas...
Thx
The Facebook Scraper only looks at the HTML code your server delivers, it does not execute any JavaScript.
So if you want to share different articles, you need an individual URL for each article, that delivers the relevant meta data when requested from the server.
You can find some more explanation and hints on how to implement this in this article, http://www.michaelbromley.co.uk/blog/171/enable-rich-social-sharing-in-your-angularjs-app
I am trying to design a mobile first web app using Google Apps Script.
I would try to replicate the most basic Bootstrap page (http://getbootstrap.com/examples/navbar) in a Google Apps Script.
This is the way the bootstrap page should render on my mobile device:
but instead my page loads like this (ie. http://goo.gl/yZpgUg):
This is my code.gs:
function doGet() {
return HtmlService
.createTemplateFromFile('index')
.evaluate()
.setSandboxMode(HtmlService.SandboxMode.NATIVE);
}
My index.html is copied and pasted from http://getbootstrap.com/examples/navbar with CDNs replaced as appropriate.
I figured HtmlService.SandboxMode.NATIVE was important to get this to work but doesn't seem to work.
Dear world - any help would be greatly appreciated.
Cheers.
UPDATE 1 - (THANKS FOR YOUR RESPONSES!)
in IFRAME:
IFRAME console errors (2):
NATIVE console errors (lots):
Bottom line - clearly GAS is not liking it and doesn't seem super straight forward - I've ended up turning the GAS into an API which returns JSONP from the spreadsheet I need - much more straight forward. Thank you for all your help!
I know you decided to go another route, but I got this to work in the same scenario. You can simply add the meta tag on the GAS code using the following code:
var output = HtmlService.createHtmlOutput('Hello, world!');
output.addMetaTag('viewport', 'width=device-width, initial-scale=1');
So when you serve up your html in doGet add the meta tag. Check out this link for more information: https://developers.google.com/apps-script/reference/html/html-output#addMetaTag(String,String)
Apparently Google can't load Bootstrap from their server, try copying everything to GAS and include in the page as explained in best practices. Also switch back to IFRAME when testing.
I created an app in Java in Eclipse on Google App Engine. For about a year now, I've had that app embedded in a google site iframe as a gadget. I added it using the "add gadget by URL" option and put in the URL of the app: https://mycompany-helpdesk.appspot.com (where mycompany is my company's actual name).
This has been working flawlessly for about a year. Recently I made a small change to the Java code, and it seemed like about a week after that change, the app will not display in Google sites anymore.
The app works just fine if I navigate straight to its URL https://mycompany-helpdesk.appspot.com.
I removed the gadget iframe on my google site and then tried to add it back, but the error I'm getting now is:
The gadget you added is not valid
Unsupported feature: org.apache.shindig.common.xml.XmlException: The markup in the document preceding the root element must be well-formed. At: (1,3)
I have a couple of these apps and I tried using the other one, but I get the same error. I've tried to add them on other google sites and even created a fresh one and still get the same error. I've spent days googling this but I don't think I've found anything that applies to my situation.
Did something change where suddenly it is not possible to do this anymore? If I can't embed the app this way any more, does anyone know of another way that I might be able to do this?
UPDATE: When I am editing the site, under Insert > More gadgets, if, instead of using the "Add Gadget by URL" link (which is what I've been using to insert this gadget) I use the "Include gadget (iframe)" gadget developed by Scott Johnston, then my apps will appear in Firefox and Safari, but not Chrome. This is not useful to me as our employees primarily use Chrome.
I think I'm just going to abandon Google Sites and redo the page in GAE. Hope this helps someone else who has been banging their head against their desk as I have been.
Update: I noticed that suddenly all the embedded apps on my test pages were working, so I reverted to an old version of the google site where the app was still embedded. Voila, it works again. Now if I can just figure out how to add in another embedded app I'll be good to go. It had been working in Safari and Firefox but that doesn't seem to be working now...
This is my first post on stackoverflow, I've looked around and haven't found an answer to this one yet:
I've got highcharts in a gwt application running on gae. Over http highcharts works fine, forcing https through setting security-constraint as CONFIDENTIAL in web.xml causes the application to be unable to render charts.
In main html page I am calling is 'script type="text/javascript" src="js/highstock.js">
Must the application allow unsecure resources in order to run highcharts then?
In case when you would like to use highstock by SSL, you need to download file from our website and load locally.