<script src="https://maps.googleapis.com/maps/api/js?key="my javascript browser key for website"&libraries=places&callback=initAutocomplete" async defer></script>
This is the command line what i am giving to load the Google map.
And this is the error it is showing
Oops! Something went wrong.
This page didn't load Google Maps correctly. See the JavaScript console for technical details.
Please help me to solve this problem
I am new to the codeigniter please help
Related
I am trying to add google recaptcha to svelte app
but nothing happens
index.hml
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
myComponent.svelte
<div class="g-recaptcha" data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"></div>
Any thoughts?
Using Google APIs like this with Javascript frameworks can be a bit fiddly. I haven't use reCAPTCHA but I've worked with the adsense API. The issue almost always boils down to the appropriate element not being in the DOM when the Google script runs.
With the reCAPTCHA API you can explicitly render the widget. That appears to be what the react and vue components are doing:
react-recaptcha
vue-recaptcha
Exact line
Having a stable recaptcha working with any framework is no straight forward task. You can try the svelte-recaptcha-v2.
Repository
https://github.com/basaran/svelte-recaptcha-v2
Demo Site
https://basaran.github.io/svelte-recaptcha-v2/demo/
P.S I'm the author.
I'm trying to load a chart from the google charts api. For the most part it is working as planned. The issue comes on the initial page load. If I navigate from another part of my site to the page (using router) it loads fine. However, if I hit the refresh button on the page the chart does not load until I leave and re-enter the page.
I have this in my main.html header:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
and in my template.templatename.rendered AND template.templatename.created I have
google.load("visualization", "1", {'callback':function() {},packages:["corechart"]});
google.setOnLoadCallback(drawChart);
Deps.autorun(function () {
drawChart()
})
Where drawChart() calls the google visualization commands. I do understand I'm probably calling some repetitive code currently, but all of this is in an effort to get the page to load when I hit refresh.
I appreciate any help.
Please let me know if there is any more info needed. Thanks.
Placing the Google jsapi file in the main.html header will cause the browser to run the Javascript after the DOM is completely loaded, which is too late for your purposes.
Meteor is calling your google.load code before the DOM is completely rendered, so when you hit refresh page, the jsapi file is undefined when Meteor calls google.load.
However, if you navigate away and then back, the DOM has already been loaded once, so the chart will be rendered correctly.
To solve this, I would suggest just saving a local version of http://www.google.com/jsapi in your client folder.
Thus, Meteor will load it before it calls the google.load code.
I have played with the other widgets on the Eventbrite's API page and got each of them to work. The only one that I'm having difficulty with is the Event List widget.
I've hunted around online for a tutorial with more information or anything to see what I might be doing wrong, but have not been successful.
When I copy and paste the text, nothing shows up. So I tried changing the API Key and ID to mine and nothing shows up. Does anyone know if it no longer works or if there's something more that I have to add to the code that isn't too clear in the description for the Event List widget?
What languuage are you working in?
Eventbrite's open source example code section should provide some additional examples:
http://eventbrite.github.com/#examples
I was having the same problem, and I noticed the first script tag in the example from EventBrite is missing "http:" in the src attribute. Once I added this, it worked.
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
should instead be...
<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
I tried the classic ajax approach, but that throws an access denied javascript exception when trying to add a script stored on another domain.
Now, I'm sure this is possible since google populates google ads via js only; so does twitter, and the list can continue.
How I thought of it so far:
<div id="divId"></div>
<script type="text/javascript" src="http://mysite.com/script.js"></script>
The script in script.js should have changed the innerHTML attribute of the div above. Instead, I get the following message in fireBug: Access to restricted URI denied code: 1012
I googled around a bit but only found workarounds that are useless, like php proxies and such, whereas I want this widget to be copy-pasted into other peoples sites, blogs, forums, etc..
Thanks in advance for any helpful replies. :)
The behavior that you are seeing is intended and there for security reasons. You wouldn't want a third party script to make any changes to your page as that can be exploited heavily.
Instead, give your users a JavaScript snippet to embed on their page.
<script>
// do stuff here
</script>
Note that inside this snippet you can create a script tag dynamically, set the src attribute and load the actual JavaScript. This snippet that your users embed on their page has access to the entire DOM, but the script loaded externally does not.
Here's an example of the profile widget that Twitter gives out to embed on web pages:
<!-- external js, can't access or change the DOM -->
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<!-- local js, does that -->
<script>
new TWTR.Widget({
version: 2,
..
..
}).render().setUser('hulu').start();
</script>
The first script tag loads the library, while the second one which actually manipulates the page is added as code directly.
I finally found a solution that doesn't involve ajax.
I simply use
<div id="objectId"></div>
<script type="text/javascript" src="http://mysite.com/getAndDisplayData.php"></script>
<script type="text/javascript">getAndDisplayData();</script>
And in getAndDisplayData.php I generate a JS script that will create my widget inside the div above. The php file also connects to the database and retrieves all required widget data.
Apparently this is how google ads works, though I am not sure. It is certain though that they don't use ajax.
I've implemented a simple example of the Twitter #anywhere api to display user hovercards. The example works great in Internet Explorer and Chrome. However, whenever I the page loads in Firefox I receive the following message in an alert window:
To set up #anywhere, please provide a
client ID
Surely if the results are correct in Chrome and IE then everything must be setup correctly?
Here is a simple code block which I've tested recreates the problem in Firefox only:
<script src="http://platform.twitter.com/anywhere.js?id=WMg5kRMlIw807lRTsktnNQ&v=1" type="text/javascript" >
</script>
<script type="text/javascript">
twttr.anywhere(onAnywhereLoad);
function onAnywhereLoad(twitter) {
twitter().hovercards();
});
</script>
This problem is showing up in various forums and mailing lists. I'm seeing it on Firefox 3.0.5 (but not 3.6). Looks like Twitter didn't do enough testing before springing this one on the world.
(Later: Try clearing hour cookies. Yeah, that's a very 90's thing to have to do.)