I'm trying to resolve an issue with uploading a live kml file to the google maps api. I have a live website that I uploaded the kml file to, but when I use the url within the call function it doesn't show up in the google maps api. It's a public kml file....the website that I'm trying to use the google maps api is not live, just run off my desktop at the moment.
any thoughts on what I'm doing wrong? The website kml link is: http://www.gsphotoalchemy.com/170113.kml
var ctaLayer = new google.maps.KmlLayer({
url: 'http://www.gsphotoalchemy.com/170113.kml'
});
ctaLayer.setMap(map);
}
I can post the full html code if needed, thanks in advance!
your KML file is too big, see the KML reference for size and complexity limitations:
feedvalidator
If you do something like this in your code to check the status of the KmlLayer:
google.maps.event.addListener(kmlLayer, "status_changed", function() {
document.getElementById('kmlstatus').innerHTML = "Kml Status:"+kmlLayer.getStatus();
});
you will get:
Kml Status:DOCUMENT_TOO_LARGE
example
I'm trying to create an app that loads a website and then adds some custom CSS to adjust it to a mobile device.
I'm using window.open to load the page successfully, and I have a callback on loadstop where I'm calling browser.insertCSS, this is where the problem is.
If I do something like this:
browser.insertCSS({code:"body{background-color:red;}");
The style is applied correctly. However if I do this:
browser.insertCSS({file:"mobile-style.css");
And add the same CSS to the file, it doesn't get loaded
I have tried different paths (putting the file in the www folder, in the css folder, in the same folder as the JS file, and referencing it with "./mobile-style.css", "mobile-style.css", "/www/mobile-style.css", "/mobile-style.css" but none of them seem to load the file correctly.
I saw another post What should file paths fed to insertCSS() be relative to? where this same question was asked, but there is no accepted answer (I have tried the suggestion there and it doesn't work).
Any help would be greatly appreciated.
Thanks
Will
you have to wait until your inAppBrowser page loading finishes.
You must add an event listener:
var inApp = window.open('mypage.html', '_blank', 'location=no');
inApp.addEventListener('loadstop', function(){
inApp.insertCSS({
file: 'inAppStyle.css'
},onSuccess);
});
EDITED
Use this path for your android projects file:///android_asset/{your folder}
INFO: https://github.com/apache/cordova-plugin-file/blob/master/doc/index.md#android-file-system-layout
I couldn't find the right local path. Instead, I just uploaded the css file to the web and provided a regular URL
file: 'http://mywebsite.com/path-if-needed/my.css'
Not ideal to have an external dependency, but not a big deal since InAppBrowser itself requires internet access.
I probably know why it won't work, it is because your path isn't right, this css file should not put in www folder, neither the cordova project folder, u should put it into the server, for example, if ur browser is to visit http://192.168.1.1/admin, then the cordova only fetch this file when the browser is under the 192.168.1.1/admin, it fetch the file under the server directory.I don't know if u use any debug tool , if u use one, it's easy to find out what went wrong, ur console will log the error which path it fetch the css file and didn't get it.
If you want to add an external CSS file stored locally in the APP's sandbox and not around in the Internet, this is the only way, that is, you get the external file, you store it into a string variable, and then you insert such code into the Browser.
var inAppBrowserRef = cordova.InAppBrowser.open(url, "_blank", "location=no");
//when load stops call loadedCallbackFunction
inAppBrowserRef.addEventListener('loadstop', loadedCallbackFunction);
function loadedCallbackFunction() {
console.log("InAppBrowser Window loaded");
$.ajax({
type: "GET",
url: cordova.file.applicationDirectory + "www/css/myExternalCSS.css",
dataType: "text",
success: function (CSScode) {
inAppBrowserRef.insertCSS(
{ code: JScode},
function(){
console.log("CSS code Inserted Succesfully into inApp Browser Window");
});
},
error: function () {
console.error("Ajax Error");
}
});
}
You need the cordova-plugin-inappbrowser
I have the Google Earth plugin installed and it seems to work fine.
What I would like to do is open a KML file (exported from MyTracks on Android) in it.
But, I can find no option to open the KML file, or launch the GE plugin.
Is this possible ?
To launch the plugin take a look at the 'Using the Google Earth Api' section in the developer's guide.
For loading KML files, take a look at the following documentation https://developers.google.com/earth/documentation/kml
It give examples of how to fetchKml and parseKml as well as linking to a working example.
var href = 'http://code.google.com/'
+ 'apis/earth/documentation/samples/kml_example.kml';
google.earth.fetchKml(ge, href, function(kmlObject) {
if (kmlObject) {
ge.getFeatures().appendChild(kmlObject);
}
});
You can also use a KmlNetworkLink to load the data again the document links to a working example of this.
var link = ge.createLink('');
var href = 'http://code.google.com/'
+ 'apis/earth/documentation/samples/kml_example.kml'
link.setHref(href);
var networkLink = ge.createNetworkLink('');
networkLink.set(link, true, true); // Sets the link, refreshVisibility, and flyToView
ge.getFeatures().appendChild(networkLink);
Hi I am facing problem with Google map in sencha touch 2. Following is the code ..
new Ext.application({
name:'Touch Start',
launch:function(){
var map = new Ext.Panel({
fulscreen:true,
items:[
{
xtype:'map',
useCurrentLocation:true,
}
]
});
this.viewport = map;
}
});
Please Help is anyone know about this
First of all, and before your question gets closed, you're not exactly telling us what the problem is with your code. So, I guess you can be facing two different problems
Google Maps API is required
Be sure to add the script tag that load the Google Maps API. You can find infos here
No Layout
Your main panel doesn't contain any layout, so it doesn't know how to display its items
Try to add this to the config :
layout: 'fit'
Here's a working example where the Google Maps API is loaded asynchronously :
http://www.senchafiddle.com/#MhAME
Hope this helped
I am looking to add a small splash screen at the launch of an app I am working on to show licence and version info along with details of some client specific info. Having set my default window dimensions etc in tiapp.xml I am now looking at how to override these on a specific user window (namely index.html).
I've had a dig through the API and thought I had found what I was looking for, but on testing it doesn't do anything to the window dimensions. I know it will be my doing (I'm a php man trying desperately to learn javascript!) but can someone have a look at my code and point out the error of my ways...
In the of my index.html I have the following code:
<script>
var Ti = Titanium;
var window = Ti.UI.currentWindow;
window.setHeight(250);
window.setWidth(500);
</script>
I'm guessing I've either messed up my javascript or TideSDK syntax??
you have used the reserved variable "window", which belongs to JavaScript and can't be overwritten.
The following code works for me:
var Ti = Titanium;
var this_window = Ti.UI.getCurrentWindow();
setTimeout(function(){
this_window.setHeight(250);
this_window.setWidth(500);
}, 3000);
If you want to learn to write good JavaScript, I can give you a couple of book recommendations.