web-dev-qa-db-fra.com

L'API de Google Maps génère "Uncaught ReferenceError: google n'est pas défini" uniquement lors de l'utilisation de AJAX.

J'ai une page qui utilise l'API Google Maps pour afficher une carte. Lorsque je charge directement la page, la carte apparaît. Cependant, lorsque j'essaie de charger la page avec AJAX, j'obtiens le message d'erreur suivant:

Uncaught ReferenceError: google is not defined

Pourquoi est-ce?

Voici 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 de votre aide.

ajaxgoogle-maps-api-3
72
greener

L'API ne peut pas être chargée une fois le chargement du document terminé par défaut. Vous devez le charger de manière 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, consultez: https://stackoverflow.com/questions/14184956/async-google-maps-api-v3-undefined-is-not-a -function/14185834 # 14185834

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

81
Dr.Molle

Je sais que cette réponse n'est pas directement liée au problème de cette question, mais dans certains cas, le problème "Uncaught ReferenceError: google n'est pas défini" se produira si votre fichier js est appelé avant l'API de Google Maps que vous utilisez ... alors ne faites pas ça:

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

À un moment donné, vous initialisez quelque chose avant votre fonction d'initialisation: var directionsService = new google.maps.DirectionsService();

Déplacez cela dans la fonction, afin qu'il ne tente pas de l'exécuter avant le chargement de la page.

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

Après avoir suivi toutes vos solutions de contournement, ce qui a fonctionné pour moi a été d'appeler l'API:

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

avant mon: <div id="map"></div>

J'utilise .ASP NET (MVC)

1
Fotini Pipi

Uncaught ReferenceError: google n'est pas défini, l'erreur disparaîtra une fois supprimés les différer de manière asynchrone de la balise de script de l'API de carte.

1
Sohan Jangid

Peut-être ne convient-il pas à tout le monde mais ce petit détail faisait que le mien ne fonctionnait pas:

Change div de this:

<div class="map">

À ceci:

<div id="map">
1
Jack Riminton

Pour moi

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

travaillé

0
Rupesh