• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 507
  • Last Modified:

Javascripe Error - window.handleApiReady is not a function

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
seopti
Asked:
seopti
  • 15
  • 11
1 Solution
 
leakim971PluritechnicianCommented:
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
 
seoptiAuthor Commented:
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
 
leakim971PluritechnicianCommented:
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!

 
seoptiAuthor Commented:
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
 
leakim971PluritechnicianCommented:
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
 
seoptiAuthor Commented:
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
 
leakim971PluritechnicianCommented:
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
 
seoptiAuthor Commented:
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
 
leakim971PluritechnicianCommented:
You should put your script in first position followed by the google maps script api include
0
 
seoptiAuthor Commented:
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
 
leakim971PluritechnicianCommented:
my bad, it's jQuery code..
Replace it by :
window.onload = function() {
   alert("page loaded");
   handleApiReady();
}

Open in new window

0
 
leakim971PluritechnicianCommented:
0
 
seoptiAuthor Commented:
With the code above the page loads fine but there is:
Uncaught TypeError: Object [object global] has no method 'handleApiReady'
0
 
leakim971PluritechnicianCommented:
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
 
leakim971PluritechnicianCommented:
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
 
seoptiAuthor Commented:
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
 
leakim971PluritechnicianCommented:
so the second option is to remove the $(document).ready and let the callback
0
 
leakim971PluritechnicianCommented:
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
 
seoptiAuthor Commented:
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
 
leakim971PluritechnicianCommented:
did you saw my previous comment?
0
 
leakim971PluritechnicianCommented:
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
 
leakim971PluritechnicianCommented:
Look better now
0
 
seoptiAuthor Commented:
After replacing it, it won't solve the original problem but creates a new one where the sidebar loads twice.
0
 
leakim971PluritechnicianCommented:
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
 
seoptiAuthor Commented:
Thanks Bro!
0

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

  • 15
  • 11
Tackle projects and never again get stuck behind a technical roadblock.
Join Now