Google Maps API throws "Uncaught ReferenceError: google is not defined" only when using AJAX

Question

I have a page that uses the Google Maps API to display a map. When I load the page directly, the map appears. However, when I try to load the page using AJAX, I get the error:

Uncaught ReferenceError: google is not defined

Why is this?

This is the page with the map:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = { zoom:7, mapTypeId: google.maps.MapTypeId.ROADMAP, center: chicago }
  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  directionsDisplay.setMap(map);
}
$(document).ready(function(e) { initialize() });
</script>
<div id="map_canvas" style="height: 354px; width:713px;"></div>

And this the page with the AJAX call:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(e) {
    $('button').click(function(){
        $.ajax({
            type: 'GET', url: 'map-display',
            success: function(d) { $('#a').html(d); }
        })
    });
});
</script>
<button>Call</button>
<div id="a"></div>
</body>
</html>

Thanks for your help.

score 95 · Accepted Answer · edited May 23 '17 at 12:34

95

The API can't be loaded after the document has finished loading by default, you'll need to load it asynchronous.

modify the page with the map:

<div id="map_canvas" style="height: 354px; width:713px;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize"></script>
<script>
var directionsDisplay,
    directionsService,
    map;

function initialize() {
  var directionsService = new google.maps.DirectionsService();
  directionsDisplay = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = { zoom:7, mapTypeId: google.maps.MapTypeId.ROADMAP, center: chicago }
  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  directionsDisplay.setMap(map);
}

</script>

For more details take a look at: https://stackoverflow.com/questions/14184956/async-google-maps-api-v3-undefined-is-not-a-function/14185834#14185834

Example: http://jsfiddle.net/doktormolle/zJ5em/

edited May 23 '17 at 12:34

Community

1
1

answered Jan 09 '13 at 12:45

Dr.Molle

116,463
16
195
201

Thanks! Makes perfect sense now. Just had a follow-up: my map is coming in all grayed out (with Google logo, link and terms of use though). I can see in Firebug that the tiles are loading. Do you know what the reason might be? – greener Jan 09 '13 at 21:53
Usually this is a result of a missing/invalid map-option like zoom, mapTypeId or center(all of them are required, when they are missing or an invalid value has been assigned, there is no default-value for a fallback, the map could not be rendered) – Dr.Molle Jan 09 '13 at 23:56
1

The problem has to do with the fact that I'm hiding the div in which the map appears. I have a separate question for that here: http://stackoverflow.com/questions/14263472/google-maps-directions-in-tabs-or-div-that-has-displaynone – greener Jan 10 '13 at 17:31

score 43 · Answer 2 · answered Jul 16 '14 at 03:57

43

I know this answer is not directly related to this questions' issue but in some cases the "Uncaught ReferenceError: google is not defined" issue will occur if your js file is being called prior to the google maps api you're using...so DON'T DO this:

<script type ="text/javascript" src ="SomeJScriptfile.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

answered Jul 16 '14 at 03:57

Rex Charles

1,292
1
16
33

my google maps api include is above my self defined js, still getting this error though but not all the time. Sometimes, it loads just fine. I need to trap this error but I have no idea what's the cause. – JkAlombro Jul 24 '17 at 09:42
@JkAlombro reference accepted answer in the link below. I think it covers the majority of instances where you should be particularly concerned about the order of your JScript library files. You may also want to consider using asynchronous connection to better manage this as suggested in the original answer for this thread. https://stackoverflow.com/questions/4987977/does-the-order-of-javascript-files-matter-when-they-are-all-combined-into-one-f – Rex Charles Jul 31 '17 at 14:20

score 13 · Answer 3 · answered May 07 '19 at 07:45

13

Uncaught ReferenceError: google is not defined error will be gone when removed the async defer from the map API script tag.

answered May 07 '19 at 07:45

Sohan Jangid

149
1
7

score 8 · Answer 4 · edited Jun 05 '21 at 14:14

At a guess, you're initialising something before your initialize function:

var directionsService = new google.maps.DirectionsService();

Move that into the function, so it won't try and execute it before the page is loaded.

var directionsDisplay;
var directionsService;
var map;

function initialize() {
  directionsService = new google.maps.DirectionsService();
  directionsDisplay = new google.maps.DirectionsRenderer();
}

score 4 · Answer 5 · answered Jul 30 '19 at 12:50

What worked for me after following all your workarounds was to call the API:

 <script async defer src="https://maps.googleapis.com/maps/api/js?key=you_API_KEY&callback=initMap&libraries=places"
            type="text/javascript"></script>

before my : <div id="map"></div>

I am using .ASP NET (MVC)

score 1 · Answer 6 · answered Mar 28 '21 at 00:00

1

I tried on different browsers and the answer for me was that is very important have in script tag this type="text/javascript"

It's very important to add to every js script for browser compatibility

<script type="text/javascript" src="ANY_FILE_OR_URL"></script>

After this the issues like Uncaught ReferenceError: google is not defined or others (that can't load any referece are gone)

answered Mar 28 '21 at 00:00

Miky A. Mikolaj

27
4

Well yes, that applies to any JS file, not just this one – Liam May 26 '21 at 12:42

score 0 · Answer 7 · answered Jul 13 '22 at 20:59

Uncaught ReferenceError:

google is not defined, google related stuff has not been loaded yet and we are using it that causes this error. In the following code snippet, we see both cases will generate the error. We can move the definition of google related stuff inside initMap method or load the function in question a little base later.

    //shows the error 
    google.maps.Polygon.prototype.getBounds1 = function (latLng) {
    ...
    };
   function initMap() {
   ...
   //should be here inside the initMap
   }
    //error with the following
    google.maps.Polygon.prototype.getBounds1 = function (latLng) {
        ...
    };

Prahlad · Answer 8 · 2022-09-21T17:42:52.747

0

In my case non of above solution work....due to not loading google script. So I just checking recursively ...when google loaded it will call original function.

function checkMapLoaded() {
  if (typeof google === "undefined") {
    setTimeout(checkMapLoaded, 1000);
  } else {
    // do some work here
    initSchMap();
  }
}

edited Sep 21 '22 at 17:42

answered Sep 14 '22 at 08:35

Prahlad

716
8
17

1

Your answer could be improved by adding more information on what the code does and how it helps the OP. – Tyler2P Sep 18 '22 at 18:06

score 0 · Answer 9 · answered Jan 10 '23 at 22:24

If using a partial render function, render the google script and your script in the same render space.

In my ASP.Net Core web app, I was rendering the google script in the head using @section head {...} and my custom script outside the @section head {...}.

So either put both scripts tag in the @section head{...} or outside of it.

score -1 · Answer 10 · answered Jan 30 '16 at 16:43

-1

For me

Adding this line

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

Before this line.

<script id="microloader" type="text/javascript" src=".sencha/app/microloader/development.js"></script>

worked

answered Jan 30 '16 at 16:43

Rupesh

2,061
5
22
36

Yes, that's what [this answer says](https://stackoverflow.com/a/24771972/542251) – Liam May 25 '21 at 15:28

Google Maps API throws "Uncaught ReferenceError: google is not defined" only when using AJAX

10 Answers10

Linked

Related