A API do Google Maps gera “Uncaught ReferenceError: google is not defined” apenas ao usar AJAX

85

Tenho uma página que usa a API do Google Maps para exibir um mapa. Quando eu carrego a página diretamente, o mapa aparece. No entanto, quando tento carregar a página usando AJAX, recebo o erro:

Uncaught ReferenceError: google is not defined

Por que é isso?

Esta é a página com o 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>

E esta é a página com a chamada 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>

Obrigado pela ajuda.

mais verde
fonte

Respostas:

88

Por padrão, a API não pode ser carregada após o término do carregamento do documento, você precisará carregá-lo de forma assíncrona.

modifique a página com o 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 obter mais detalhes, dê uma olhada em: /programming/14184956/async-google-maps-api-v3-undefined-is-not-a-function/14185834#14185834

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

Dr.Molle
fonte
Obrigado! Faz todo o sentido agora. Acabei de fazer um acompanhamento: meu mapa está vindo todo esmaecido (com o logotipo do Google, link e termos de uso). Posso ver no Firebug que os blocos estão carregando. Você sabe qual pode ser o motivo?
mais verde
Normalmente, isso é o resultado de uma opção de mapa ausente / inválida como zoom, mapTypeId ou center (todos eles são obrigatórios, quando estão ausentes ou um valor inválido foi atribuído, não há valor padrão para um substituto, o mapa não pôde ser processado)
Dr.Molle
1
O problema tem a ver com o fato de que estou escondendo a div na qual o mapa aparece. Tenho uma pergunta separada para isso aqui: stackoverflow.com/questions/14263472/…
greener
39

Sei que esta resposta não está diretamente relacionada ao problema desta pergunta, mas em alguns casos o problema "Uncaught ReferenceError: google is not defined" ocorrerá se seu arquivo js for chamado antes da API do Google Maps que você está usando ... então NÃO FAÇA isso:

<script type ="text/javascript" src ="SomeJScriptfile.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
Rex CoolCode Charles
fonte
meu google maps api include está acima do meu js autodefinido, ainda recebendo esse erro, mas não o tempo todo. Às vezes, ele carrega muito bem. Preciso interceptar esse erro, mas não tenho ideia de qual é a causa.
JkAlombro
@JkAlombro referência aceita resposta no link abaixo. Acho que cobre a maioria dos casos em que você deve estar particularmente preocupado com a ordem dos arquivos da biblioteca JScript. Você também pode querer considerar o uso de conexão assíncrona para gerenciar melhor isso, conforme sugerido na resposta original para este tópico. stackoverflow.com/questions/4987977/…
Rex CoolCode Charles
8

Em suma, você está inicializando algo antes de sua função de inicialização: var directionsService = new google.maps.DirectionsService();

Mova-o para a função, para que ele não tente executá-lo antes de a página ser carregada.

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

ReferenceError não capturado: o erro google is not defined desaparecerá quando for removido o adiamento assíncrono da tag de script da API do mapa.

Sohan Jangid
fonte
3

O que funcionou para mim depois de seguir todas as suas soluções alternativas foi chamar a 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 do meu: <div id="map"></div>

Estou usando .ASP NET (MVC)

Fotini Pipi
fonte
0

Para mim

Adicionando esta linha

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

Antes desta linha.

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

trabalhou

Rupesh
fonte
0

Pode não ser relevante para todos, mas esse pequeno detalhe estava fazendo com que o meu não funcionasse:

Altere o div deste:

<div class="map">

Para isso:

<div id="map">
Jack Riminton
fonte
-2

Talvez usando

<body onload="initialize();">

ao invés de

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

pode te ajudar.

Başar Söker
fonte