CODEWITHSUNDEEP
ajaxgoogle-maps-api-3
greener
greener

Reputation: 5069

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

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.

Upvotes: 98

Views: 385518

Answers (10)

Codingwiz
Codingwiz

Reputation: 313

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.

Upvotes: 0

Prahlad
Prahlad

Reputation: 796

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();
  }
}

Upvotes: 0

RotatingWheel
RotatingWheel

Reputation: 1041

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) {
        ...
    };

Upvotes: 0

duncan
duncan

Reputation: 31922

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();
}

Upvotes: 8

Miky A. Mikolaj
Miky A. Mikolaj

Reputation: 27

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)

Upvotes: 1

Fotini Pipi
Fotini Pipi

Reputation: 41

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)

Upvotes: 4

Sohan Jangid
Sohan Jangid

Reputation: 158

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

Upvotes: 14

Rupesh
Rupesh

Reputation: 2051

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

Upvotes: -1

Rex Charles
Rex Charles

Reputation: 1369

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>

Upvotes: 43

Dr.Molle
Dr.Molle

Reputation: 117354

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/

Upvotes: 97

Related Questions