Menu
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>
316
asked Dec 05 '25 14:12
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.
105
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
