google map Uncaught TypeError: Cannot read property 'offsetWidth', null
c'est la source contenant googlemap api.
je suis newbie sur la programmation web.
J'ai fait à peine cette page web. mais j'ai fait face à d'erreur ci-dessus.
J'ai lu beaucoup de questions à considérer cette erreur.
mais je ne pouvais pas corriger cette erreur.
merci de corriger cette erreur.
merci.
<html>
<head>
<title>geocoder</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
</script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var kyun ="kyun";
var map;
var marker;
var formated_address2;
var temp_x;
var temp_y;
var value1;
$(document).ready(function() {
var latlng = new google.maps.LatLng(37.5640, 126.9751);
var myOptions = {
zoom : 12,
center : latlng,
mapTypeId : google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
marker = new google.maps.Marker({
position : latlng,
map : map
});
var geocoder = new google.maps.Geocoder();
google.maps.event.addListener(map, 'click', function(event) {
var location = event.latLng;
geocoder.geocode({
'latLng' : location
},
function(results, status){
if( status == google.maps.GeocoderStatus.OK ) {
$('#address').html(results[0].formatted_address);
$('#lat').html(results[0].geometry.location.lat());
$('#lng').html(results[0].geometry.location.lng());
value1 = results[0].geometry.location.lat() +',' + results[0].geometry.location.lng();
}
else {
alert("Geocoder failed due to: " + status);
}
});
if( !marker ) {
marker = new google.maps.Marker({
position : location,
map : map
});
}
else {
marker.setMap(null);
marker = new google.maps.Marker({
position : location,
map : map
});
}
map.setCenter(location);
});
});
GoogleMap = {
/* 초기화. */
initialize : function() {
this.input = document.getElementById("GoogleMap_input");
this.address = document.getElementById("GoogleMap_addr");
this.geocoder = new google.maps.Geocoder();
this.infowindow = new google.maps.InfoWindow();
//지도 생성.(기본 위치 서울.)
var latlng = new google.maps.LatLng(37.56641923090,126.9778741551);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
this.map = new google.maps.Map(
document.getElementById("GoogleMap_map"),myOptions);
//마커 생성.
this.marker = new google.maps.Marker({
map : this.map,
animation: google.maps.Animation.DROP
});
},
/* 주소 검색.(지오코딩) */
codeAddress : function() {
var address = this.input.value;
//콜백 함수 호출.
this.geocoder.geocode( { 'address': address},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
//검색 된 주소 목록.
GoogleMap.address.innerHTML = "";
var ul = document.createElement('ul');
for(var i=0; i<results.length; i++){
var li = document.createElement('li');
var a = document.createElement('a');
a.href = "#" + results[i].geometry.location;
var str_pos = results[i].geometry.location.toString().split(',');
var x = str_pos[0]
x = x.substring(1,x.length).split('.');
x = x[0] + '.' + x[1].substring(0,6);
temp_x = x;
var y = str_pos[1]
y = y.substring(1,y.length).split('.');
y = y[0] + '.' + y[1].substring(0,6);
temp_y = y;
value = x+","+y;
a.innerHTML = results[i].formatted_address;
formated_address2 = results[i].formatted_address;
GoogleMap.clickAddress(a, results[i].geometry.location,
results[i].formatted_address);
li.appendChild(a);
ul.appendChild(li);
}
GoogleMap.address.appendChild(ul);
}
});
},
//주소 클릭 이벤트.
clickAddress : function(a, addr,content){
a.onmousedown = function(){
//지도와 마커이동.
/*
GoogleMap.map.setCenter(addr);
GoogleMap.marker.setPosition(addr);
GoogleMap.marker.setAnimation(google.maps.Animation.DROP);
GoogleMap.infowindow.setContent(content);
GoogleMap.infowindow.open(GoogleMap.map,GoogleMap.marker);
*/
kyun = addr;
clss.a();
}
}
}
window.onload = function(){
GoogleMap.initialize();
}
function insertText()
{
var tempName = window.top.dialogArguments;
tempName.userName = value1;
tempName.changeText();
}
function modalCancel()
{
var tempName = window.dialogArguments;
tempName.changeText();
}
function parentClose(){
window.top.close();
}
function newWin(){
window.open("test.html","","");
}
function modalclose(){
self.close();
}
clss = {
a: function () {
map.setCenter(kyun);
marker.setPosition(kyun);
marker.setAnimation(google.maps.Animation.DROP);
$('#address').html(formated_address2);
$('#lat').html(temp_x);
$('#lng').html(temp_y);
value1 = temp_x+','+temp_y;
}
}
</script>
</head>
<body>
<table border="1">
<tr>
<td colspan="2"><div id="map_canvas" style="width: 460px; height: 380px;"></div></td>
</tr>
<tr>
<th width="100">위도</th>
<td id="lat"></td>
</tr>
<tr>
<th>경도</th>
<td id="lng"></td>
</tr>
<tr>
<th>주소</th>
<td id="address"></td>
</tr>
<tr>
<td colspan = "2">
<div>
<input id="GoogleMap_input" type="textbox" value="" onkeydown="javascript:if(event.keyCode == 13) GoogleMap.codeAddress();" style='width:365px;'>
<input type="button" value="주소검색" onclick="javascript:GoogleMap.codeAddress();">
</div>
<div id="GoogleMap_addr"></div>
</td>
</tr>
<tr>
<td style='width:450px;' colspan ="2" align = "center">
<TABLE border = "0">
<div>
<tr>
<td style='width:225px;' align = "center">
<INPUT VALUE="취소" TYPE=button onclick="window.close();" style='width:200px;'><BR>
</td>
<td style='width:225px;' align = "center">
<INPUT VALUE="확인" TYPE=button onclick="insertText();window.close();" style='width:200px;'>
</td>
</tr>
</div>
</TABLE>
</td>
</tr>
</table>
</body>
</html>
Avez-vous essayé de l'exécution de votre code par le biais d'un programme de validation comme JSLint? Elle reprend plusieurs erreurs
double possible de Google MAP API Uncaught TypeError: Cannot read property 'offsetWidth', null. Vous n'avez pas de div avec id="GoogleMap_map".
double possible de Google MAP API Uncaught TypeError: Cannot read property 'offsetWidth', null. Vous n'avez pas de div avec id="GoogleMap_map".
OriginalL'auteur user2437128 | 2013-05-30
Vous devez vous connecter pour publier un commentaire.
Essayer d'appeler la fonction JavaScript après l'élément HTML comme la plupart du temps ce problème se produit car les éléments ne sont pas encore entièrement affiché lorsque la fonction de script est appelé.
OriginalL'auteur zalow517