My Name is Kay....

DIY , 먹방 , 개발 , 육아 , 여행 좋아합니다.
AdBlock 사용시 화면이 정상적으로 노출되지 않습니다.
포스팅 관련 문의 및 개발 문의는 Email : wkzkfmxksi@gmail.com

추가 포스팅이 이뤄지지 않는 블로그입니다. 문의는 wkzkfmxksi@gmail.com 으로 연락주세요.
kay
조회 수 28986 추천 수 0 댓글 13
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

지명 또는 주소를 입력해서 

이동 수단 별 이동 경로를 알려주는 기능


국내 Driving , Walking 은 잘 안되는듯함...Transit 은 잘 됨..


Test Url : http://www.uhoon.co.kr/test/872.html


Directions service.png


<!DOCTYPE html>
<html>
	<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
	<meta charset="utf-8">
	<title>Directions service</title>
	<style type="text/css">
		html, body {
		  height: 100%;
		  margin: 0;
		  padding: 0;
		}

		#map-canvas, #map_canvas {
		  height: 100%;
		}

		@media print {
		  html, body {
			height: auto;
		  }

		  #map_canvas {
			height: 650px;
		  }
		}

		#panel {
		  position: absolute;
		  top: 5px;
		  left: 50%;
		  margin-left: -180px;
		  z-index: 5;
		  background-color: #fff;
		  padding: 5px;
		  border: 1px solid #999;
		}
	</style>
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
	<script>
	var directionsDisplay;
	var directionsService = new google.maps.DirectionsService();
	var map;

	function initialize() {
	  directionsDisplay = new google.maps.DirectionsRenderer();
	  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
	  var mapOptions = {
		zoom:7,
		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;

	  var request = {
		  origin:start,
		  destination:end,
		  travelMode: eval("google.maps.DirectionsTravelMode."+mode)
	  };
	  directionsService.route(request, function(response, status) {
		alert(status);  // 확인용 Alert..미사용시 삭제
		if (status == google.maps.DirectionsStatus.OK) {
			directionsDisplay.setDirections(response);
		}
	  });
	}

	google.maps.event.addDomListener(window, 'load', initialize);

	</script>
	</head>
	<body>
		<div id="panel" >
			<b>Start: </b>
			<input type="text" id="start" />
			<b>End: </b>
			<input type="text" id="end" />
			<div>
				<strong>Mode of Travel: </strong>
				<select id="mode">
				<option value="DRIVING">Driving</option>
				<option value="WALKING">Walking</option>
				<option value="BICYCLING">Bicycling</option>
				<option value="TRANSIT">Transit</option>
				</select>
				<input type="button" value="길찾기" onclick="Javascript:calcRoute();" />
			</div>
		</div>
		<div id="map-canvas"></div>
	</body>
</html>

?
  • ?
    방문객 2013.05.30 17:37

    항상 많은 도움을 받다가 처음으로 댓글을 남기면서 질문이 있습니다.

    출발지를 설정하지 않고 현제 위치를 자동으로 받아주는 방법은 안되는 건가요.

    아직 공부가 많이 부족해서 가능하다면 자세히 가르쳐주시면 감사합니다.

  • ?
    kay 2013.05.31 08:36

    도움이 되셧다니 기쁘네요..


    브라우져에서 현재 위경도 값을 읽어오는 방법입니다..


    gps가 잇다면 좀 더 정확한 데이터가 확인될것같습니다..

    http://www.uhoon.co.kr/API/1200


    읽어온 위경도를 구글맵 마커로 표시해주는 기능입니다.

    http://www.uhoon.co.kr/GoogleAPI/1208

  • ?
    yimcow 2014.02.04 19:08

    이런식으로 안드로이드에서 구현할수도 있을까요?,?

    자바스크립트이니 JSON사용해서 파싱해주면 될지.. 혹시 구현해보셨나요~?

  • ?
    kay 2014.02.06 17:13

    어플쪽은 경험이 전무한지라 요즘 학습중입니다 ㅎㅎ;;


    유사한 기능이 구현된 어플은 많이 봤는데 가능하지 싶네요.


    모바일웹이라고 한다면 당연 가능합니다. 

  • ?
    pulp 2014.09.03 23:12

    예제 감사합니다.

    질문이 있는데요.

    여기서 길찾기를 수행한 후에 그려진 경로에 대한 위치 데이터를 따로 받을 수 있나요?

    3D모델에 위치를 삽입해서 해당 경로를 따라 이동시키려고 합니다.

  • ?
    kay 2014.09.04 08:40

    길찾기 결과에 경로에 대한 위경도 값을 XML 및 JSON 으로 내려주는 기능입니다.

    아래 주소를 한번 보심이 ^^

    https://developers.google.com/maps/documentation/directions/?hl=ko#XML

  • ?
    dong 2014.11.13 10:55

    지금 iot과정에서 안드로이드 앱 과정을 진행중인 학생입니다.


    api를 통해서 간단한 네비를 제작 할 수 있을까요?

  • ?
    kcyck 2015.04.16 00:08

    정말감사합니다. 마커찍는 것 까지는 성공했는데 그 마커를 이어줄때 폴리라인으로 하니깐 그냥 직선으로만 나오고 순서도 없이 나와서 헤맸는데


    정말 큰도움이 되었습니다. 감사합니다. ^^

  • ?
    kay 2015.04.17 15:16

    도움이 되셧다니 기쁩니다. 즐프하세요!!

  • ?
    chris 2015.07.19 13:05

    안녕하세요 ^^ 홈페이지 보면서 구글 api를 공부하고 있습니다. 도움이 많이 되네요!

    혹시 A와 B지점 사이의 길찾기를 하면서 중간 노드들의 위도/경도를 받아올 수 있는 방법이 있을까요?

    경로가 어떻게 draw(?)되는지 모르겠네요 ^ㅇ^ ;;

    다른 예제를 보니 getCurrentPosision() 같은 함수도 있던데 잘 못찾겠습니다 ㅠ_ㅠ;

  • ?
    kay 2015.08.05 13:30 Files첨부 (1)

    댓글이 좀 늦었습니다..ㅠㅠ 요즘 치과 치료에... 머리가..휑하네요


    원하시는 좌표 배열은 

    directionsService Response 데이터 안에 있습니다.

    response.routes[0].overview_path[1] 와 같이 쓰실수 있구요.

    크롬 개발자 도구에서도 확인 가능하시구요..


    이미지 13.jpg


    그려지는 방법에 대해서는 directionsDisplay.setDirections(response); 살펴보시면 되실듯하구요.

    그 밖에 활용 예제는 https://developers.google.com/maps/documentation/javascript/examples/directions-complex 

    참고하시면 도움이 되실것같습니다.

  • ?
    chris 2015.08.16 15:22

    헐... 저는 안보시는줄 알았는데 이렇게 상세한 답변을 달아주셔서 정말 감사드립니다!

  • ?
    kay 2015.08.18 08:48

    육아에 전념(?) 하다보니...이래저래 좀 늦었습니다만 이렇게 봐주시니 또 기분이 좋습니다..^^


List of Articles
번호 분류 제목 글쓴이 날짜 조회 수
20 map 구글맵 v3 infoBox file kay 2015.12.29 2932
19 map 구글맵 v3 단순 다중 마커 (배열이용) 2 file kay 2015.12.28 10249
18 map 구글맵 마커 + 말풍선 - v3 2 file kay 2015.02.05 3275
17 map 구글맵 v3 맵상에 보여지는 마커만 생성하기 5 file kay 2014.08.04 7594
16 map 구글맵 v3 - 마커 + 말풍선 + GPS 연동+ 원그리기 + 동적 마커 생성( Ajax + Json ) 24 file kay 2014.07.17 16905
15 기타 Google 웹사이트 번역기 2 file kay 2014.04.21 5316
14 map Google Places API를 이용한 주변 지역 정보 검색 26 file kay 2013.10.18 21294
13 map GeoRSS 피드에서 KmlLayer를 생성..." geoRSS 로 레이어 마커 찍기 " 2 file kay 2013.08.28 5240
12 map 구글맵 API 적용범위 (Google Maps API Coverage) kay 2013.08.27 4974
11 map google 스트릿뷰 "Street View" file kay 2013.08.27 4704
10 map 브라우져에서 현재 위경도 읽어와서 구글맵에 마커 표시하기 ( getCurrentPosition + Googlemap marker ) file kay 2013.05.31 24273
» map 구글맵 출발지 도착지 주소입력해서 길찾기 - v3 13 file kay 2013.05.03 28986
8 map 모바일 웹 - 위치정보(GPS) + 마커 + 카톡 + 카스 연동 file kay 2013.04.24 10239
7 map 구글맵 아이콘 마커 + 말풍선 + 주소로 위경도 검색 + 거리별 원그리기 - v3 file kay 2013.04.22 14702
6 map geocode - 주소로 위경도 검색 v3 file kay 2013.04.21 8047
5 map 구글맵 마커 + 말풍선 - v2 kay 2013.02.06 10978
4 map geocode - 구글 맵 위경도 검색 v2 kay 2013.02.06 7295
3 Graph 막대 그래프 kay 2013.02.06 8496
2 Graph 선 + 막대 그래프 kay 2013.02.06 8653
1 Graph 선 그래프 file kay 2013.02.06 6296
Board Pagination Prev 1 Next
/ 1