ReferenceError: google is not defined (error after ajax call) - javascript

I got this error message for the google map after using ajax call.
ReferenceError: google is not defined
What I'm doing is I put the link "<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>" inside the file(showMap.php) being called by ajax.
However, if i refresh the page, the google map work fine. And if I put the link mentioned outside the file being called by ajax, for example(mainPage.php) , the google maps work fine also. Any idea on how to make the link working inside the showMap.php file?

What's happening is your code is executing before the Google library is loaded.
In order to execute the code for the map, reference it as a callback function on the Google Maps API URL.
For example: <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&callback=init">/script>
<script>
function init() {
//doStuffWithMapsAp
};
</script>

Related

Google sign-in API without basic profile info

I am trying to simply get the Google sign-in button working on my website, but I am stuck at the following step:
Getting profile information
As you can see, Google has taken an extremely straightforward task and made it impossible with contextless code snippets, and I am absolutely stuck. Right now, all I have done is put the following in the head of my HTML file:
<script src="https://apis.google.com/js/platform.js" async defer></script>
<meta name="google-signin-client_id" content="(I PUT MY CLIENT ID HERE ALREADY).apps.googleusercontent.com">
All I want to do is sign the user in WITHOUT requesting email address. My problem is the following:
WHERE do I put the gapi.load('auth2', function()... code snippet? At the top level of my webpage's JavaScript file? In the body's onload function? In the onSignIn function? NONE of the above are working. I get an exception, or it says "gapi is not defined" or it says "auth2 is not defined" etc... And once that code snippet is in place, where do I put the if (auth2.isSignedIn.get()) code snippet? You'd think the geniuses at google would think to include this incredibly simple, vital information in their tutorial. Incredibly frustrating.
You can pass the url a callback function to be run when the javascript gets loaded.
<script src="https://apis.google.com/js/platform.js?onload=googleLoaded" async defer></script>
So in your code you can do
function googleLoaded(){
// The script is ready to use.
// gapi.load('auth2', function()...
}
found here https://developers.google.com/identity/sign-in/web/build-button

Google Maps Places API: TypeError: autocomplete is undefined

Whenever I am trying to use the Google Maps API places library it gives me this error in the console of my browser:
TypeError: autocomplete is undefined
If I'm not mistaken, that means the places library couldn't load. As for the code, I had my own code but I also copypasted the code from the Places API tutorial(https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform).
In my header I have these two lines included:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY_KEY_HERE"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
I also made sure Placis API, Google Maps JavaScript API v3 and Google Maps Geolocation API are all switched on in my Google APIs console.
I am not really sure what the problem is, besides the places library not loading. I should note I am working on a hidden subdomain, could that be the problem?
Thanks in Advance.
Please make sure you only load the maps file once (and you should always load the api via https, or with the active protocl):
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=MY_KEY_HERE&libraries=places&sensor=false"></script>
The subdomain should not be a problem, so you can work with it.

IE script source load issue

I have written some javascript functions and saved the file as dashboardjs.jsp. The reason why the file is made as jsp is that i wanted to use struts2 tag inside the scripts. Now i call this script in a script tag as follows:
<script type="text/javascript" src="/dashboardjs.jsp"></script>
After loading this script i am just trying to call a function in the above script on load
<script type = "text/javascript">
$(function(){
getTrend(id,true,false); //this function is defined in dashboardjs.jsp
});
</script>
The above works completely fine in FF,Chrome but in IE it throws error saying getTrend is undefined. In IE developer tool (network tab) it shows that the call to the script dashboardjs.jsp is made multiple times. My question is why IE is behaving in this way? Is there any solution for this problem? Please suggest.

Lazyloading Google API not working

Here's the deal. I've tried a number of methods of lazy loading the Google Maps API JavaScript, and every time in do it, with any Lazy Loader I use, FireFox "blocks." It lazy loads just fine in Chrome.
What I mean by "blocks" is that the elements in the HTML don't display, and instead, the browsers spin trying to make a connection to download the Maps JavaScript.
The code follows. Put it in an HTML file and open it in your browser:
<html>
<head>
<script type="text/javascript" src="http://github.com/rgrove/lazyload/raw/master/lazyload.js"></script>
</head>
<body>
Open your console. Wait for "entering debugger..." message.<br />
You can't see me in FireFox, can you?
<script type="text/javascript">
// If I remove the `sensor` from the query string key and value,
// Google rejects the request and alert() does occur
LazyLoad.js("http://maps.google.com/maps/api/js?sensor=false", function() {
console.log("entering debugger...");
});
</script>
</body>
</html>
In Chrome, I see the "Open your console..." contents of the page, and the JavaScript is requested and downloaded, async, in the background.
In FireFox, the "Open your console..." contents never appear, and it hangs (status bar says "Read" from a Google DNS), never finishing or displaying the page contents.
Are you sure you need to write your own loader? What about using a previously tested implementation: Lazy Load
Are you trying to load Google Maps on demand? To load the API dynamically, pass a callback parameter, as shown on the Example
I think you'll need to rename your LazyLoad script, because it already exists. :) Speaking of which, it already exists, so why write it again?
If you just want to see how it's done, the source code is available.
Yeah, why reinvent the wheel. You seem to be using jQuery.
try this plugin:
Load image only when it is viewable?
Found a solution:
Check the URL:'http://maps.google.com/maps/api/js?sensor=true'
You would find main.js is being imported by it . A simple getScript for sensor=true will not give whole google object so next import also required.
var t=setTimeout(function(){
jQuery.getScript('http://maps.google.com/maps/api/js?sensor=true');
jQuery.getScript('http://maps.gstatic.com/intl/en_us/mapfiles/api-3/10/20/main.js');
},1000);
PS: Similar issue thread Lazy loading google map api

How to correctly load dependent JavaScript files

I am trying to extent a website page that displays google maps with the LabeledMarker. Google Maps API defines a class called GMarker which is extended by the LabeledMarker.
The problem is, I cant seem to load the LabeledMarker script properly, i.e. after the Google API loads and I get the 'GMarker not defined' error.
What is the correct way to specify the scripts in such cases?
I am using ASP.NET's ClientScript.RegisterClientScriptInclude() first for the google API url and then immediately after with the LabeledMarker script file.
The initial google API loader writes further script links that load the actual GMarker class. Shouldnt all those scripts be executed before the next script block(LabeledMarker script) is processed.
I have checked the generated HTML and the script blocks are emitted in the right order.
<script src="google api url" type="text/javascript"></script>
...
(the above scripts uses document.write() etc to append further script blocks/sources)
...
<script src="Scripts/LabeledMarker.js" type="text/javascript"></script>
Once again, the LabeledMarker.js seems to get executed before the google API finishes loading.
I think that is the problem. I was calling google.load() in the body.onload which happened after loading the scripts. Resolved by emitting script tag for the LabeledMarker from within the onload handler.

Categories