I can't figure out why for example I try to reproduce something basic like this example https://google-developers.appspot.com/earth/documentation/samples/fetchkml_example on my own, I can't get it to work. I'm using my key that I have been using for my Google Maps API, so I think that part should be fine, but when it comes to KML I can't seem to get it to work regardless of whether it is fetched or parsed. I have put my KML file here https://sites.google.com/site/shahinkmlexamples/experiment/kml_example.kml , and my code is below with my own key number not shown
<html>
<head>
<title>fetchkml_dom_example.html</title>
<script src="//www.google.com/jsapi?key=MYKEY#"></script>
<script type="text/javascript">
var ge;
google.load("earth", "1");
function init() {
google.earth.createInstance('map3d', initCB, failureCB);
}
function initCB(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
var href = 'https://sites.google.com/' + 'site/shahinkmlexamples/experiment/kml_example.kml';
google.earth.fetchKml(ge, href, function(kmlObject) {
if (kmlObject)
ge.getFeatures().appendChild(kmlObject);
if (kmlObject.getAbstractView() !== null)
ge.getView().setAbstractView(kmlObject.getAbstractView());
});
}
function failureCB(errorCode) {
}
google.setOnLoadCallback(init);
</script>
</head>
<body>
<div id="map3d" style="border: 1px solid silver; height: 400px; width: 600px;"></div>
</body>
</html>
so I know the solution has got to be simple, but I just can't figure it out.
Thanks
When you're loading it from a local file (such as using notepad++ and loading that file in Chrome) you need to add a protocol to the script tag:
<script src="//www.google.com/jsapi?key=MYKEY#"></script>
Becomes:
<script src="https://www.google.com/jsapi?key=MYKEY#"></script>
Without that change, your page is looking for the file in your local filesystem.
It's left out in the samples so that your browser will load the HTTPS version if your page is HTTPS, and the HTTP version if your page is HTTP. This prevents security warnings in the browser.
I'm not sure what your problem is. I put your code into an online editor - http://www.onlinehtmleditor.net/
a simple copy and paste and it worked fine.
Also, regarding the API key. For Google Earth you no longer need one. Simply use the generic javascript call below
Related
Does anyone know if there's a service to check if an IP address is in the EU? I'm trying to implement a cookie notification on my website but I only want to show it if it's required by law.
I'm trying to implement this using AMP, and it gives the option to use a URL to check if the notification should be displayed. I know this is probably a long shot, but it needs to return a result like this: (based on the URL the request came from).
{
"showNotification":true
}
I'll probably just end up creating something, just wanted to check on the off chance that someone already did
I just figured out how to do this with amp-geo - I thought I'd share the answer in case anyone else came across it:
Include these JS files:
<script async custom-element="amp-user-notification" src="https://cdn.ampproject.org/v0/amp-user-notification-0.1.js"></script>
<script async custom-element="amp-geo" src="https://cdn.ampproject.org/v0/amp-geo-0.1.js"></script>
Include this code:
<amp-geo layout="nodisplay">
<script type="application/json">
{
"ISOCountryGroups": {
"ineu": ["al","ad","at","az","by","be","ba","bg","hr","cy","cz","dk","ee","fi","fr","ge","de","gr","hu","is","ie", "it","kz","xk","lv","li","lt","lu","mk","mt","md","mc","me","nl","no","pl","pt","ro","ru","sm","rs","sk", "si","es","se","ch","tr","ua","gb","va"]
}
}
</script>
</amp-geo>
<amp-user-notification id="cookie-notif" layout="nodisplay" data-show-if-geo="ineu">
<div>
This site uses third-party cookies, learn more or <a on="tap:cookie-notif.dismiss" class="ampstart-btn caps ml1">accept</a>
</div>
</amp-user-notification>
Is there a way to instantly trigger or execute the downloaded file using html only?
Here is the simple script that I am using and this call will just simply download my app but my aim is not just simply download it but what I need is to execute directly on what I've downloaded on this link
href="http://localhost:8088/main/system/launch/client/MyApp.jnlp"
Appreciate any suggestions or commentsm TIA.
You probably want to read this: https://docs.oracle.com/javase/tutorial/deployment/webstart/deploying.html. The file you're trying to run is kind of like a Java applet, and will require Java to be installed on the client as well as get permission, etc. to open.
That page goes into detail about what html markup is required, particularly this part
Create the HTML page from which your application will be launched. Invoke Deployment Toolkit functions to deploy the Java Web Start application.
In the example, the Dynamic Tree Demo application is deployed in JavaWebStartAppPage.html.
<body>
<!-- ... -->
<script src=
"https://www.java.com/js/deployJava.js"></script>
<script>
// using JavaScript to get location of JNLP
// file relative to HTML page
var dir = location.href.substring(0,
location.href.lastIndexOf('/')+1);
var url = dir + "dynamictree_webstart.jnlp";
deployJava.createWebStartLaunchButton(url, '1.7.0');
</script>
<!-- ... -->
</body>
My guess is you could simplify it by doing something like this:
<body>
<!-- ... -->
<script src="https://www.java.com/js/deployJava.js"></script>
<script>
deployJava.createWebStartLaunchButton(
"http://localhost:8088/main/system/launch/client/MyApp.jnlp",
"1.7.0"
);
</script>
<!-- ... -->
</body>
It seems that when you run the above code, something like this appears below it:
<img src="//java.com/js/webstart.png" border="0">
So you might try just running a modified version of the JavaScript inside of that href. In your case, probably:
const url = "http://localhost:8088/main/system/launch/client/MyApp.jnlp";
if (!deployJava.isWebStartInstalled("1.7.0")) {
if (deployJava.installLatestJRE()) {
deployJava.launch(url);
}
} else {
deployJava.launch(url);
}
My question is similar to the one here Trying to parse JSON file with jQuery but i don't seem to be able to adapt it.
I want to create an offline mobile app mainly using HTML5, CSS and JavaScript/Jquery
All the files in the app will be cashed I hope when I've it working
I had thought to created a JSON file containing some data about computer labs - eg open hours capasity that type of thing
{ "name":"Boole basement",
"location":"Main Campus",
"staffed":"Yes"}
And then read in the localy stored JSON file - parse it or whatever and then display each object in a new div. Initially I was just trying to get the data into one div. heck if I could get the contents of the JSON file to display I'd be delighted!
My HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>test</title>
<script src="jquery-1.6.2.min.js"></script>
<script>
/* <![CDATA[ */
$(document).ready(function(){
var test =" ";
var filename = "test.json";
$.getJSON(filename, function(json){
$.each(json.labs, function(i, lab){
test = lab.name;
test+=" "+lab.location;
$('#space').append(test);
alert("Hi");
});
});
});
/* ]]> */
</script>
</head>
<body>
<h2>available labs:</h2>
<div id="space">some text</div>
</body>
</html>
PS Is what I've discribed even possible...
What you have described is entirely possible, yes. But your code needs work:
For example, your selector for space is incorrect (it's an ID in your mark-up, but you're using a class selector in your jQuery code).
(EDIT OK, I see you've edited your example code now).
Can someone guide me how to include html file with an html file. I have been trying to embed my file within object tags but to no avail.
Thanks!
You can use the iframe tag.
Another option is to used Server Side inclusion using SHTML, this require that the web server support it, see Server Side Includes
You are quite limited in HTML. You can use iframe tag but it's the same type of embedding as embedding of flash in html pages.
OT: It would be quite easy in PHP. Can you use it? Or do you need static web page?
Can you perhaps use Javascript to dynamically load it in?
You can have it loaded via JQuery as shown here: Include another HTML file in a HTML file
a.html:
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function{
$("#includedContent").load("b.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
b.html:
<p> This is my include file </p>
May be this help:
Inside js/utils.js define functions:
function loadFileSync(fileName) {
var req = new XMLHttpRequest();
req.open('GET', fileName, false);
req.send(null);
if (req.status === 200) {
//console.log(req.responseText);
return req.responseText
} else
return "ERROR!!!"
}
function includeFile(fileName) {
document.write(loadFileSync(fileName))
}
And in main html file add this:
<script src="js/utils.js"></script>
<script> includeFile("navigation.html") </script>
I am trying to throw together a website using Ajax for the first time, to finally get with the times and figure it out. So far it is nothing but HTML pages and a bit of JS. Using some basic AJAX script I found online, I have the main index.htm which has a title, navigation, and content divs. The Ajax calls grab other content includes (which are just files with text content for the most part) to throw into the content div. For the most part it works, except for when I am trying to add the Google Directions gadget. When I add the script code it gives me to a file and call that file, there is no noticeable output.
Any suggestions on what I am doing wrong or what I'm missing?
If I am understanding you correctly this is an unnecessary use of AJAX. From what it seems like you want to do is load JavaScript via a JavaScript call. This can be accomplished using either method described here. Example:
<script type="text/javascript">
function dhtmlLoadScript(url)
{
var e = document.createElement("script");
e.src = url;
e.type="text/javascript";
document.getElementsByTagName("head")[0].appendChild(e);
}
onload = function()
{
dhtmlLoadScript("dhtml_way.js");
}
</script>
If the above link does not help or I am misunderstanding your question please provide further clarification or some sort of code example.
Following up on your comment
Here is a work around for your gadget, the below code would be on your main page (the one that is initially loaded). Here is my test HTML page:
<html>
<head>
<script type="text/javascript">
var gadget;
function getGadgetAndMove(node)
{
gadget = document.getElementsByTagName("table")[0];
node.appendChild(gadget);
gadget.style.visibility = "visible";
gadget.style.display = "inline-block";
}
</script>
<style>
.ig_reset, .ig_tbl_line { visibility:hidden;}
</style>
</head>
<body>
<div onclick="getGadgetAndMove(this);">Test</div>
</body>
<script src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/114281111391296844949/driving-directions.xml&up_fromLocation=&up_myLocations=1600%20Amphitheatre%20Pkway%2C%20Mountain%20View%2C%20CA&synd=open&w=320&h=55&title=Directions+by+Google+Maps&brand=light&lang=en&country=US&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script>
</html>
If you need further explanation please let me know.
I believe I know what you want to accomplish, because I ran into the same problem. And I found a solution. So I would say that no it is not an improper use of ajax, because you could run into this in some circumstances.
Put the directions gadget not directly in the page content that is being loaded via ajax, but in a separate file such as "directionsgadget.html" (insert the script tag for the gadget in this file).
Then use an iframe with src="/path/to/directionsgadget.html" in your ajax loaded content.
The gadget should get loaded this way.
If you want the gadget centered within the iframe, you can wrap the script tag in directionsgadget.html in a div with a set width and style="margin:0px auto". That will center the gadget.
Here is an example:
Your main page is "index.html", and contains a div that will contain ajax loaded content:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
url: 'ajaxcontent.html',
success: function(returndata){ $('#ajaxcontent').html(returndata); }
});
});
</script>
</head>
<body>
<div id="ajaxcontent"></div>
</body>
</html>
Then you have a file with the content that is to be loaded via ajax, and this has among other things a google gadget. Were not going to put the gadget directly here, but were going to put it in a separate file and point to it with an iframe. Let's call this first file ajaxcontent.html, as indicated in the ajax call in the head section of the first file:
<span>Here is some content that will be loaded onto the main page via ajax.</span><br />
<span>Among other things, there is a google directions gadget that will be loaded.</span>
<div id="getdirections" style="margin:0px auto;">
<iframe style="width:365px;height:216px;" src="directions.html"></iframe>
</div>
Now we will put the script for the google gadget itself in a separate file "directions.html" (as indicated in the src of the iframe above), and in order for the rendered gadget to be centered we are going to wrap the script tag within a div just so:
<div style="width:336px;height:116px;margin:0px auto;">
<script type="text/javascript" src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/114281111391296844949/driving-directions.xml&up_fromLocation=&up_myLocations=_a_bunch_of_information_with_personal_list_of_locations_&synd=open&w=320&h=55&title=Street+directions+by+Google+Maps&brand=light&lang=it&country=ALL&border=http%3A%2F%2Fwww.gmodules.com%2Fig%2Fimages%2F&output=js"></script>
</div>
I hope this example was clear enough!