Google Maps APIは、AJAXを使用している場合にのみ、「Uncaught ReferenceError：google isnotdefined」をスローします

Question 1

Google MapsAPIを使用して地図を表示するページがあります。ページを直接読み込むと、地図が表示されます。ただし、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>

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

Question 2

デフォルトでは、ドキュメントの読み込みが完了した後は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/

Question 3

この回答はこの質問の問題に直接関係していないことは知っていますが、使用しているgoogleマップAPIの前にjsファイルが呼び出されていると、「Uncaught ReferenceError：googleisnotdefined」の問題が発生する場合があります...だからこれをしないでください：

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

Question 4

推測では、初期化関数の前に何かを初期化しています。 var directionsService = new google.maps.DirectionsService();

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

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

Question 5

Uncaught ReferenceError：Googleが定義されていません。マップAPIスクリプトタグから非同期遅延を削除すると、エラーがなくなります。

Question 6

すべての回避策を実行した後、私にとってうまくいったのは、APIを呼び出すことでした。

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

私の前に： <div id="map"></div>

.ASP NET（MVC）を使用しています

Question 7

私のために

この行を追加する

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

働いた

Question 8

すべての人に関係があるとは限らないかもしれませんが、この小さな詳細が私の機能を低下させていました。

これからdivを変更します：

<div class="map">

これに：

<div id="map">

Question 9

多分使用

<body onload="initialize();">

の代わりに

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

あなたを助けられる。