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>
ご協力いただきありがとうございます。
デフォルトでは、ドキュメントの読み込みが完了した後、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>
私はこの答えがこの質問の問題に直接関連していないことを知っていますが、使用している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>
推測では、初期化関数の前に何かを初期化しています:var directionsService = new google.maps.DirectionsService();
それを関数に移動して、ページがロードされる前に実行しようとしないようにします。
var directionsDisplay, directionsService;
var map;
function initialize() {
directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer();
すべての人に関連するわけではないかもしれませんが、この小さな詳細が原因で機能しなくなりました。
これからdivを変更:
<div class="map">
これ:
<div id="map">
私のために
この行を追加する
<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>
働いた
キャッチされていないReferenceError:マップAPIスクリプトタグからasync deferを削除すると、google is not definedエラーがなくなります。