Google V3 Map API - ReferenceError: google not defined

I'm learning how to create Google maps by learning basic examples from google .

I basically copied and pasted the scripts in the header tags, and the firebug console returned the following error:

ReferenceError: google is not defined 

I have several scripts loaded into my head along with google map scripts. Not sure why this gives me an 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 adding this before the initialization function, but that did not work.

 <script> var google = jQuery.noConflict(); </script> 

Can anyone help? Thanks!

+4
source share
2 answers

Your source is wrong, I also suggest specifying the exact version you want to download:

 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script> 
+2
source

Let's see what happens in the code.

1) Let's ignore ajax.googleapis.com, as it is not used in the published code in any way.

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 

2) The google object that throws the error is determined by the Google Maps API 3 itself and has nothing to do with jQuery, in which case the v3 API does not use jQuery, so the line below should be deleted, since it has nothing to do with the problem standing in front of us.

 <script> var google = jQuery.noConflict(); </script> 

3) Now the first thing that is called from javascript when the browser hits the page is

 window.onload = loadScript; 

4) So what does this line mean? windows.onload starts late, after all external files have been downloaded, including the image, styles, scripts and other dependent resources, as well as after the DOM has been loaded and displayed and ready for action.

And so we came to this question. After windows.onload calls the loadScript function, which adds

  script.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyB7CgOuhFLDkh2VAGW1S2Y" + "sensor=false" + "callback=initialize"; 

(by the way, in your query string, all "& characters" are missing 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 adds a loader for the API, even though the url has the word api in the URL itself. Open and look at the file above, and you will see that document.write and a block of various parts of the API will be conditionally loaded based on the parameters of the query string with which you call the bootloader.

6) So what does that mean? You call the initialization function, thinking that you get the Google API, but instead you get the Google API loader, which contains the API, which in turn contains the definition of a google object. Thus, the callback is launched before the Maps API has been attached, and therefore google is undefined when the callback function of the initialize () function is started.

Solutions

Take a look here at the doktormolle solution, which uses a different way to load the initial function -> http://jsfiddle.net/doktormolle/7cu2F/

and here for a solution that actually adds a Google map downloader directly to your page, bypassing the intermediary → http://jsfiddle.net/doktormolle/zJ5em/

0
source

Source: https://habr.com/ru/post/1489806/


All Articles