web-dev-qa-db-ja.com

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

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>

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

ajaxgoogle-maps-api-3
70
greener

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

79
Dr.Molle

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

<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

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

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

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

すべての人に関連するわけではないかもしれませんが、この小さな詳細が原因で機能しなくなりました。

これからdivを変更：

<div class="map">

これ：

<div id="map">
1
Jack Riminton

私のために

この行を追加する

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

働いた

0
Rupesh

キャッチされていないReferenceError：マップAPIスクリプトタグからasync deferを削除すると、google is not definedエラーがなくなります。

0
Sohan Jangid