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    lt script src  https   ajax googleapis com ajax libs jquery 1 8 3 jquery min js  gt  lt  script gt   lt script src  https   maps googleapis com maps api js v 3 exp amp sensor false  gt  lt  script gt   lt script gt  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        lt  script gt   lt div id  map canvas  style  height  354px  width 713px   gt  lt  div gt    And this the page with the AJAX call    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  gt   lt head gt   lt meta http-equiv  Content-Type  content  text html  charset utf-8    gt   lt script src  https   ajax googleapis com ajax libs jquery 1 8 3 jquery min js  gt  lt  script gt   lt  head gt   lt body gt   lt script gt    document  ready function e           button   click function              ajax               type   GET   url   map-display               success  function d        a   html d                             lt  script gt   lt button gt Call lt  button gt   lt div id  a  gt  lt  div gt   lt  body gt   lt  html gt    Thanks for your help

User · Accepted Answer

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    lt div id  map canvas  style  height  354px  width 713px   gt  lt  div gt   lt script src  https   ajax googleapis com ajax libs jquery 1 8 3 jquery min js  gt  lt  script gt   lt script src  https   maps googleapis com maps api js v 3 exp amp sensor false amp callback initialize  gt  lt  script gt   lt script gt  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       lt  script gt    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

User · Answer

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  directionsService  var map  function initialize       directionsService   new google maps DirectionsService      directionsDisplay   new google maps DirectionsRenderer

User · Answer

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

User · Answer

Might not be relevant for everyone but this little detail was causing mine not to work   Change div from this    lt div class  map  gt    To this    lt div id  map  gt

User · Answer

What worked for me after following all your workarounds was to call the API     lt script async defer src  https   maps googleapis com maps api js key you API KEY amp callback initMap amp libraries places              type  text javascript  gt  lt  script gt    before my    lt div id  map  gt  lt  div gt   I am using  ASP NET  MVC

User · Answer

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    lt script type   text javascript  src   SomeJScriptfile js  gt  lt  script gt   lt script type  text javascript  src  https   maps googleapis com maps api js v 3 exp  gt  lt  script gt

User · Answer

For me   Adding this line   lt script type  text javascript  src  http   maps google com maps api js sensor false  gt  lt  script gt    Before this line    lt script id  microloader  type  text javascript  src   sencha app microloader development js  gt  lt  script gt    worked

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

Examples related to ajax

Examples related to google-maps-api-3