Google Maps API - infobox.js and markerwithlabel.js - google is not defined

Question

In my google maps webapp, I continue to get this error:

infobox.js:126 Uncaught ReferenceError: google is not defined

It is first triggered by this, inside infobox.js:

InfoBox.prototype = new google.maps.OverlayView();

I have read several stack articles on this exact topic, including:

Here is my <head> section:

    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
    <script type="text/javascript" src="paypal/lightbox.js"></script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyD1vT***********1s6tNOgL2F44P8&callback=initialize&libraries=places"></script>
    <script type="text/javascript" src="js/TreasureHunt.js"></script>
    <script type="text/javascript" src="js/infobox.js"></script>
    <script type="text/javascript" src="js/markerwithlabel.js"></script>

Inside TreasureHunt.js is my initialize() function:

function initialize() {
    // set up basic/default world map, zoomed out, showing globe
    var mapOptions = {
  ...
    }
}

I have tried moving the js references to different locations but nothing works. I am forced by google to use the &callback=initialize approach, else my map doesn't load at all. I used to be able to use google.maps.event.addDomListener(window, 'load', initialize); instead of the async, but that no longer works, the map simply doesn't load. I have tried putting TreasureHunt.js both before and after the maps API js file but nothing works. Always inside infobox and markerwithlabel it thinks the google object doesn't exist.

What am I doing wrong?

(Note: 1 year ago this all worked perfectly until one day when my local maps js script stopped working and google now requires referencing the js from their server - so I fixed it, and then these other problems occurred.)

And remove callback=initialize. If you load the API asynchronously, everything that depends on it must be in the callback function, or certain to run after the callback. — geocodezip, Dec 20 '16 at 04:51
As stated in the original post, when I remove callback=initialize, the map doesn't load. That's the whole reason I had to do it. And Google Maps docs say to do it that way. Also, why the downvote for no reason and no explanation? — HerrimanCoder, Dec 20 '16 at 13:14
You didn't include a [mcve] in your question so we could tell that `initialize` wasn't being called somewhere else in your code/page. — geocodezip, Dec 20 '16 at 15:41

score 3 · Accepted Answer · answered Dec 20 '16 at 15:42

change the script include from:

<script async defer src="https://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyD1vT***********1s6tNOgL2F44P8&callback=initialize&libraries=places"></script>

to (remove async defer and &callback=initialize):

<script src="https://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyD1vT***********1s6tNOgL2F44P8&libraries=places"></script>

Add (code to call the initialize function after the DOM has rendered):

google.maps.event.addDomListener(window,'load',initialize);

Google Maps API - infobox.js and markerwithlabel.js - google is not defined

1 Answers1