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>
당신의 도움을 주셔서 감사합니다.
문서가 기본적으로로드를 마친 후에는 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>
예 : http://jsfiddle.net/doktormolle/zJ5em/
I know this answer is not directly related to this questions' issue but in some cases the "Uncaught ReferenceError: google is not defined" issue will occur if your js file is being called prior to the google maps api you're using...so DON'T DO this:
<script type ="text/javascript" src ="SomeJScriptfile.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
At a guess, you're initialising something before your initialize function: var directionsService = new google.maps.DirectionsService();
Move that into the function, so it won't try and execute it before the page is loaded.
var directionsDisplay, directionsService;
var map;
function initialize() {
directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer();
Might not be relevant for everyone but this little detail was causing mine not to work:
Change div from this:
<div class="map">
To this:
<div id="map">
Uncaught ReferenceError: google is not defined error will be gone when removed the async defer from the map API script tag.
What worked for me after following all your workarounds was to call the API:
<script async defer src="https://maps.googleapis.com/maps/api/js?key=you_API_KEY&callback=initMap&libraries=places"
type="text/javascript"></script>
before my : <div id="map"></div>
I am using .ASP NET (MVC)
For me
Adding this line
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
Before this line.
<script id="microloader" type="text/javascript" src=".sencha/app/microloader/development.js"></script>
worked
Maybe using
<body onload="initialize();">
instead of
$(function(){
initialize();
});
can help you.
'developer tip' 카테고리의 다른 글
| 내 포트를 사용하는 애플리케이션을 어떻게 찾습니까? (0) | 2020.10.19 |
|---|---|
| Bash 스크립트에서 virtualenv 활성화를 소싱하는 방법 (0) | 2020.10.19 |
| 다중 / 인 테이블 유효? (0) | 2020.10.19 |
| Numpy isnan ()이 float 배열에서 실패합니다 (pandas 데이터 프레임 적용). (0) | 2020.10.19 |
| jQuery 객체 및 DOM 요소 (0) | 2020.10.19 |