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/
답변
이 답변이이 질문의 문제와 직접적인 관련이 없다는 것을 알고 있지만 사용중인 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();
답변
Uncaught ReferenceError : google is not defined 오류는 map API 스크립트 태그에서 비동기 지연 을 제거하면 사라 집니다.
답변
모든 해결 방법을 수행 한 후 저에게 도움이 된 것은 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)을 사용하고 있습니다.
답변
나를 위해
이 줄 추가
<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>
일했다
답변
모든 사람과 관련이 없을 수도 있지만이 작은 세부 사항으로 인해 제 기능이 작동하지 않았습니다.
다음과 같이 div를 변경하십시오.
<div class="map">
이에:
<div id="map">
