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.)

Answer 1

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

Question

1 answers

solution1
3 ACCPTED 2016-12-20 15:42:13

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

Question

1 answers

solution1 3 ACCPTED 2016-12-20 15:42:13

solution1
3 ACCPTED 2016-12-20 15:42:13