0

나는이지도에서 '모방'의 코드를하려 : 간단한 지오 코더

https://google-developers.appspot.com/maps/documentation/javascript/examples/geocoding-simple

만 (물론 양식 값과 좌표) 포르토 알레그레에 Syney을 변경

. 그러나지도 캔버스가 화면에 표시되지 않기 때문에 문제가 발생했습니다. 코드를 확인하고 오타 또는 문법 실수를 찾지 못했습니다.

누군가 도와 드릴 수 있기를 바랍니다. 실제로 저는 Fusion Tables에서 Google Maps API보다 많이 사용됩니다.

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
<title>GEOCODER</title> 
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet"> 
<script src="https://maps.google.com/maps/api/js?sensor=false"></script> 
<script> 

var geocoder; 
var map; 
function initialize() { 
    geocoder = new google.maps.Geocoder(); 
    var latlng = new google.maps.LatLng(-30.027704, -51,228735); 
    var myOptions = { 
     zoom: 8, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
} 

function codeAddress() { 
    var address = document.getElementById("address").value; 
    geocoder.geocode({ 'address': address}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
     map.setCenter(results[0].geometry.location); 
     var marker = new google.maps.Marker({ 
      map: map, 
      position: results[0].geometry.location 
     }); 
     } else { 
     alert("Geocode was not successful for the following reason: " + status); 
     } 
    ); 
    } 
} 
</script> 
</head> 
<body onload="initialize()"> 
<div id="map_canvas" style="width: 320px; height: 480px;"></div> 
<div> 
    <input id="address" type="textbox" value="Porto Alegre, Brasil"> 
    <input type="button" value="Encode" onclick="codeAddress()"> 
</div> 
</body> 
</html>  

답변

2

구문 오류가 발생하여 두 행을 서로 바꿔야 할 수 있습니다. 자바 스크립트 콘솔을 확인하면 오류 메시지가 표시됩니다. JS가 당신이 기대하는 바를하지 않을 때 (또는 그럴 경우, 예기치 않은 실수가 없는지 확인하기 위해) 항상 그렇게해야합니다. 당신이이

: 당신이 당신의 헤더에 CSS 파일에 상대 링크를 제공

 } 
    } 
); 
} 
</script> 
+0

감사합니다. 이제지도가 잘 작동합니다! 나는 '코드 편집기'를 사용하는 것으로 충분하다고 생각했다. JavaScript 콘솔은 Firebug가 될 것입니까? –

+0

방화 광이 콘솔에 대한 액세스를 제공합니다 (예). 그러나 모든 최신 브라우저에는 하나의 브라우저가 내장되어 있습니다. 브라우저를 보는 방법을 알아내는 것이 좋습니다. 그것은 디버깅에 중요합니다. – Trott

0

참고 :

 } 
    ); 
    } 
} 
</script> 

는이 작업을 할 수 있습니다. 이 구글의 서버에서 작동하지만, 아마도 당신이 아닌 동일한 상대 경로를 만들었습니다. 대신 다음을 시도하십시오.

<link href="https://google-developers.appspot.com/maps/documentation/javascript/examples/geocoding-simple/maps/documentation/javascript/examples/default.css" rel="stylesheet"> 
+0

글쎄, 그 코드는 그 링크와 함께 작동했지만 나는 디버거와 함께 그것을 확인하려고합니다. 감사! –

관련 문제