L'API GoogleMaps lance "Uncaught ReferenceError: google n'est pas défini" uniquement lorsque vous utilisez AJAX

j'ai une page qui utilise L'API GoogleMaps pour afficher une carte. Lorsque je charge la page directement, la carte apparaît. Cependant, quand j'essaie de charger la page en utilisant AJAX, j'obtiens l'erreur: 

Uncaught ReferenceError: google is not defined

pourquoi?

C'est la page avec la carte: 

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

et ceci la page avec L'appel 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>

Merci pour votre aide.

60
demandé sur greener 2013-01-09 10:44:53

6 réponses

l'API ne peut pas être chargée après que le document a terminé le chargement par défaut, vous aurez besoin de le charger asynchrone.

modifier la page avec la carte: 

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

pour plus de détails, Regardez: /q/async-google-maps-api-v3-undefined-is-not-a-function-closed-35042/"http://jsfiddle.net/doktormolle/zJ5em/" rel= "noreferrer"> http://jsfiddle.net/doktormolle/zJ5em /

71
répondu Dr.Molle 2017-05-23 12:34:45

je sais que cette réponse n'est pas directement liée à la question de cette question, mais dans certains cas, la question "Uncaught ReferenceError: google n'est pas défini" se produira si votre fichier js est appelé avant l'api GoogleMaps que vous utilisez...alors ne faites pas cela: 

<script type ="text/javascript" src ="SomeJScriptfile.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
33
répondu Rex CoolCode Charles 2014-07-16 03:57:02

à première vue, vous initialisez quelque chose avant d'initialiser votre fonction: var directionsService = new google.maps.DirectionsService();

déplacez cela dans la fonction, de sorte qu'il ne sera pas essayer et l'exécuter avant que la page est chargée. 

var directionsDisplay, directionsService;
var map;
function initialize() {
  directionsService = new google.maps.DirectionsService();
  directionsDisplay = new google.maps.DirectionsRenderer();
5
répondu duncan 2013-10-15 08:03:35

pour moi

ajouter cette ligne 

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

avant cette ligne. 

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

ouvré

0
répondu Rupesh 2016-01-30 16:43:51

peut-être en utilisant 

<body onload="initialize();">

au lieu de 

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

peut vous aider.

0
répondu rotring05 2016-09-01 10:26:19

pourrait ne pas être pertinent pour tout le monde, mais ce petit détail a causé la mine ne fonctionne pas:

Changement div ceci: 

<div class="map">

à ceci: 

<div id="map">
0
répondu Jack Riminton 2017-10-27 10:11:21