?
Solved

Javascripe Error - window.handleApiReady is not a function

Posted on 2013-12-28
26
Medium Priority
?
463 Views
Last Modified: 2013-12-28
In my html I'm loading the async Google maps APi with:

http://maps.google.com/maps/api/js?v=3&sensor=false&callback=handleApiReady

Then I'm loading an external Javascript which contains the function handleApiReady (see code). Now when I frist load the external javascript with the function handleApiReady there is no error at all, but when I first load the Google maps API and after that load the javascript with handleApiReady function the "handleApiReady is not a function error appears".

The problem is I can't first load the external javascript because Google Maps API always needs to be loaded first.

Is there a solution to this problem? Thanks.


function handleApiReady() {
	setupAddress();
	mapDiv = document.getElementById(mapDivID);
	var myLatlng = new google.maps.LatLng(0,0);
	var myOptions = {
		zoom: zoomLevel,
			    styles: gmapFreshStyle,
		scrollwheel: true,
		disableDoubleClickZoom: true,
		center: myLatlng,
		mapTypeControl: true,
		mapTypeControlOptions: {
		  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
		  position: google.maps.ControlPosition.BOTTOM_LEFT
		},
		zoomControl: true,
		zoomControlOptions: {
		  style: google.maps.ZoomControlStyle.SMALL,
  		  position: google.maps.ControlPosition.LEFT_TOP
		},
		panControl: false,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		overviewMapControl: true,
		overviewMapControlOptions: {
			opened: false
			}
	};
	map = new google.maps.Map(mapDiv, myOptions);

	if(directionsMode == 'DRIVING') {
		travMode = google.maps.DirectionsTravelMode.DRIVING;
	} else {
		travMode = google.maps.DirectionsTravelMode.WALKING;
	}
	//streetview stuff
	var tempPanorama = map.getStreetView();

	google.maps.event.addListener(tempPanorama, 'visible_changed', function() {
	    if (tempPanorama.getVisible()) {
			controlToggle("hide");
		} else {
			controlToggle("show");
	    }
	});
	
	infoBox();

	var geocoder = new google.maps.Geocoder();
    var address = startAddress;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
   		addressSet = 1;
		searchCenter = results[0].geometry.location;
        getCategories(1);
		createMarker(searchCenter, 0, markerHTML, "pin", "pin","");
//		var trafficLayer = new google.maps.TrafficLayer();
//		trafficLayer.setMap(map);
	    google.maps.event.addListener(map, "dragend", function () {
				controlToggle("show");
			    getCategories(0);
	    });
		mobileScroll(sidebarDivID);
		if (autoGeolocation === true) {
					geotarget();
		}
		if (mapExtra === true) {
			mapPost();
		}
		}
    });

}
$(document).ready(function() {
  handleApiReady();
});

Open in new window

0
Comment
Question by:seopti
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 15
  • 11
26 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 2000 total points
ID: 39744047
You can load the google maps library asynchronously from your external code :
https://developers.google.com/maps/documentation/javascript/tutorial#asynch

But from your current code, did you try to remove the lines 74 to 76 ? I understood you already call fire handleApiReady by specifying the callback parameter so theses lines are useless.
0
 

Author Comment

by:seopti
ID: 39744089
Removing the lines 74 to 76 will stop the script from executing.

I tried to add this async code instead of lines 74 to 76 but it also stops executing because the google api needs to be loaded first.

function loadScript() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' +
      'callback=handleApiReady';
  document.body.appendChild(script);
}

window.onload = loadScript;
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39744091
Removing the lines 74 to 76 will stop the script from executing.

What do we have : callback=handleApiReady ?
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:seopti
ID: 39744092
In the Chrome javascript console I get the error:
Uncaught TypeError: Object [object global] has no method 'handleApiReady'

Firefox javascript console:
window.handleApiReady is not a function
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39744094
put first the javascript with the handleApiReady
remove the  lines 74 to 76
so you load google map after

let me know if you've any error?
do you have a link to see your page?
0
 

Author Comment

by:seopti
ID: 39744154
I got it to work but unfortunately after adding the async google part in the .js file  there were new errors and warnings.

Is there no other way to get rid of this error?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39744155
Another solution IF YOU REMOVE THE CALLBACK PARAMETER :

replace :
$(document).ready(function() {
  handleApiReady();
});

Open in new window

by :
$(window).load(function() {
  handleApiReady();
});

Open in new window

or by :
$(window).load(handleApiReady);

Open in new window


More infos about the difference :
https://developer.mozilla.org/en-US/docs/Web/Reference/Events/DOMContentLoaded
Notes : https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onload
0
 

Author Comment

by:seopti
ID: 39744170
Thanks once again but by replacing it and trying both solutions I get an addtional error:

Uncaught ReferenceError: handleApiReady is not defined

and the code will not load.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39744173
You should put your script in first position followed by the google maps script api include
0
 

Author Comment

by:seopti
ID: 39744175
Sorry, I was wrong in my last post, with

$(window).load(function() {
  handleApiReady();
});

I get:   Uncaught TypeError: Object [object global] has no method 'handleApiReady'

And with  $(window).load(handleApiReady);

Uncaught TypeError: Object [object global] has no method 'handleApiReady' VM9781:1
Uncaught TypeError: Object [object global] has no method 'load'
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39744180
my bad, it's jQuery code..
Replace it by :
window.onload = function() {
   alert("page loaded");
   handleApiReady();
}

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 39744184
0
 

Author Comment

by:seopti
ID: 39744191
With the code above the page loads fine but there is:
Uncaught TypeError: Object [object global] has no method 'handleApiReady'
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39744196
With the code above the page loads fine but there is:
Uncaught TypeError: Object [object global] has no method 'handleApiReady'

Where can I see your page?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39744225
remove callback and in this order :
.script("/js/poiaktuell.js").script("http://maps.google.com/maps/api/js?v=3&sensor=false")

and replace :
$(document).ready(function() {
  handleApiReady();
});

Open in new window


by :
$(window).load(function() {
  handleApiReady();
});

Open in new window

0
 

Author Comment

by:seopti
ID: 39744233
Thanks once again but I can't remove the callback because the map script will not load in async mode. This was the reason I added the callback. (maybe I should have written this before)

There is a big difference:
http://maps.google.com/maps/api/js?v=3&sensor=false
 uses document.write and is not asynchronous

When you add the callback there is a different version of the script served from google servers which doesn't use document.write ans runs in async mode.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39744237
so the second option is to remove the $(document).ready and let the callback
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39744251
when you have global variables like this one :
var directionsService = new google.maps.DirectionsService();

you should have :
var directionsService = null;

and inside handleApiReady :

function handleApiReady() {
   directionsService = new google.maps.DirectionsService();

Open in new window

0
 

Author Comment

by:seopti
ID: 39744252
Just having no success just leaving   handleApiReady();

I think I will have to hire a coder to load the gmaps dynamically with ajax like in this example. http://stackoverflow.com/questions/3922764/load-google-maps-v3-dynamically-with-ajax

One additional question so I can give you the points after all this work. Do you think this error " window.handleApiReady is not a function" will block the site from showing on browsers? I have tested it with all of them and it seems to load in most cases.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39744257
did you saw my previous comment?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39744261
Replace :
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();

by :
var directionsService = null;
var directionsDisplay = null;

and do the init inside handleApiReady
function handleApiReady() {
    directionsService = new google.maps.DirectionsService();
    directionsDisplay = new google.maps.DirectionsRenderer();

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 39744275
Look better now
0
 

Author Comment

by:seopti
ID: 39744279
After replacing it, it won't solve the original problem but creates a new one where the sidebar loads twice.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39744287
It was not a new error but the NEXT one because your code was able to continue to execute the code following the previous error
0
 

Author Comment

by:seopti
ID: 39744318
Thanks Bro!
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question