Solved

Javascripe Error - window.handleApiReady is not a function

Posted on 2013-12-28
26
417 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
  • 15
  • 11
26 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
Comment Utility
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
Comment Utility
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
Comment Utility
Removing the lines 74 to 76 will stop the script from executing.

What do we have : callback=handleApiReady ?
0
 

Author Comment

by:seopti
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
You should put your script in first position followed by the google maps script api include
0
 

Author Comment

by:seopti
Comment Utility
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
Comment Utility
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
Comment Utility
0
 

Author Comment

by:seopti
Comment Utility
With the code above the page loads fine but there is:
Uncaught TypeError: Object [object global] has no method 'handleApiReady'
0
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
LVL 82

Expert Comment

by:leakim971
Comment Utility
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
 

Author Comment

by:seopti
Comment Utility
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
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
Comment Utility
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
Comment Utility
so the second option is to remove the $(document).ready and let the callback
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
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
Comment Utility
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
Comment Utility
did you saw my previous comment?
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
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
Comment Utility
Look better now
0
 

Author Comment

by:seopti
Comment Utility
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
Comment Utility
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
Comment Utility
Thanks Bro!
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
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…

743 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now