구글 API 문제
본문
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Cache-control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="expires" content="-1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="//code.jquery.com/jquery-1.10.2.min.js" charset="UTF-8"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=falseViewer"></script>
</head>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map-canvas, #map_canvas {
width: 50%; float:right; height: 100%;
}
#panel {
position: relative;
width: 50%;
float:left;
height: 100%;
background-color: #fff;
}
</style>
<style>
/* Form Styling */
input {
width:80%;
height:30px;
font-family: Helvetica, Arial, sans-serif;
font-size: 12.5px;
padding: 8px 10px 7px 10px;
margin: 0;
color: #999;
border: 1px solid #cdcbbe;
background: #f4eee3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
input:focus {
background-color: #fff;
border-color: #ccc;
}
:focus::-webkit-input-placeholder {
color: #ccc;
}
:focus:-moz-placeholder {
color: #ccc;
}
:focus:-ms-input-placeholder {
color: #ccc;
}
#range_alram {font-size:20px; color:#eb5e46; font-weight:bold; vertical-align:middle; margin:-7px 0 0 15px;}
a.btn_adress {display:inline-block; margin-left:5px; margin-top:0px; padding:6px; border-radius:2px; background-color:#909090; font-size:14px; color:#fff; vertical-align:middle;text-decoration:none;}
</style>
<script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var chicago = new google.maps.LatLng(37.5040506, 126.7496805);
var mapOptions = {
zoom:10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: chicago
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map);
}
function calcRoute() {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
var mode = document.getElementById('mode').value;
alert(start);
alert(end);
var request = {
origin:start,
destination:end,
travelMode: eval("google.maps.DirectionsTravelMode."+mode),
unitSystem: google.maps.UnitSystem.METRIC
};
directionsService.route(request, function(response, status) {
// 확인용 Alert..미사용시 삭제
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var route = response.routes[0];
// For each route, display summary information.
var distance = 0;
for (var i = 0; i < route.legs.length; i++) {
distance = distance + route.legs[i].distance.text;
};
$("#range_alram").html(start +"에서 <br>"+ end+"까지의 거리는 <br>"+distance+"입니다.");
}else {
alert("정확한 주소를 입력하세요.");
return;
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
/*
function open_addr(str) {
var addr_pop = window.open("./search_addr.php?addr="+str, "addr_pop", "width=520, height=400, left=30, top=30, scrollbars=yes,titlebar=no,status=no,resizable=no,fullscreen=no");
addr_pop.focus();
}
*/
</script><script src="https://spi.maps.daum.net/imap/map_js_init/postcode.v2.js"></script>
<script>
//본 예제에서는 도로명 주소 표기 방식에 대한 법령에 따라, 내려오는 데이터를 조합하여 올바른 주소를 구성하는 방법을 설명합니다.
function start_code() {
new daum.Postcode({
oncomplete: function(data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
// 도로명 주소의 노출 규칙에 따라 주소를 조합한다.
// 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
var fullRoadAddr = data.roadAddress; // 도로명 주소 변수
var extraRoadAddr = ''; // 도로명 조합형 주소 변수
// 법정동명이 있을 경우 추가한다. (법정리는 제외)
// 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
extraRoadAddr += data.bname;
}
// 건물명이 있고, 공동주택일 경우 추가한다.
if(data.buildingName !== '' && data.apartment === 'Y'){
extraRoadAddr += (extraRoadAddr !== '' ? ', ' + data.buildingName : data.buildingName);
}
// 도로명, 지번 조합형 주소가 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
if(extraRoadAddr !== ''){
extraRoadAddr = ' (' + extraRoadAddr + ')';
}
// 도로명, 지번 주소의 유무에 따라 해당 조합형 주소를 추가한다.
if(fullRoadAddr !== ''){
fullRoadAddr += extraRoadAddr;
}
// 우편번호와 주소 정보를 해당 필드에 넣는다.
// document.getElementById('sample4_postcode').value = data.zonecode; //5자리 새우편번호 사용
// document.getElementById('sample4_roadAddress').value = fullRoadAddr;
// document.getElementById('sample4_jibunAddress').value = data.jibunAddress;
document.getElementById('start').value = data.jibunAddress;
document.getElementById('start').value = fullRoadAddr;
// 사용자가 '선택 안함'을 클릭한 경우, 예상 주소라는 표시를 해준다.
if(data.autoRoadAddress) {
//예상되는 도로명 주소에 조합형 주소를 추가한다.
var expRoadAddr = data.autoRoadAddress + extraRoadAddr;
document.getElementById('start').innerHTML = '(예상 도로명 주소 : ' + expRoadAddr + ')';
} else if(data.autoJibunAddress) {
var expJibunAddr = data.autoJibunAddress;
document.getElementById('start').innerHTML = '(예상 지번 주소 : ' + expJibunAddr + ')';
} else {
document.getElementById('start').innerHTML = '';
}
}
}).open();
}
function end_code() {
new daum.Postcode({
oncomplete: function(data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
// 도로명 주소의 노출 규칙에 따라 주소를 조합한다.
// 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
var fullRoadAddr = data.roadAddress; // 도로명 주소 변수
var extraRoadAddr = ''; // 도로명 조합형 주소 변수
// 법정동명이 있을 경우 추가한다. (법정리는 제외)
// 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
extraRoadAddr += data.bname;
}
// 건물명이 있고, 공동주택일 경우 추가한다.
if(data.buildingName !== '' && data.apartment === 'Y'){
extraRoadAddr += (extraRoadAddr !== '' ? ', ' + data.buildingName : data.buildingName);
}
// 도로명, 지번 조합형 주소가 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
if(extraRoadAddr !== ''){
extraRoadAddr = ' (' + extraRoadAddr + ')';
}
// 도로명, 지번 주소의 유무에 따라 해당 조합형 주소를 추가한다.
if(fullRoadAddr !== ''){
fullRoadAddr += extraRoadAddr;
}
// 우편번호와 주소 정보를 해당 필드에 넣는다.
// document.getElementById('sample4_postcode').value = data.zonecode; //5자리 새우편번호 사용
// document.getElementById('sample4_roadAddress').value = fullRoadAddr;
// document.getElementById('sample4_jibunAddress').value = data.jibunAddress;
document.getElementById('end').value = data.jibunAddress;
document.getElementById('end').value = fullRoadAddr;
// 사용자가 '선택 안함'을 클릭한 경우, 예상 주소라는 표시를 해준다.
if(data.autoRoadAddress) {
//예상되는 도로명 주소에 조합형 주소를 추가한다.
var expRoadAddr = data.autoRoadAddress + extraRoadAddr;
document.getElementById('end').innerHTML = '(예상 도로명 주소 : ' + expRoadAddr + ')';
} else if(data.autoJibunAddress) {
var expJibunAddr = data.autoJibunAddress;
document.getElementById('end').innerHTML = '(예상 지번 주소 : ' + expJibunAddr + ')';
} else {
document.getElementById('end').innerHTML = '';
}
}
}).open();
}
</script>
<body>
<div id="panel" >
<input type="hidden" id="mode" name="mode" value="TRANSIT" />
<table style="width:100%; height:100%; border:1px solid #ccc;">
<colgroup>
<col width="100px">
<col width="*">
</colgroup>
<tr height="30">
<td style="text-align:center;" colspan="2" ><h1></h1></td>
</tr>
<tr height="30">
<td style="text-align:right;"><a class="btn_adress" href="javascript:start_code();">출발지</a></td>
<td><input type="text" id="start" value="" />
<!--
<input type="text" id="sample4_postcode" placeholder="우편번호">
<input type="button" onclick="sample4_execDaumPostcode()" value="우편번호 찾기"><br>
<input type="text" id="sample4_roadAddress" placeholder="도로명주소">
<input type="text" id="sample4_jibunAddress" placeholder="지번주소">
<span id="guide" style="color:#999"></span> -->
</td>
</tr>
<tr height="30">
<td style="text-align:right;"><a class="btn_adress" href="javascript:end_code();">도착지</a></td>
<td><input type="text" id="end" value="" /></td>
</tr>
<tr height="30">
<td colspan="2" align="center">
<a href="#"onclick="Javascript:calcRoute();">검색</a>
<!-- <img src="./images/btn_move.gif" style="padding:5px; cursor:pointer;" onclick="Javascript:calcRoute();"> --></td>
</tr>
<tr height="*">
<td colspan="2" align="center">
<span id="range_alram" ></span>
</td>
</tr>
</table>
</div>
<div id="map-canvas"></div>
</body>
</html>
주소는 적확하게 입력 이되는 듯한데 흠,
if (status == google.maps.DirectionsStatus.OK) {
부분에서 걸리는 듯한데 혹시 해결 방법 아시는분?
