OpenLayers 3 - Bing maps won't load in Windows App - javascript

I'm trying to load Bing maps using OpenLayers 3 in a Windows application. However, i'm facing the following error:
APPHOST9601: Can’t load <https://dev.virtualearth.net/REST/v1/Imagery/Metadata/AerialWithLabels?uriScheme=https&include=ImageryProviders&key=Ao9wqOnCiDvABI4LnDdguzUE0lbF1PiAcDSYHkKdezCage1xuUXY2emXAuHzdOUX&jsonp=olc_9>. An app can’t load remote web content in the local context.
I've tried adding the following line to the ContentUriRules in the manifest without success:
<Rule Match="https://dev.virtualearth.net/*" Type="include" />
I do not want to load the OpenLayers map in an iframe, because then I have to use the postMessage function to pass data to the iframe from classes outside the iframe. Is there a workaround to get the Bing maps working?

Without using an iframe, the Windows app will not let you to load any external script references. I recommend taking a look at using Apache Cordova which hosts everything in an iframe and also gives you access to the native features of the Windows app.

I've managed to fix the issue by adding a function to the OL library that loads an url containing JSON data without using JSONP. Now the data is seen as JSON instead of Javascript (inherent to JSONP) and thus the security restrictions do not apply anymore.

The loading time can be long for this request. I wonder if we could avoid making it every time the window is refreshed.
I also have a problems with stereographic projection but otherwise it's OK.

Related

How to use google maps in cordova Ionic windows phone app

I'm facing a rather annoying problem in my cordova/ionic app for windows phone.
As all external scripts are blocked by the windows phone cordova platform, I cannot include and use the google maps js api.
I read up on some issues here and googled the problem, and found out that you can include external scripts within an iframe and use it form here. Did that, works fine.
However, I would like to use the google maps api from my parent frame. I tried passing the google variable from the iframe to the top frame by assigning:
parent.google = google
This gives me an access denied error due to cross domain security mumbo jumbo in IE. Then i tried assigning document.domain to something that is the same for both parent and child frame, but this produces a JS error.
I'm not able to use postMessage as methods on the google will not be stringify'ed.
My question is: is there a way to pass google to my top frame as an object in IE?

How do I load Google Maps JS API in PhoneGap to use it multiple times?

I'm developing a PhoneGap application with multiple pages and some of them show a map.
Now what I'm trying to do is to load the Google Maps API when the page loads so I can access it whenever I need it. Now there are several options:
Load the script without a callback parameter in the URL ...(url)&callback=functionName when the page loads
Result: the google.maps object is created but it's almost empty. The functions are all missing.
Load the script with a callback parameter in the URL when the page loads
Result: the functions in google.maps are all available, but when I create a Map, I only get an empty <div style="overflow-x: hidden; overflow-y: hidden;"></div> inside the container element. So it seems it starts to create the map, but the rest is missing.
The funny thing here is: it works perfectly in desktop browsers, but it does not in a phonegap application - doesn't matter if Android or iOS.
Load the script with a callback, but every time a map should be displayed
Result: it seems to work, but an error/a warning in the console shows up, telling me there may occur unexpected problems if I load the Maps API more than once. Plus it creates unnecessary server requests which slow down the application.
Running option 2 in Ripple Emulator tells me that the application tries to open a InAppBrowser when I open a page that should display a map. I don't have much experience with InAppBrowser, so I don't know what this is trying to tell me or if it even is related to the problem...
Currently I'm including the script via a simple
var script = document.createElement('script');
script.type ...
script.src = 'http://maps.googleapis.com/.....';
document.body.appendChild(script);
Does anyone know how to include and use the API in a case like this?
Also the parameters I want to pass to the new google.maps.Map() constructor differ. So I need a flexible way to do this.
Thanks for any help
Andreas

Load Places API library from Chrome Extension

I'm writing a Chrome extension to add Google Maps autocomplete to Google Calendar's new event location input. I'm trying to load the library in the extension context but it blocks saying [blocked] The page at domain.com ran insecure content from anotherdomain.com.
I of course have added http://anotherdomain.com to the manfest.json in the "permissions" key. In order to load the actual places library I just downloaded it from http://maps.googleapis.com/maps/api/js?libraries=places&sensor=true, since i didn't know how to add it directly to the extension.
So far, it seems it is impossible, so I just used the JSON API and jQuery UI's autocomplete. Here's my trivial implementation https://gist.github.com/3623683

Override to read local JS-file in web app wrapper

Im looking into creating a web wrapper for a existing web app. I clearly want to make it as quick as possible.
Is it possible to host the JS-files locally, instead of having to download the file, without altering the existing web app?
Using a WebViewClient you can prevent loading the javascript from the web server (edit only in API level 11 and higher unfortunately). Or you can disable JavaScript, load the page, then enable JavaScript again. After the page is loaded you can modify the DOM using javascript: urls to load the scripts from a local url (like file:///android_asset from the top of my head).
You can also change the cache strategy of the WebView so that it will never fetch anything that is already fetched once before, which might also be what you want in this case. These are set in http://developer.android.com/reference/android/webkit/WebSettings.html, you could set it to LOAD_CACHE_ELSE_NETWORK in this case.

How to make a Google Maps API (.js) file a part of a widget for Mobiles

I would like to create a Web App for device. For that I would have some script being stored on device, instead of downloading them all time when I start application. As far as I saw including a GoogleMaps API makes some additional request for javascript files. Is there any way of having all of them taken directly from local store? Or is this always have to refeer to google web address? Thanks for any answers here!
No, you always must load them from the Google site. They offer no way to run Google Maps locally. The GMaps scripts are generated on the fly, based upon (among others, I'm sure) the HTTP_REFERER header of the request. That's how they can bind an API key to a specific website.

Categories