La API de Google Maps arroja "Error de referencia no detectado: Google no está definido" solo cuando se usa AJAX

Question 1

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 intento cargar la página usando AJAX, aparece el error:

Uncaught ReferenceError: google is not defined

¿Por qué es esto?

Esta es la página con el mapa:

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

Y esta la página con la llamada AJAX:

<!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>

Gracias por tu ayuda.

Question 2

La API no se puede cargar después de que el documento haya terminado de cargarse de forma predeterminada, deberá cargarlo de forma asincrónica.

modificar la página con el mapa:

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

Para obtener más detalles, consulte: /programming/14184956/async-google-maps-api-v3-undefined-is-not-a-function/14185834#14185834

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

Question 3

Sé que esta respuesta no está directamente relacionada con el problema de esta pregunta, pero en algunos casos se producirá el problema "Error de referencia no detectado: Google no está definido" si se llama a su archivo js antes de la API de mapas de Google que está utilizando ... así que NO HAGAS esto:

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

Question 4

Supongo que está inicializando algo antes de su función de inicialización: var directionsService = new google.maps.DirectionsService();

Mueva eso a la función, para que no intente ejecutarlo 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();

Question 5

Error de referencia no detectado: el error de Google no está definido desaparecerá cuando se elimine el aplazamiento asíncrono de la etiqueta de secuencia de comandos de la API del mapa.

Question 6

Lo que funcionó para mí después de seguir todas sus soluciones fue llamar a la API:

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

antes de mi: <div id="map"></div>

Estoy usando .ASP NET (MVC)

Question 7

Para mi

Añadiendo esta línea

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

Antes de esta línea.

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

trabajó

Question 8

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

Cambiar div de esto:

<div class="map">

A esto:

<div id="map">

Question 9

Tal vez usando

<body onload="initialize();">

en vez de

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

puedo ayudarte.