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.
ajax
google-maps-api-3
verder
fuente
fuente
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>fuente
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();fuente
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.
fuente
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)
fuente
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ó
fuente
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">fuente
Tal vez usando
<body onload="initialize();">en vez de
$(function(){ initialize(); });puedo ayudarte.
fuente