89

Google Maps API を使用して地図を表示するページがあります。ページを直接読み込むと、マップが表示されます。ただし、AJAX を使用してページを読み込もうとすると、次のエラーが発生します。

Uncaught ReferenceError: google is not defined

どうしてこれなの？

これは地図のあるページです：

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

そして、これは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>

ご協力いただきありがとうございます。

4

7 に答える 7

92

デフォルトでは、ドキュメントの読み込みが完了した後に API を読み込むことはできません。非同期で読み込む必要があります。

マップを使用してページを変更します。

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

詳細については、https ://stackoverflow.com/questions/14184956/async-google-maps-api-v3-undefined-is-not-a-function/14185834#14185834 をご覧ください。

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

于 2013-01-09T12:45:29.293 に答える
8

推測では、初期化関数の前に何かを初期化しています:

var directionsService = new google.maps.DirectionsService();

それを関数に移動して、ページが読み込まれる前に実行しようとしないようにします。

var directionsDisplay;
var directionsService;
var map;

function initialize() {
  directionsService = new google.maps.DirectionsService();
  directionsDisplay = new google.maps.DirectionsRenderer();
}
于 2013-01-09T09:07:17.993 に答える
-1

私のため

この行を追加する

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

この行の前。

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

働いた

于 2016-01-30T16:43:51.580 に答える