La API de Google Maps lanza “Unbeught ReferenceError: google no está definido” solo cuando se usa AJAX

Tengo una página que usa la API de Google Maps para mostrar un mapa. Cuando cargo la página directamente, aparece el mapa. Sin embargo, cuando bash cargar la página usando AJAX, obtengo el error:

Uncaught ReferenceError: google is not defined 

¿Por qué es esto?

Esta es la página con el mapa:

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

Y esta la página con la llamada AJAX:

         $(document).ready(function(e) { $('button').click(function(){ $.ajax({ type: 'GET', url: 'map-display', success: function(d) { $('#a').html(d); } }) }); });   

Gracias por tu ayuda.

La API no se puede cargar después de que el documento haya terminado de cargarse de forma predeterminada, deberá cargarlo de manera asíncrona.

modificar la página con el mapa:

 

Para obtener más información, consulte: https://stackoverflow.com/questions/14184956/async-google-maps-api-v3-undefined-is-not-a-function/14185834#14185834

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

Sé que esta respuesta no está directamente relacionada con el problema de esta pregunta, pero en algunos casos el problema “Uncaught ReferenceError: google no está definido” se producirá si se llama al archivo js antes de la API de Google Maps que está utilizando … así que NO HAGAS esto:

   

En una apuesta, estás inicializando algo antes de tu función de inicialización: var directionsService = new google.maps.DirectionsService();

Mueva eso a la función, por lo que no intentará y ejecutará antes de que se cargue la página.

 var directionsDisplay, directionsService; var map; function initialize() { directionsService = new google.maps.DirectionsService(); directionsDisplay = new google.maps.DirectionsRenderer(); 

Para mi

Añadiendo esta línea

  

Antes de esta linea

  

trabajó

Tal vez usando

  

en lugar de

 $(function(){ initialize(); }); 

puedo ayudarte.

Puede que no sea relevante para todos, pero este pequeño detalle estaba causando que el mío no funcionara:

Cambiar div de esto:

 

A esto: