Menu
I am learning to create google maps by studying the basic examples from google.
I basically copied and pasted the scripts in the head tags and the firebug console returned the following error:
ReferenceError: google is not defined
I have the following several scripts loaded in the head along with the google map scripts. Not sure why it throws me the error.
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<!-- nmr is used to write my own scripts -->
<script>var nmr = jQuery.noConflict();</script>
<!-- Google Map scripts -->
<script>
function initialize() {
var mapOptions = {
zoom: 13,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
};
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyB7CgOuhFLDkh2VAGW1S2Y" + "sensor=false" + "callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
I also tried to add this before the initialize function, but it didn't work.
<script> var google = jQuery.noConflict(); </script>
Can anyone help? Thanks!
498
Your source is wrong, I also suggest specifing the exact version you want to load:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
Lets look what's going on in the code.
1) Lets ignore the ajax.googleapis.com, since its not being used within the posted code anyhow.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
2) The object google, that throws the errror, is defined by the Google Maps 3 API itself, and has nothing to do with jQuery, and for that matter the API v3 doesn't use any jQuery, so the line below needs to be removed since its has nothing to do with the issue before us.
<script> var google = jQuery.noConflict(); </script>
3) Now the first thing that's being called from the javascript when the browser hits the page is the
window.onload = loadScript;
4)So what does the above line actually mean? windows.onload fires off late, after all the external files have been loaded including image, styles, scripts and the rest of dependent resources and long after the DOM has been loaded and rendered and ready for action.
And here is where we come to the issue. After the windows.onload calls the loadScript function which appends the
script.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyB7CgOuhFLDkh2VAGW1S2Y" + "sensor=false" + "callback=initialize";
(by the way your query string is missing all the "& symbols" in between the query variables .... /js?v=3&key=xyz&sensor=false&callback=initialize <--- format thats correct
5) The long awaited Google API. Nope. It only appends the loader for the API despite the url having the word api in the url itself. Open up and take a look inside the above file and you will see a document.write and a block of various parts of the API to be conditionally loaded based on the query string parameters you call the loader with.
6) So what's it all mean? You are invoking the initialize function thinking you are getting the Google API, but instead all you are getting is the Google API Loader which contains the API which in turn contains the definition of the google object. So the callback is fired before the Maps API has been attached, and thus google is undefined when initialize() callback function is fired.
Solutions
Take a look here for doktormolle solution which uses a different way of loading the initial function --> http://jsfiddle.net/doktormolle/7cu2F/
and here for a solution which actually adds the google maps loader right to your page, bypassing the middleman --> http://jsfiddle.net/doktormolle/zJ5em/
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
