google map Uncaught TypeError: Cannot read property 'offsetWidth' of null

google-maps geocoding

14,605

Try calling the JavaScript function after the HTML element, as most of the time this issue occurs because the elements are not yet fully rendered when the script function is called.

14,605

Author by

user2437128

Updated on June 04, 2022

Comments

user2437128 almost 2 years

this is the source containing googlemap api. i'm newbie on the web programming. I hardly made this web page. but i faced above error. I read many questions regarded this error. but i could not fix this error. please fix this error. thanks.

<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>

magicode118 almost 10 years

@user2437128: Please tick as the accepted answer if my reply is the correct answer that helped you solve your issue, thanks!