Ik heb een pagina die de Google Maps API gebruikt om een kaart weer te geven. Als ik de pagina rechtstreeks laad, verschijnt de kaart. Wanneer ik echter de pagina probeer te laden met AJAX, krijg ik de foutmelding:
Uncaught ReferenceError: google is not defined
Waarom is dit?
Dit is de pagina met de kaart:
<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>
En dit is de pagina met de AJAX-aanroep:
<!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>
Bedankt voor je hulp.
Antwoord 1, autoriteit 100%
De API kan niet worden geladen nadat het document standaard is geladen, u moet deze asynchroon laden.
wijzig de pagina met de kaart:
<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>
Kijk voor meer informatie op: https://stackoverflow.com/questions/14184956/async-google-maps-api-v3-undefined-is-not-a-function/14185834#14185834
Voorbeeld: http://jsfiddle.net/doktormolle/zJ5em/
Antwoord 2, autoriteit 41%
Ik weet dat dit antwoord niet direct verband houdt met het probleem van deze vraag, maar in sommige gevallen zal het probleem “Uncaught ReferenceError: google is notdefined” optreden als uw js-bestand wordt aangeroepen voorafgaand aan de Google Maps-API die u gebruikt …dus NIET DOEN:
<script type ="text/javascript" src ="SomeJScriptfile.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
Antwoord 3, autoriteit 9%
Naar schatting initialiseert u iets vóór uw initialisatiefunctie:
var directionsService = new google.maps.DirectionsService();
Verplaats dat naar de functie, zodat het niet zal proberen het uit te voeren voordat de pagina is geladen.
var directionsDisplay;
var directionsService;
var map;
function initialize() {
directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer();
}
Antwoord 4, autoriteit 7%
Uncaught ReferenceError: google is notdefined fout zal verdwijnen wanneer de async defer uit de map API-scripttag wordt verwijderd.
Antwoord 5, autoriteit 3%
Wat voor mij werkte nadat ik al je tijdelijke oplossingen had gevolgd, was om de API aan te roepen:
<script async defer src="https://maps.googleapis.com/maps/api/js?key=you_API_KEY&callback=initMap&libraries=places"
type="text/javascript"></script>
voor mijn : <div id="map"></div>
Ik gebruik .ASP NET (MVC)
Antwoord 6
Ik heb verschillende browsers geprobeerd en het antwoord voor mij was dat het heel belangrijk is om te hebben
in script tag dit type=”text/javascript”
Het is erg belangrijk om aan elk js-script toe te voegen voor browsercompatibiliteit
<script type="text/javascript" src="ANY_FILE_OR_URL"></script>
Hierna komen de problemen als
Uncaught ReferenceError: google is not defined of anderen (die geen referentie kunnen laden zijn verdwenen)
Antwoord 7
Voor mij
Deze regel toevoegen
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
Vóór deze regel.
<script id="microloader" type="text/javascript" src=".sencha/app/microloader/development.js"></script>
werkte