다음 코드와 함께 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