Google MAP API Uncatched TypeError: null의 속성 'offsetWidth'를 읽을 수 없습니다.

Google MAP API Uncatched TypeError: null의 속성 'offsetWidth'를 읽을 수 없습니다.

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>

이 코드를 실행하면 브라우저에 이렇게 표시됩니다.

Uncaught TypeError: null의 속성 'offsetWidth'를 읽을 수 없습니다.

저는 이 튜토리얼에 나와 있는 지시에 따르기 때문에 잘 모르겠습니다.

무슨 단서라도 있어?

이 문제는 보통 맵 div에 액세스해야 하는 Javascript가 실행되기 전에 렌더링되지 않기 때문입니다.

태그 바로 전에 DOM이 완전히 렌더링되도록 초기화 코드를 onload 함수 안이나 HTML 파일 하단에 넣어야 합니다(두 번째 옵션은 비활성 HTML에 더 민감합니다).

주의: mattheets에 의해 지적된 바와 같이 이는 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>

위의 권장사항을 시행한 후에도 이 문제가 발생할 수 있는 다른 경우에는 초기화 함수의 맵 캔버스에 잘못된 셀렉터를 사용하면 함수가 존재하지 않는 항목에 액세스하려고 할 때와 같은 문제가 발생할 수 있습니다.initialize 함수와 HTML이 일치하는 지도 ID를 재확인하거나 동일한 오류가 발생할 수 있습니다.

즉, ID가 일치하고 있는 것을 확인합니다.; )

는, 이 에러를 지정하지 않은 할 수 .center ★★★★★★★★★★★★★★★★★」zoom을 사용하다

은 ""를 사용합니다.id="map_canvas" ★★★★★★★★★★★★★★★★★」id="map-canvas": D 플 에 id id id ID : D - - - - - 、 다시 합니다.다리다

year, geocodezip의 답은 정확합니다.따라서 코드를 다음과 같이 변경합니다. (아직 문제가 있는 경우 또는 미래에 다른 사용자가 있을 수 있습니다.)

<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이를 이 하면 div가 됩니다.

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

모든 게 성공했어!이게 도움이 됐으면 좋겠네요.

이 문제가 아직 남아 있을 수 있는 다른 경우에는 셀프 클로징을 사용하고 있었습니다.<div id="map1" />&close 태그로 하자마자 / open&close 태그로 변경되었습니다.<div id="map1"></div>

또, 쓰지 않게 주의해 주세요.

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를 map-canvas에서 map으로 변경하여 ID가 같은지 확인하고 div의 폭과 높이가 있는지 확인했는데, 윈도우 로드 호출이 끝날 때까지 코드가 실행되지 않았습니다.대시가 아니라 지도 이외의 ID에서는 동작하지 않는 것 같습니다.

또한 셀렉터 안에 해시 기호(#)를 넣지 마십시오.

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

    document.getElementById('map') // good

진술.jQuery가 아닙니다.급한 사람을 위한 간단한 알림입니다.

저도 같은 문제가 있었습니다만, 문제는 Google Maps에 주어진 옵션 오브젝트에 줌이 정의되어 있지 않다는 것입니다.

루프로 여러 맵을 작성하는 경우 단일 맵 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 웹폼을 사용하고 마스터 페이지를 사용하여 페이지 뒷면의 코드로 스크립트를 등록하는 경우 클라이언트를 사용하는 것을 잊지 마십시오.맵 요소의 ID(vb.net):

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가 없을 때도 오류가 발생할 수 있다는 점을 덧붙이고 싶었어요.또한 구글맵 함수 호출을 로드하기 전에 먼저 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()를 설정합니다.

• 컨트롤러 내

  $140을 사용합니다.init = function() {...google.maps.event.addDomListener(윈도, "load", init){...}

이게 도움이 되길 바라.

이 문제를 해결하는 가장 쉬운 방법은 Javascript 코드가 작동하기 전에 오브젝트를 옮기는 것입니다.당신의 답변 오브젝트는 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>

제 경우 이런 종류의 문제는defer https://developer.mozilla.org/en/docs/Web/HTML/Element/script

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

단, 브라우저의 이 옵션 지원을 고려해야 합니다(문제를 발견하지 못했습니다).

덮어쓰지 않았는지 확인합니다.window.self

문제:컴포넌트를 만들어서self = thisvar 대신self = this키워드를 사용하지 않으면var, JS는 그 변수를 윈도우 오브젝트에 넣을 것입니다, 그래서 나는 오버로트를 합니다.window.self이 에러의 원인이 됩니다.

이는 이전에 삭제된 게시물을 편집하여 링크된 답변의 내용을 답변 자체에 포함합니다.이 답변을 다시 게시하는 목적은 이 문제에 부딪힌 React 0.9+ 사용자의 PSA 역할을 하는 것입니다.

원편집 투고

---

리액트 사용 중 이 에러가 발생.JS가 이 블로그 투고를 팔로우하는 동안 sahat의 코멘트가 도움이 되었습니다.아래의 sahat의 코멘트의 내용을 봐 주세요.

❗반응 참고 > = 0.9

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

즉, React의 최신 버전에서 rootNode 파라미터를 this.getDOMNode()로 바꿉니다.

나의 실패는 을 사용하는 것이었다.

zoomLevel

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

zoom

add async defer는 맵 API 키콜 시작 시 발생합니다.

제가 취급하고 있는 경우는 장소가 공개되었는지 여부에 따라 맵 div가 조건부로 렌더링되었습니다.지도 캔버스 div가 페이지에 표시될지 확신할 수 없는 경우, 간단히 확인하세요.document.getElementById는 요소를 반환하고 맵이 존재하는 경우에만 맵을 호출합니다.

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

여기서 문제가 되는 것은 API 링크로, 이 링크에는key파라미터:

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

그렇게 하면 된다.

언급URL : https://stackoverflow.com/questions/11740663/google-map-api-uncaught-typeerror-cannot-read-property-offsetwidth-of-null