다음 코드와 함께 Google MAP API v3을 사용하려고합니다.

<h2>Topology</h2>

<script src="https://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="{% url css_media 'tooltip.topology.css' %}" />
<link rel="stylesheet" type="text/css" href="{% url css_media 'tooltip.css' %}" />

<style type="text/css" >
      #map_canvas {
              width:300px;
            height:300px;
     }
</style>

<script type="text/javascript">

var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);

</script>

<div id="map_canvas"> </div>

이 코드를 실행하면 브라우저가 이것을 말합니다.

잡히지 않은 TypeError : null의 'offsetWidth'속성을 읽을 수 없습니다

이 튜토리얼 에서 주어진 지시를 따르기 때문에 나는 모른다 .

실마리가 있습니까?

이 문제는 일반적으로 자바 스크립트가 실행되기 전에지도 div가 렌더링되지 않아서 발생합니다.

초기화 코드를 태그 바로 앞에있는 onload 함수 내부 또는 HTML 파일의 맨 아래에 두어야 DOM이 실행되기 전에 DOM이 완전히 렌더링됩니다 (두 번째 옵션은 잘못된 HTML에 더 민감합니다).

matthewsheets가 지적한 것처럼 이것은 HTML에 ID가 전혀없는 div로 인해 발생할 수 있습니다 (div의 병리학 적 사례는 렌더링되지 않습니다)

wf9a5m75 의 게시물 에서 코드 샘플을 추가 하여 모든 것을 한곳에 배치하십시오.

<script type="text/javascript">

function initialize() {
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);
}
google.maps.event.addDomListener(window, "load", initialize);

</script>

여전히이 문제가있을 수있는 다른 사람들을 위해위의 권장 사항을 시도한 후에도 경우 초기화 함수에서 맵 캔버스에 잘못된 선택기를 사용하면 함수가 존재하지 않는 무언가에 액세스하려고 할 때와 동일한 문제가 발생할 수 있습니다. 초기화 함수 및 맵에서 맵 ID가 일치하는지 다시 확인하십시오. 그렇지 않으면 동일한 오류가 발생할 수 있습니다.

다시 말해, ID가 일치하는지 확인하십시오. ;)

center또는 zoom지도 옵션을 지정하지 않으면이 오류가 발생할 수도 있습니다.

구글의 사용 id="map_canvas"및id="map-canvas" D : 샘플에서 다시 확인하고 다시 한 번 확인 ID를

지오 코드 집의 답은 정확합니다. 따라서 코드를 다음과 같이 변경하십시오 (여전히 문제가 있거나 미래에 다른 사람이 있다면)

<script type="text/javascript">

function initialize() {
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);
}
google.maps.event.addDomListener(window, "load", initialize);

</script>

그래서 이것이 작동하도록 실패 시나리오를 추가합니다. 나는 <div id="map>맵으로 다음을로드했습니다.

var map = new google.maps.Map(document.getElementById("map"), myOptions);

div는 처음에 숨겨져 있었고 너비와 높이 값을 명시 적으로 설정하지 않았으므로 크기는이었습니다 width x 0. CSS 에서이 div의 크기를 다음과 같이 설정하면

#map {
    width: 500px;
    height: 300px;
}

모든 것이 작동했습니다! 이것이 누군가를 돕기를 바랍니다.

여전히이 문제가있을 수있는 다른 사람들 에게는 자체 폐쇄 <div id="map1" />태그를 사용하고 있었고 두 번째 div는 표시되지 않았으며 DOM에없는 것처럼 보입니다. 두 개의 열기 및 닫기 태그로 변경하자마자 <div id="map1"></div>작동했습니다. hth

또한 쓰지 않도록주의하십시오

google.maps.event.addDomListener(window, "load", init())

옳은:

google.maps.event.addDomListener(window, "load", init)

나는 작은 따옴표를했다

var map = new google.maps.Map( document.getElementById('map_canvas') );

큰 따옴표로 대체했습니다.

var map = new google.maps.Map( document.getElementById("map_canvas") );

이것은 나를 위해 속임수를했다.

ID가 동일하다는 것을 확인했지만 div의 너비와 높이가 있고 코드가 없었지만 ID (3 곳 모두에서)를 "map-canvas"에서 "map"으로 변경하면 문제가 해결되었습니다. 창로드 호출이 끝날 때까지 실행됩니다. 대시가 아닙니다. "map"이외의 다른 ID에서는 작동하지 않는 것 같습니다.

또한 셀렉터 내부에 해시 기호 (#)를 배치하지 마십시오.

    document.getElementById('#map') // bad

    document.getElementById('map') // good

성명서. jQuery가 아닙니다. 급한 사람을위한 간단한 알림입니다.

나는 같은 문제가 있었지만 문제는 줌이 Google지도에 제공된 옵션 객체 내에 정의되지 않았다는 것입니다.

루프에서 여러 맵을 작성하는 경우 단일 맵 DOM 요소가 존재하지 않으면 모든 맵이 중단됩니다. 먼저 새 Map 객체를 만들기 전에 DOM 요소가 있는지 확인하십시오.

[...]

for( var i = 0; i <= self.multiple_maps; i++ ) {

  var map_element = document.getElementById( 'map' + '-' + i.toString() );

  // Element doesn't exist, don't create map!
  if( null === map_element ) {
    continue;
  }

  var map = new google.maps.Map( map_element, myOptions);
}

[...]

asp.net Webforms를 사용하고 마스터 페이지를 사용하여 페이지 뒤의 코드에 스크립트를 등록하는 경우 맵 요소 (vb.net)의 clientID를 사용하는 것을 잊지 마십시오.

ClientScript.RegisterStartupScript(Me.[GetType](), "Google Maps Initialization", String.Format("init_map(""" & map_canvas.ClientID() & """...

이를 해결 async defer하려면 스크립트 에 추가 해야합니다.

다음과 같아야합니다.

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>

비동기 지연의 의미는 여기를 참조 하십시오 .

기본 js 파일에서 함수를 호출 할 것이기 때문에 이것이 메인 스크립트를로드 한 다음에 있는지 확인하려고합니다.

장소 라이브러리를 포함해야합니다 &libraries=placesAPI를 처음로드 할 때 매개 변수 .

예를 들면 다음과 같습니다.

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

나는 파티에 조금 늦었다는 것을 알고 있으며, div가 페이지에 존재하지 않을 때도 오류가 발생할 수 있다고 덧붙이고 싶었습니다. google maps 함수 호출을로드하기 전에 div가 먼저 존재하는지 확인할 수도 있습니다. 같은 것

function initMap() {
    if($("#venuemap").length != 0) {
        var city= {lat: -26.2041, lng: 28.0473};
        var map = new google.maps.Map(document.getElementById('venuemap'), {
       etc etc
     }
}

• HTML에서 ng-init = init () 설정

• 그리고 컨트롤러에서

  google.maps.event.addDomListener (window, "load", init) 대신 $ scope.init = function () {...} 사용 {...}

이것이 도움이되기를 바랍니다.

실제로 이것을 해결하는 가장 쉬운 방법은 객체가 Javascript 코드보다 먼저 작동하기 전에 객체를 옮기는 것입니다. 자바 스크립트 코드 후에 응답 객체가로드 된 것 같습니다.

<style type="text/css" >
      #map_canvas {
              width:300px;
            height:300px;
     }

 <div id="map_canvas"> </div> // Here 

<script type="text/javascript">

var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);

</script>

<div id="map_canvas"> </div>

필자의 경우 이러한 종류의 문제는 https://developer.mozilla.org/en/docs/Web/HTML/Element/script를 사용하여 해결되었습니다.defer

<script src="<your file>.js" defer></script>

그래도 브라우저 의이 옵션 지원을 고려해야합니다 (문제는 보지 못했습니다)

재정의하고 있지 않은지 확인 window.self

내 문제 : 구성 요소를 만들고 self = thisvar 대신 썼습니다 self = this. 키워드를 사용하지 않으면 varJS가 해당 변수를 창 객체에 배치 하므로이 window.self오류가 발생했습니다.

이것은 답변 자체에 링크 된 답변의 내용을 포함하기 위해 이전에 삭제 된 게시물을 편집 한 것입니다. 이 답변을 다시 게시하는 목적은이 문제에 빠진 React 0.9+ 사용자를위한 PSA 역할을하는 것입니다.

원래 수정 된 게시물

이 블로그 게시물 을 따르는 동안 ReactJS를 사용하는 동안이 오류가 발생 했습니다 . 여기에서 sahat의 의견 이 도움이되었습니다. 아래에서 sahat의 의견 내용을보십시오.

❗️ 반응에 대한 참고 사항> = 0.9

v0.9 이전에는 DOM 노드가 마지막 인수로 전달되었습니다. 이것을 사용하는 경우 this.getDOMNode ()를 호출하여 DOM 노드에 계속 액세스 할 수 있습니다.

즉, 최신 버전의 React에서 rootNode 매개 변수를 this.getDOMNode ()로 바꾸십시오.

내 실패는 사용했다

zoomLevel

올바른 옵션이 아닌 옵션으로

zoom

맵 API 키 호출 시작시 비동기 지연을 추가하십시오.

내가 처리 한 경우 위치가 공개되었는지 여부에 따라 맵 div가 조건부로 렌더링되었습니다. 지도 캔버스 div가 페이지에 있는지 여부를 확신 할 수없는 경우 document.getElementById요소를 반환 하는지 확인 하고지도가있는 경우에만지도를 호출하십시오.

var mapEle = document.getElementById("map_canvas");
if (mapEle) {
    map = new google.maps.Map(mapEle, myOptions);
}

여기서 문제는 key매개 변수가 없는 API 링크입니다 .

<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=places&key=YOURKEY"></script>

그런 식으로 잘 작동합니다.