Google Maps API는 AJAX를 사용할 때만 "Uncaught ReferenceError : google is not defined"를 발생시킵니다.

Question 1

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>

당신의 도움을 주셔서 감사합니다.

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>

자세한 내용은 /programming/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 : 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>

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 is not defined 오류는 map 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();
});

당신을 도울 수 있습니다.