I'm trying to use the example code from https://developers.google.com/maps/documentation/javascript/examples/layer-kml (with a few modifications, like lat/long) but every time I try to run it, it says google is undefined.
As a programmer, I'm pretty green-how do I fix it/prevent it, and what does it mean?
Because it is, you need to get Goggle's API first:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API_KEY"></script>
...
<script>
/* Code Here */
</script>
Look here for how to get an API key in the developers guide.
If you look at the HTML+JavaScript notice they included the API at the top:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
In the link you sent, there's a section called "Getting Started":
https://developers.google.com/maps/documentation/javascript/tutorial
In there you will find out that a basic structure of a HTML page that is going to work with the API functionalities needs a declaration of the Javascript containing the API code (i.e., this code will also provide this 'google' object that you need).
https://developers.google.com/maps/documentation/javascript/tutorial#Loading_the_Maps_API
<html>
<head>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=API_KEY">
</script>
Related
I realize that this may be a moot question, and it may not be possible to find what I am asking, but here goes nothing.
I would like to find the API key or its location in code/database which is being used by Google Maps on my website.
It's a WordPress website, and I am currently using a theme called Directory Engine from Engine Themes.
Please see the URL.
The map block shows an error, after initially loading for a second.
I have used different plugins, even combed through the code to figure out where it could be, but couldn't
I know this is a long shot, and any help would be much appreciated.
Go to the following URL and generate a key.
https://developers.google.com/maps/documentation/javascript/get-api-key
in your code replace the following link.
//maps.googleapis.com/maps/api/js?sensor=false&signed_in=false&ver=1&key=YOUR_GENERATE_KEY
after that, your issue will be fixed.
To correctly use the google maps api you must include YOUR_API_KEY in the code
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"
async defer>
</script>
your code has
<script type="text/javascript"
src="//maps.googleapis.com/maps/api/js?sensor=false&signed_in=false&ver=1">
</script>
sign up for your own API key here and place that in the code above
Search your code base
if you are having trouble locating where in your code base the api is set you could try to use a command line script on your root folder
grep -r "googleapis"
Search your Database
you could try to do a sql dump then search that file for the string
I would like to have a React Bootstrap JavaScript file in my markup, and then use Bootstrap components from Clojurescript. I understand this simple approach (not using a cljs library) should be possible. However I am stuck at the beginning with a problem even loading the static html page.
The body section of the page looks like this:
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.28.2/react-bootstrap.min.js"></script>
<script src="/js/devcards.js" type="text/javascript"></script>
</body>
The react-bootstrap.min.js file is being loaded/executed and returning this error in the browser console:
Navigated to http://localhost:3449/cards.html
Uncaught TypeError: Cannot read property 'createClass' of undefined
PanelGroup.js:7
bootstrap 35d834203e0f472d9612:19
react-bootstrap.min.js:7481
Am I going about this the wrong way?
There is a bootstrap project that uses Om.
https://github.com/racehub/om-bootstrap
Hopefully there will be a better answer than this very direct one. I discovered including all the files recommended here gets me past that particular error.
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.28.2/react-bootstrap.min.js"></script>
But is this really the best way to go about it with ClojureScript? No! React is normally already included (via Reagent or Om) as part of a ClojureScript development stack. Seems like I'm discovering why it is best to stick with libraries for Bootstrap.
Just out of sheer curiosity, I'd like to know if there's a technique for passing things (most likely a javascript object) to external javascript within the script tag that loads that script.
<script type="text/javascript" src="example.js">
{example:'something like this'}
</script>
I'm almost certain I've seen this done somewhere once before. I find it very tidy and would like to be able to do it for libraries i'm writing so users can pass in simple options without needing to make another script.
As with what the Question Ballbin has posted says, "It should be avoided.".
But, a different way you can do it is with another script tag.
Like this:
<script>var test1 = "Testing";</script>
<script type="text/javascript" src="example.js"></script>
The example.js file should now be able to read the contents of test1.
I'm trying to embed some JavaScript into the output of a Google Apps Script that is running as a web app, but I can't find any evidence of my script tags or jQuery loading in the output, so I think it is getting stripped out, I assume, by Caja.
I'm adding the JavaScript by creating an HTMLOutputObject from a file, like this:
app.add(app.createHTML(HtmlService.createHtmlOutputFromFile("order_form_javascript").getContent()));
Maybe it is worth mentioning here that the javascript is added this way in a serverHandler attached to a listBox change event - NOT in the initial doGet() function - I'm not sure if that makes a difference.
The content of the order_form_javascript.html file is:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<h3>Javascript!</h3>
<script type="text/javascript">
alert ("script ran");
$(function() {
alert ("function ran");
$('.order_table tr:hidden').show();
});
</script>
The H3 tags are in the output, but no script tags appear, no alert boxes pop up and jQuery is undefined.
I tried this code on the Caja playground and it seems to work. So I think that I must be inserting the javascript incorrectly, or missing something obvious.
Thanks, in advance, for any suggestions you can offer.
I'm not deeply familiar with Apps Script, but it looks like you are trying to mix Ui Service (add, createHTML) and Html Service in the same page. This is not supported — you must choose one or the other for the entire page.
A side note on troubleshooting: Caja never inserts the script you write in the DOM (doing so would break the sandbox). In NATIVE sandbox mode you may see <script> elements with empty or stub contents, though. So, the absence of scripts does not itself indicate a problem.
Following Kevin Reids tips that Caja wouldn't likely show script tags anyway, as this would break sandboxing, and also that HtmlService and UiService may be incompatible in the same script, I updated my code to the following:
var js = HtmlService.createHtmlOutputFromFile("order_form_javascript").getContent();
Logger.log(js); //check that HtmlService generates the script properly.
app.add(app.createHTML(js));
Looking in the logs, I can clearly see that HtmlService is returning my HTML file's content verbatim:
[13-07-24 10:02:28:879 BST] <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<h3>Javascript!</h3>
<script type="text/javascript">
alert ("script ran");
$(function() {
alert ("function ran");
$('.order_table tr:hidden').show();
});
</script>
Which makes me think that maybe I could use this method to output arbitrary HTML without writing it all in code, but I digress.
This lead me to the app.createHTML([String]) method and, according to the documentation here, HTML widgets can't actually contain <script> tags. So that's where they are being stripped out. It turns out I should have read the manual. How embarrassing.
The two possible solutions I can think of are;
Re-write my web app using HtmlService instead of UiService, which I think would allow more arbitrary html and scripts from HTML files in the project.
Since my JavaScript is going to be event driven and very simple, I could also use a clientHandler to perform the necessary actions and continue using the UiService for my web app.
I'm going to start with the clientHandler approach.
Im new to Jquery but it turns out I used it quite a bit in my last application. My problem now is that its reloaded every single time one of my pages is loaded/reloaded. Is there an efficient way to reference it like we do a css or javascript file? for example:
<script type="text/javascript" language="javascript" src="js/behavior.js"></script>
I would really like to be able to do this with the jquery...because its quite a mess when you look at the source code. To avoid confusion: I already have jquery loaded. For example...this is already in my html:
<script src="js/jquery.min.js" type="text/javascript"></script>
What Im trying to cache is all of the code I've built off Jquery. For example:
$('#needDelete').slideDown('slow');
I have a bunch of these that need to be put into a file if that's even possible! Thanks!
jQuery is a JavaScript library. It consists of a single JavaScript file. All the documentation for it says to use <script src="..." to load it.
Update in response to edit:
The JavaScript you write that calls jQuery functions is still JavaScript and can be referenced from an external file just like any other JavaScript.
Yes, of course you can save your JavaScript code in a separate file (whether based on jQuery or not). Just keep your code separated and put it eg. in main.js file, then put a tag after jQuery script tag:
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
Just for consistency and improved maintainability, it is easier if all the code is in one place than when it is often referenced within HTML like that:
show popup
Instead of the above you could do this in a separate JS file:
$('#a1').click(function(event){
event.preventDefault();
$('#popup').show();
}):
(of course the above code should be enclosed within onload or ondomready handler, so the code searches for elements after they become accessible - in case of jQuery and ondomready you can simply use: jQuery(function(){/* your code executed when DOM is ready */});)
I would refer jQuery from a CDN. This will allow the browser to do parallel download along with other resources from my domain, thus save some load time.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
The cdn version will be usually cached in your browser.
I don't get this question. What do you want?
I tried opening a file called custom.js. I dumped all of the jQuery
code into it and then referenced it. Nothing worked. Does there need
to be something additional in the reference page itself?
Why would you do that? You save some loading by decrease the number of different files, but the difference between one and two files is minimal.
Instead, do as Frederik Creemers suggested. Juse the jQuery-library at googleapis.com. The file is cached, meaning it will not load every single time a user visits your page. Only when the cache expires (not 100% sure how long this is). In addition, this library is used by many other sites, so you might be lucky and the user downloads it somewhere else and has it ready for use when going to your page.
Again, what you are asking (if I understood correctly) is pointless.
download jquery, and reference it like this:
<script src='jquery.js'></script>
Or, for an even better option, you can use google's cdn. This means that if a user comes to your site, and has already visited a site which uses the cdn, it will already have jquery cached.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
and for the best option, to protect against the possibility of downtime of the cdn, combine the local copy and the cdn like this:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script>
if(!window.jQuery){
script = document.createElement('script');
script.src='js/jquery.js';
document.head.appendChild(script)
}
</script>