구글 API 문제

구글 API 문제

QA

구글 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) { 

 

부분에서 걸리는 듯한데 혹시 해결 방법 아시는분?

 


이 질문에 댓글 쓰기 :

답변을 작성하시기 전에 로그인 해주세요.
전체 183
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT